)
})}
@@ -356,108 +337,29 @@ const renderForwardTogether = (msgId) => {
)
}
-const renderAt = (content, msgType) => {
- const index = content.indexOf('-')
- if (index !== -1) {
- const nickName = content.slice(index + 1)
- if (msgType === MsgType.GROUP_CHAT && nickName) {
- return
}
-const renderQuote = (quoteContent) => {
- const { nickName, content, msgTime } = jsonParseSafe(quoteContent)
- let showContent = content || ''
- if (content) {
- const defaultContent = content.replace(/<(?:.*?)-(.*?)>/g, '@$1').replace(/\{\d+\}/g, '[图片]')
- showContent = defaultContent
- const contentJson = jsonParseSafe(defaultContent)
- if (contentJson) {
- const type = contentJson['type']
- const objectId = contentJson['value']
- switch (type) {
- case msgContentType.RECORDING:
- showContent = '[语音]'
- break
- case msgContentType.AUDIO:
- showContent = `[音频] ${audioData.audio[objectId].fileName}`
- break
- case msgContentType.IMAGE:
- showContent = `[图片] ${imageData.image[objectId].fileName}`
- break
- case msgContentType.VIDEO:
- showContent = `[视频] ${videoData.video[objectId].fileName}`
- break
- case msgContentType.DOCUMENT:
- showContent = `[文档] ${documentData.document[objectId].fileName}`
- break
- default:
- break
- }
- }
- }
-
+const renderQuote = (quoteContent, msgId) => {
+ const { nickName } = quoteContent
+ const { content, msgTime } = quoteMsg.value[msgId]
+ ? quoteMsg.value[msgId]
+ : { content: '', msgTime: '' }
// 和InputEditor.vue中的结构保持一致，使用相同class可以复用样式
return (
)
}
-const showMsgContentInForwardTogether = (content) => {
- const jsonContent = jsonParseSafe(content)
- let template
- if (jsonContent && jsonContent['type'] && jsonContent['value']) {
- if (jsonContent['type'] == msgContentType.IMAGE) {
- template = '[图片]'
- } else if (jsonContent['type'] == msgContentType.AUDIO) {
- template = '[音频]'
- } else if (jsonContent['type'] == msgContentType.RECORDING) {
- template = '[语音]'
- } else if (jsonContent['type'] == msgContentType.VIDEO) {
- template = '[视频]'
- } else if (jsonContent['type'] == msgContentType.DOCUMENT) {
- template = '[文件]'
- } else if (jsonContent['type'] == msgContentType.FORWARD_TOGETHER) {
- template = '[聊天记录]'
- } else {
- template = jsonContent['value']
- }
- return template
- } else {
- return content
- .replace(/\{\d+\}/g, '[图片]')
- .replace(/(「\{.*?\}」)/, '[引用]')
- .split(/(<.*?>)/)
- .map((item) => {
- const sliceStr = item.slice(1, -1)
- const index = sliceStr.indexOf('-')
- if (index !== -1) {
- const nickName = sliceStr.slice(index + 1)
- if (nickName) {
- return `@${nickName}`
- } else {
- return item
- }
- }
- return item
- })
- .join('')
- }
-}
-
const onClose = () => {
emit('update:isShow', false)
emit('close')
@@ -494,6 +396,7 @@ const onShowUserCard = (account) => {
class="dialog-msg-list"
:model-value="props.isShow"
:modal="false"
+ draggable
:width="'600px'"
:top="`${30 + (props.tier || 0)}vh`"
:z-index="1000"
diff --git a/src/views/message/components/InputEditor.vue b/src/views/message/components/InputEditor.vue
index 3160048..a95528c 100644
--- a/src/views/message/components/InputEditor.vue
+++ b/src/views/message/components/InputEditor.vue
@@ -20,14 +20,35 @@ import { prehandleImage } from '@/js/utils/image'
import { MsgType } from '@/proto/msg'
import AtList from '@/views/message/components/AtList.vue'
import AgreeBeforeSend from '@/views/message/components/AgreeBeforeSend.vue'
+import { isMatchMsgStruct, showSimplifyMsgContent } from '@/js/utils/message'
+import { msgChatQueryMessagesService } from '@/api/message'
/**
- * 处理粘贴格式问题
+ * 处理复制/粘贴结构化数据
*/
const Clipboard = Quill.import('modules/clipboard')
class PlainClipboard extends Clipboard {
- onPaste(range, { text }) {
- handlePaste(range, text)
+ onPaste(range, data) {
+ if (!data.html) {
+ handlePaste(range, data.text)
+ return
+ }
+
+ const parser = new DOMParser()
+ const doc = parser.parseFromString(data.html, 'text/html')
+ const elements = doc.querySelectorAll('[data-quill-custom]') // 查找所有具有 data-quill-custom 属性的元素
+ if (elements.length > 0) {
+ // 取第一个匹配的元素
+ const encodedData = elements[0].getAttribute('data-quill-custom')
+ const decodedData = decodeURIComponent(encodedData)
+ handlePaste(range, decodedData)
+ } else {
+ handlePaste(range, data.text) // 降级方案
+ }
+ }
+
+ onCopy(range) {
+ return handleCopy(range)
}
}
Quill.register(
@@ -96,53 +117,21 @@ class QuoteBlock extends Embed {
super.remove()
}
- static create({ account, nickName, msgId, content, msgTime }) {
+ static create({ account, nickName, msgKey, msgId, content, msgTime }) {
const node = super.create()
node.dataset.account = account
node.dataset.nickName = nickName
+ node.dataset.msgKey = msgKey
node.dataset.msgId = msgId
node.dataset.msgTime = showTimeFormat(msgTime)
node.dataset.content = content
- .split(/(「\{.*?\}」)/)
- .filter((item) => !(item.startsWith('「{') && item.endsWith('}」'))) // 引用的引用不予展示
- .join('')
-
- const defaultContent = node.dataset.content
- .replace(/<(?:.*?)-(.*?)>/g, '@$1')
- .replace(/\{\d+\}/g, '[图片]')
- const contentJson = jsonParseSafe(defaultContent)
- let showContent = defaultContent
- if (contentJson) {
- const type = contentJson['type']
- const objectId = contentJson['value']
- switch (type) {
- case msgContentType.RECORDING:
- showContent = '[语音]'
- break
- case msgContentType.AUDIO:
- showContent = `[音频] ${audioData.audio[objectId].fileName}`
- break
- case msgContentType.IMAGE:
- showContent = `[图片] ${imageData.image[objectId].fileName}`
- break
- case msgContentType.VIDEO:
- showContent = `[视频] ${videoData.video[objectId].fileName}`
- break
- case msgContentType.DOCUMENT:
- showContent = `[文档] ${documentData.document[objectId].fileName}`
- break
- default:
- break
- }
- }
-
node.innerHTML = `
- ${node.dataset.nickName}
+ ${node.dataset.nickName}
${node.dataset.msgTime}：
-
${showContent}
+
${showSimplifyMsgContent(node.dataset.content)}
@@ -155,6 +144,7 @@ class QuoteBlock extends Embed {
return {
account: node.dataset.account,
nickName: node.dataset.nickName,
+ msgKey: node.dataset.msgKey,
msgId: node.dataset.msgId,
content: node.dataset.content,
msgTime: node.dataset.msgTime
@@ -207,8 +197,8 @@ onMounted(async () => {
toSendAtList.value = []
// 给组件增加滚动条样式
document.querySelector('.ql-editor').classList.add('my-scrollbar')
- await imageData.loadImageInfoFromContent(props.draft)
- renderContent(props.draft) // 渲染草稿
+ await imageData.preloadImageFromMsg(props.draft)
+ await renderContent(props.draft) // 渲染草稿
quill.value.on('composition-start', () => {
// 当用户使用拼音输入法开始输入汉字时，这个事件就会被触发
quill.value.root.dataset.placeholder = ''
@@ -333,10 +323,10 @@ onBeforeUnmount(async () => {
}
}
- fn(contentObj.contentFromLocal.join('').trim())
+ fn(JSON.stringify(contentObj.contentFromLocal.filter((item) => item)))
callbacks.allUploadedSuccessFn = () => {
- fn(contentObj.contentFromServer.join('').trim())
+ fn(JSON.stringify(contentObj.contentFromServer.filter((item) => item)))
}
})
@@ -383,8 +373,8 @@ const cursorProtectForQuote = () => {
*/
const parseContent = async (callbacks) => {
const delta = quill.value.getContents()
- let contentFromLocal = new Array(delta.ops.length).fill('')
- let contentFromServer = new Array(delta.ops.length).fill('')
+ let contentFromLocal = new Array(delta.ops.length).fill('') // 这里用new Array + index填充方式，而不用push，是为了保证内容的顺序
+ let contentFromServer = new Array(delta.ops.length).fill('') // contentFromServer更新了某些服务端返回的数据
let needUploadCount = 0 // 需要上传的图片个数
let uploadedTotalCount = 0 // 已发上传请求的图片个数，包括上传成功和失败
let uploadSuccessCount = 0 // 已经上传成功的图片个数
@@ -405,39 +395,64 @@ const parseContent = async (callbacks) => {
const insert = op.insert
if (insert && typeof insert === 'string') {
// 文本
- contentFromLocal[index] = insert
- contentFromServer[index] = insert
+ let contentText = {}
+ if (index === delta.ops.length - 1) {
+ const lastInsert = insert.endsWith('\n') ? insert.slice(0, -1) : insert // 去除最后一个换行符
+ if (lastInsert) {
+ contentText = {
+ type: msgContentType.TEXT,
+ value: lastInsert
+ }
+ } else {
+ break
+ }
+ } else {
+ contentText = {
+ type: msgContentType.TEXT,
+ value: insert
+ }
+ }
+ contentFromLocal[index] = contentText
+ contentFromServer[index] = contentText
} else if (insert && insert.atMention) {
// 处理用于@的自定义Blot
const { account, nickName } = insert.atMention
- contentFromLocal[index] = `<${account}-${nickName}>`
- contentFromServer[index] = `<${account}-${nickName}>`
+ const contentAt = { type: msgContentType.AT, value: { account, nickName } }
+ contentFromLocal[index] = contentAt
+ contentFromServer[index] = contentAt
} else if (insert && insert.quoteBlock) {
// 处理用于引用的自定义Blot
- const quoteContent = JSON.stringify({
- account: insert.quoteBlock.account,
- nickName: insert.quoteBlock.nickName,
- msgId: insert.quoteBlock.msgId,
- content: insert.quoteBlock.content,
- msgTime: insert.quoteBlock.msgTime
- })
- contentFromLocal[index] = `「${quoteContent}」`
- contentFromServer[index] = `「${quoteContent}」`
+ contentFromLocal[index] = {
+ type: msgContentType.QUOTE,
+ value: {
+ nickName: insert.quoteBlock.nickName,
+ msgId: insert.quoteBlock.msgKey // 注意这里的区别
+ }
+ }
+ contentFromServer[index] = {
+ type: msgContentType.QUOTE,
+ value: {
+ nickName: insert.quoteBlock.nickName,
+ msgId: insert.quoteBlock.msgId // 注意这里的区别
+ }
+ }
} else if (insert && insert.image) {
const alt = op.attributes?.alt
if (alt && alt.startsWith('[') && alt.endsWith(']')) {
// 表情id
- contentFromLocal[index] = alt
- contentFromServer[index] = alt
+ const contentEmoji = { type: msgContentType.EMOJI, value: alt }
+ contentFromLocal[index] = contentEmoji
+ contentFromServer[index] = contentEmoji
} else if (alt && alt.startsWith('{') && alt.endsWith('}')) {
- // 图片id
- contentFromLocal[index] = alt
- contentFromServer[index] = alt
+ // 已有objectId的截图，说明是已上传过服务端的
+ const contentSceenShot = { type: msgContentType.SCREENSHOT, value: alt.slice(1, -1) }
+ contentFromLocal[index] = contentSceenShot
+ contentFromServer[index] = contentSceenShot
} else if (insert.image.startsWith('data:') && insert.image.includes('base64')) {
- // base64编码的图片
+ // 截图的原始base64编码的图片
const file = base64ToFile(insert.image, uuidv4()) // base64转file
const tempObjectId = new Date().getTime()
- contentFromLocal[index] = `{${tempObjectId}}`
+ contentFromLocal[index] = { type: msgContentType.SCREENSHOT, value: tempObjectId }
// 发送的时候设置本地缓存（非服务端数据），用于立即渲染
const md5 = await getMd5(file)
const prehandleImageObj = await prehandleImage(file)
@@ -473,7 +488,10 @@ const parseContent = async (callbacks) => {
.then((res) => {
imageData.setImage(res.data.data) // 缓存image数据
uploadSuccessCount++
- contentFromServer[index] = `{${res.data.data.objectId}}`
+ contentFromServer[index] = {
+ type: msgContentType.SCREENSHOT,
+ value: res.data.data.objectId
+ }
callbacks.someOneUploadedSuccessFn()
if (uploadSuccessCount === needUploadCount) {
callbacks.allUploadedSuccessFn()
@@ -487,8 +505,9 @@ const parseContent = async (callbacks) => {
})
} else {
// 当文本处理
- contentFromLocal[index] = insert
- contentFromServer[index] = insert
+ const contentText = { type: msgContentType.TEXT, value: insert }
+ contentFromLocal[index] = contentText
+ contentFromServer[index] = contentText
}
}
}
@@ -525,21 +544,20 @@ watch(
}
callbacks.allUploadedSuccessFn = () => {
- fn(contentObj.contentFromServer.join('').trim())
+ // JSON.stringify(contentObj.contentFromServer.filter((item) => item))在空值时返回'[]''
+ let inputContent = JSON.stringify(contentObj.contentFromServer.filter((item) => item))
+ fn(inputContent === '[]' ? '' : inputContent)
}
- fn(contentObj.contentFromLocal.join('').trim())
+ // JSON.stringify(contentObj.contentFromLocal.filter((item) => item))在空值时返回'[]''
+ let inputContent = JSON.stringify(contentObj.contentFromLocal.filter((item) => item))
+ fn(inputContent === '[]' ? '' : inputContent)
- renderContent(messageData.sessionList[newSessionId].draft || '') // 切换session时渲染新session的草稿
+ await renderContent(messageData.sessionList[newSessionId].draft || '') // 切换session时渲染新session的草稿
},
{ deep: true }
)
-// 实现消息复制的效果，步骤如下
-// 1. 拷贝原消息中的content内容
-// 2. 粘贴时自动调用renderContent渲染内容
-// 3. 渲染时保存复制内容
-// 4. 发送时使用保存的复制内容
const pasteObj = {
content: null,
contentType: null,
@@ -556,161 +574,235 @@ const clearPasteObj = () => {
pasteObj.url = null
}
-const handlePaste = (range, content) => {
- if (!content) {
+/**
+ * 处理复制
+ */
+const handleCopy = ({ index, length }) => {
+ const delta = quill.value.getContents(index, length)
+
+ const clipboardContent = []
+ let clipboardText = ''
+
+ for (let index = 0; index < delta.ops.length; index++) {
+ const op = delta.ops[index]
+ const insert = op.insert
+ if (insert && typeof insert === 'string') {
+ // 文本
+ clipboardContent.push({
+ type: msgContentType.TEXT,
+ value: insert
+ })
+ clipboardText += insert
+ } else if (insert && insert.image) {
+ const alt = op.attributes?.alt
+ if (alt && alt.startsWith('[') && alt.endsWith(']')) {
+ // 表情
+ clipboardContent.push({ type: msgContentType.EMOJI, value: alt })
+ } else if (alt && alt.startsWith('{') && alt.endsWith('}')) {
+ // 已有objectId的截图，复制原消息粘贴的，撤回重新编辑，从草稿渲染
+ clipboardContent.push({ type: msgContentType.SCREENSHOT, value: alt.slice(1, -1) })
+ } else if (insert.image.startsWith('data:') && insert.image.includes('base64')) {
+ // 截图后原始的base64编码
+ }
+ }
+ }
+
+ return {
+ // 在html自定义属性data-quill-custom中传递clipboardContent结构化数据
+ html: `
`,
+ text: clipboardText // 纯文本
+ }
+}
+
+/**
+ * 处理粘贴
+ * @param range
+ */
+const handlePaste = (range, text) => {
+ if (!text) {
return
}
- const jsonContent = jsonParseSafe(content)
- if (jsonContent && jsonContent['type'] && jsonContent['value']) {
- clearPasteObj()
- pasteObj.content = content
- pasteObj.contentType = jsonContent['type']
- const fileId = jsonContent['value']
- switch (pasteObj.contentType) {
- case msgContentType.IMAGE:
- pasteObj.fileName = imageData.image[fileId]?.fileName
- pasteObj.fileSize = imageData.image[fileId]?.size
- pasteObj.url = imageData.image[fileId]?.thumbUrl
- break
- case msgContentType.AUDIO:
- pasteObj.fileName = audioData.audio[fileId]?.fileName
- pasteObj.fileSize = audioData.audio[fileId]?.size
- break
- case msgContentType.VIDEO:
- pasteObj.fileName = videoData.video[fileId]?.fileName
- pasteObj.fileSize = videoData.video[fileId]?.size
- break
- case msgContentType.DOCUMENT:
- pasteObj.fileName = documentData.document[fileId]?.fileName
- pasteObj.fileSize = documentData.document[fileId]?.size
- break
- default:
- break
- }
-
- // 文件确实存在才发送
- if (pasteObj.fileName) {
- showAgreeDialog.value = true
- return
- }
+ if (!isMatchMsgStruct(text)) {
+ const delta = new Delta().retain(range.index).delete(range.length).insert(text)
+ quill.value.updateContents(delta, Quill.sources.USER)
+ quill.value.setSelection(delta.length() - range.length, Quill.sources.USER)
+ return
}
- const delta = new Delta().retain(range.index).delete(range.length).insert(content)
+ const delta = new Delta().retain(range.index).delete(range.length)
+
+ const arr = jsonParseSafe(text)
+ for (const item of arr) {
+ const { type, value } = item
+ if (
+ type === msgContentType.IMAGE ||
+ type === msgContentType.AUDIO ||
+ type === msgContentType.VIDEO ||
+ type === msgContentType.DOCUMENT
+ ) {
+ clearPasteObj()
+ pasteObj.content = item
+ pasteObj.contentType = type
+ const fileId = value
+ switch (type) {
+ case msgContentType.IMAGE:
+ pasteObj.fileName = imageData.image[fileId]?.fileName
+ pasteObj.fileSize = imageData.image[fileId]?.size
+ pasteObj.url = imageData.image[fileId]?.thumbUrl
+ break
+ case msgContentType.AUDIO:
+ pasteObj.fileName = audioData.audio[fileId]?.fileName
+ pasteObj.fileSize = audioData.audio[fileId]?.size
+ break
+ case msgContentType.VIDEO:
+ pasteObj.fileName = videoData.video[fileId]?.fileName
+ pasteObj.fileSize = videoData.video[fileId]?.size
+ break
+ case msgContentType.DOCUMENT:
+ pasteObj.fileName = documentData.document[fileId]?.fileName
+ pasteObj.fileSize = documentData.document[fileId]?.size
+ break
+ default:
+ break
+ }
+
+ // 文件确实存在才发送
+ if (pasteObj.fileName) {
+ showAgreeDialog.value = true
+ return // 这四种类型的数组只能有1个元素，所以直接return
+ }
+ } else {
+ switch (type) {
+ case msgContentType.TEXT:
+ delta.insert(value)
+ break
+ case msgContentType.EMOJI: {
+ const emojiUrl = emojis[value]
+ if (emojiUrl) {
+ delta.insert({ image: emojiUrl }, { alt: value })
+ } else {
+ delta.insert(value)
+ }
+ break
+ }
+ case msgContentType.SCREENSHOT: {
+ const imageUrl = imageData.image[value]?.originUrl
+ if (imageUrl) {
+ delta.insert({ image: imageUrl }, { alt: `{${value}}` }) // 添加区别于emoji表情alt的符号，方便parse时识别
+ } else {
+ delta.insert(value)
+ }
+ break
+ }
+ case msgContentType.AT: {
+ const { account, nickName } = value
+ toSendAtList.value.push(account)
+ delta.insert({ atMention: { account, nickName } })
+ break
+ }
+ case msgContentType.QUOTE:
+ default:
+ break
+ }
+ }
+ }
quill.value.updateContents(delta, Quill.sources.USER)
quill.value.setSelection(delta.length() - range.length, Quill.sources.USER)
}
/**
- * 把输入框的字符串内容渲染成富媒体内容
- * @param content 字符串内容
+ * 输入框从空状态渲染可视内容
+ * 1. 渲染草稿
+ * 2. 消息撤回后的重新编辑
+ * @param content json结构化内容的字符串
*/
-const renderContent = (content) => {
+const renderContent = async (content) => {
if (!content) {
quill.value.setText('')
return
}
- let contentArray = []
- // 先匹配quote引用内容
- content.split(/(「\{.*?\}」)/).forEach((item) => {
- if (item.startsWith('「{') && item.endsWith('}」')) {
- // quote引用内容直接添加如数组
- contentArray.push(item)
- } else {
- //匹配内容中的图片
- item.split(/(\{\d+\})/).forEach((item) => {
- //匹配内容中的表情
- item.split(/(\[.*?\])/).forEach((item) => {
- //匹配内容中的@
- item.split(/(<.*?>)/).forEach((item) => {
- if (item) {
- contentArray.push(item)
- }
- })
- })
- })
- }
- })
+ const arr = jsonParseSafe(content)
+ // 不允许非结构化的content
+ if (!arr) {
+ quill.value.setText('')
+ return
+ }
// 创建一个新的 Delta 对象
const delta = new Delta()
- contentArray.map((item) => {
- if (item.startsWith('{') && item.endsWith('}')) {
- const imageId = item.slice(1, -1)
- const imageUrl = imageData.image[imageId]?.originUrl
- if (imageUrl) {
- delta.insert({ image: imageUrl }, { alt: item })
- } else {
- delta.insert(item)
- }
- } else if (item.startsWith('[') && item.endsWith(']')) {
- const emojiUrl = emojis[item]
- if (emojiUrl) {
- delta.insert({ image: emojiUrl }, { alt: item })
- } else {
- delta.insert(item)
- }
- } else if (item.startsWith('<') && item.endsWith('>')) {
- const content = item.slice(1, -1)
- const index = content.indexOf('-')
- if (index !== -1) {
- const account = content.slice(0, index)
- const nickName = content.slice(index + 1)
- if (nickName) {
- toSendAtList.value.push(account)
- delta.insert({ atMention: { account, nickName } })
+ for (const item of arr) {
+ if (!item.type || !item.value) {
+ delta.insert('')
+ }
+
+ switch (item.type) {
+ case msgContentType.TEXT:
+ delta.insert(item.value)
+ break
+ case msgContentType.EMOJI: {
+ const emojiUrl = emojis[item.value]
+ if (emojiUrl) {
+ delta.insert({ image: emojiUrl }, { alt: item.value })
} else {
- delta.insert(item)
+ delta.insert(item.value)
}
- } else {
- delta.insert(item)
+ break
}
- } else if (item.startsWith('「{') && item.endsWith('}」')) {
- const quoteContent = item.slice(1, -1)
- const { account, nickName, msgId, content, msgTime } = jsonParseSafe(quoteContent)
- let showContent = content || ''
- if (content) {
- const defaultContent = content
- .replace(/<(?:.*?)-(.*?)>/g, '@$1')
- .replace(/\{\d+\}/g, '[图片]')
- showContent = defaultContent
- const contentJson = jsonParseSafe(defaultContent)
- if (contentJson) {
- const type = contentJson['type']
- const objectId = contentJson['value']
- switch (type) {
- case msgContentType.RECORDING:
- showContent = '[语音]'
- break
- case msgContentType.AUDIO:
- showContent = `[音频] ${audioData.audio[objectId].fileName}`
- break
- case msgContentType.IMAGE:
- showContent = `[图片] ${imageData.image[objectId].fileName}`
- break
- case msgContentType.VIDEO:
- showContent = `[视频] ${videoData.video[objectId].fileName}`
- break
- case msgContentType.DOCUMENT:
- showContent = `[文档] ${documentData.document[objectId].fileName}`
- break
- default:
- break
+ case msgContentType.SCREENSHOT: {
+ const imageUrl = imageData.image[item.value]?.originUrl
+ if (imageUrl) {
+ delta.insert({ image: imageUrl }, { alt: `{${item.value}}` }) // 添加区别于emoji表情alt的符号，方便parse时识别
+ } else {
+ delta.insert(item.value)
+ }
+ break
+ }
+ case msgContentType.AT: {
+ const { account, nickName } = item.value
+ toSendAtList.value.push(account)
+ delta.insert({ atMention: { account, nickName } })
+ break
+ }
+ case msgContentType.QUOTE: {
+ // 先从本地消息缓存中获取
+ let msg = messageData.getMsg(props.sessionId, item.value.msgId)
+ if (!msg) {
+ // 如果本地消息缓存中没有，再去服务器查询
+ const res = await msgChatQueryMessagesService({
+ sessionId: props.sessionId,
+ msgIds: [item.value.msgId]
+ })
+
+ if (res.data.data && res.data.data.length > 0) {
+ msg = res.data.data[0]
}
}
+ delta.insert({
+ quoteBlock: {
+ account: msg.fromId,
+ nickName: item.value.nickName,
+ msgId: msg.msgId,
+ content: showSimplifyMsgContent(msg.content),
+ msgTime: msg.msgTime
+ }
+ })
+ break
}
- delta.insert({ quoteBlock: { account, nickName, msgId, content: showContent, msgTime } })
- } else {
- delta.insert(item)
+ default:
+ delta.insert('')
}
- })
+ }
quill.value.setText('') // 清空编辑器内容
quill.value.updateContents(delta) // 使用 Delta 对象更新编辑器内容
quill.value.setSelection(quill.value.getLength(), 0, Quill.sources.USER) // 设置光标位置
}
+/**
+ * 处理Enter发送
+ */
const handleEnter = async () => {
if (isShowAtList.value) {
return
@@ -726,12 +818,22 @@ const handleEnter = async () => {
? { contentFromLocal: [pasteObj.content], contentFromServer: [pasteObj.content] }
: await parseContent(callbacks)
- const content = contentObj.contentFromLocal.join('').trim()
- if (!content) {
+ let textLength = 0
+ let contentType = 0
+ contentObj.contentFromLocal.forEach((item) => {
+ if (item.type === msgContentType.TEXT) {
+ textLength = textLength + item.value.length
+ }
+ contentType = contentType | item.type
+ })
+
+ if (contentType === 0) {
ElMessage.warning('请勿发送空内容')
quill.value.setText('')
return
- } else if (content.length > 3000) {
+ }
+
+ if (textLength > 3000) {
ElMessage.warning('发送内容请不要超过3000个字')
return
}
@@ -739,8 +841,8 @@ const handleEnter = async () => {
// 发送的时候设置本地缓存（非服务端数据），用于立即渲染
let msg = {}
emit('saveLocalMsg', {
- contentType: msgContentType.MIX,
- content: content,
+ contentType: contentType,
+ content: JSON.stringify(contentObj.contentFromLocal.filter((item) => item)),
fn: (result) => {
msg = result
}
@@ -752,7 +854,8 @@ const handleEnter = async () => {
uploadProgress: 0
})
} else {
- emit('sendMessage', { msg, at: toSendAtList.value })
+ const content = JSON.stringify(contentObj.contentFromServer.filter((item) => item))
+ emit('sendMessage', { msg, content, at: toSendAtList.value }) // content 要更新后发给服务端，和saveLocalMsg的本地消息由些许差异
}
// callback：每成功上传一个图片，更新一下进度
@@ -771,14 +874,14 @@ const handleEnter = async () => {
}
// callback：所有图片均上传，则发送消息
- const atTargets = toSendAtList.value
+ const atTargets = toSendAtList.value // 异步函数里避免调用响应式数据
callbacks.allUploadedSuccessFn = () => {
messageData.updateMsg(msg.sessionId, msg.msgId, {
uploadStatus: msgFileUploadStatus.UPLOAD_SUCCESS,
uploadProgress: 100
})
- msg.content = contentObj.contentFromServer.join('').trim()
- emit('sendMessage', { msg, atTargets })
+ const content = JSON.stringify(contentObj.contentFromServer.filter((item) => item))
+ emit('sendMessage', { msg, content, at: atTargets })
}
clearPasteObj()
@@ -849,13 +952,13 @@ const onSelectedAtTarget = ({ account, nickName }) => {
}
}
-const reeditFromRevoke = (content) => {
+const reeditFromRevoke = async (content) => {
quill.value.setText('') // 清空编辑器内容
quill.value.setSelection(0, 0, Quill.sources.SILENT) // 设置光标位置
- renderContent(content)
+ await renderContent(content)
}
-const insertQuote = ({ account, nickName, msgId, content, msgTime }) => {
+const insertQuote = ({ account, nickName, msgKey, msgId, content, msgTime }) => {
// 1. 保存原始选择范围
quill.value.focus() // 先使 Quill 编辑器获取焦点，否则无法获取Selection
const originalRange = quill.value.getSelection()
@@ -874,7 +977,7 @@ const insertQuote = ({ account, nickName, msgId, content, msgTime }) => {
quill.value.insertEmbed(
0,
'quoteBlock',
- { account, nickName, msgId, content, msgTime },
+ { account, nickName, msgKey, msgId, content, msgTime },
Quill.sources.USER
)
quill.value.insertText(1, '\n', Quill.sources.SILENT)
@@ -993,6 +1096,7 @@ img {
padding-right: 40px;
display: flex;
color: gray;
+ gap: 5px;
}
.quote-content {
diff --git a/src/views/message/components/InputRecorder.vue b/src/views/message/components/InputRecorder.vue
index c194cd2..5806836 100644
--- a/src/views/message/components/InputRecorder.vue
+++ b/src/views/message/components/InputRecorder.vue
@@ -161,8 +161,8 @@ const uploadRecord = async () => {
})
let msg = {}
emit('saveLocalMsg', {
+ content: JSON.stringify([{ type: msgContentType.RECORDING, value: tempObjectId }]),
contentType: msgContentType.RECORDING,
- objectId: tempObjectId,
fn: (result) => {
msg = result
}
@@ -194,11 +194,13 @@ const uploadRecord = async () => {
uploadStatus: msgFileUploadStatus.UPLOAD_SUCCESS,
uploadProgress: 100
})
- msg.content = JSON.stringify({
- type: msgContentType.RECORDING,
- value: res.data.data.objectId
- })
- emit('sendMessage', { msg })
+ const content = JSON.stringify([
+ {
+ type: msgContentType.RECORDING,
+ value: res.data.data.objectId
+ }
+ ])
+ emit('sendMessage', { msg, content })
}
})
.catch((error) => {
diff --git a/src/views/message/components/InputToolBar.vue b/src/views/message/components/InputToolBar.vue
index 4392ca0..5adf606 100644
--- a/src/views/message/components/InputToolBar.vue
+++ b/src/views/message/components/InputToolBar.vue
@@ -92,8 +92,8 @@ const onConfirmSendFile = () => {
// 写本地消息
let msg = {}
emit('saveLocalMsg', {
+ content: JSON.stringify([{ type: contentType, value: selectedFile.uid }]),
contentType: contentType,
- objectId: selectedFile.uid,
fn: (result) => {
msg = result
}
@@ -134,8 +134,8 @@ const onConfirmSendFile = () => {
uploadStatus: msgFileUploadStatus.UPLOAD_SUCCESS,
uploadProgress: 100
})
- msg.content = JSON.stringify({ type: contentType, value: res.data.data.objectId })
- emit('sendMessage', { msg }) // 上传完成后发网络消息
+ const content = JSON.stringify([{ type: contentType, value: res.data.data.objectId }])
+ emit('sendMessage', { msg, content }) // 上传完成后发网络消息
}
})
.catch((error) => {
diff --git a/src/views/message/components/MenuAddOpr.vue b/src/views/message/components/MenuAddOpr.vue
index 7dbc65c..2a499db 100644
--- a/src/views/message/components/MenuAddOpr.vue
+++ b/src/views/message/components/MenuAddOpr.vue
@@ -112,6 +112,7 @@ defineExpose({
background-color: #fff;
position: absolute;
box-shadow: 2px 2px 20px gray;
+ z-index: 1000;
.menu-item {
padding: 5px;
diff --git a/src/views/message/components/MenuMsgItem.vue b/src/views/message/components/MenuMsgItem.vue
index 0420bdf..4497fe0 100644
--- a/src/views/message/components/MenuMsgItem.vue
+++ b/src/views/message/components/MenuMsgItem.vue
@@ -7,7 +7,6 @@ import CopyIcon from '@/assets/svg/copy.svg'
import MultiselectIcon from '@/assets/svg/multiselect.svg'
import RevokeIcon from '@/assets/svg/revoke.svg'
import { useUserStore, useMenuStore } from '@/stores'
-import { jsonParseSafe } from '@/js/utils/common'
import { MSG_REVOKE_TIME_LIMIT, msgContentType, msgSendStatus } from '@/const/msgConst'
const props = defineProps(['msg'])
@@ -26,17 +25,7 @@ const myAccount = computed(() => {
})
const contentType = computed(() => {
- const contentJson = jsonParseSafe(props.msg.content)
- if (!contentJson) {
- return msgContentType.MIX
- }
-
- const type = contentJson['type']
- if (!type) {
- return msgContentType.MIX
- } else {
- return type
- }
+ return props.msg.contentType
})
const msgStatus = computed(() => {
@@ -53,7 +42,10 @@ const menu = computed(() => {
}
]
- if (contentType.value !== msgContentType.RECORDING) {
+ if (
+ contentType.value !== msgContentType.RECORDING &&
+ contentType.value !== msgContentType.FORWARD_TOGETHER
+ ) {
o.push({
label: 'copy',
desc: '复制',
@@ -199,6 +191,7 @@ const handleClick = (item) => {
background-color: #fff;
position: absolute;
box-shadow: 2px 2px 20px gray;
+ z-index: 1000;
.menu-item {
padding: 5px;
diff --git a/src/views/message/components/MenuMsgMain.vue b/src/views/message/components/MenuMsgMain.vue
index 41be8ef..955b153 100644
--- a/src/views/message/components/MenuMsgMain.vue
+++ b/src/views/message/components/MenuMsgMain.vue
@@ -111,6 +111,7 @@ const handleClick = (item) => {
background-color: #fff;
position: absolute;
box-shadow: 2px 2px 20px gray;
+ z-index: 1000;
.menu-item {
padding: 5px;
diff --git a/src/views/message/components/MenuSession.vue b/src/views/message/components/MenuSession.vue
index c58f165..70c0c18 100644
--- a/src/views/message/components/MenuSession.vue
+++ b/src/views/message/components/MenuSession.vue
@@ -147,6 +147,7 @@ const handleClick = (item) => {
background-color: #fff;
position: fixed;
box-shadow: 2px 2px 20px gray;
+ z-index: 1000;
.menu-item {
padding: 5px;
diff --git a/src/views/message/components/MessageItem.vue b/src/views/message/components/MessageItem.vue
index 2945dc9..711f2fe 100644
--- a/src/views/message/components/MessageItem.vue
+++ b/src/views/message/components/MessageItem.vue
@@ -29,6 +29,7 @@ import {
msgChatRevokeMsgService
} from '@/api/message'
import DialogForMsgList from '@/views/message/components/DialogForMsgList.vue'
+import { showSimplifyMsgContent } from '@/js/utils/message'
const props = defineProps([
'sessionId',
@@ -65,18 +66,76 @@ const audioData = useAudioStore()
const videoData = useVideoStore()
const documentData = useDocumentStore()
+const forwardMsgs = ref([])
+const quoteMsg = ref({})
+
onMounted(async () => {
- await rendering()
+ await loadRelatedMsg()
+ rendering()
})
+/**
+ * 加载和本消息相关的消息：引用消息，合并转发消息
+ */
+const loadRelatedMsg = async () => {
+ const arr = jsonParseSafe(msg.value.content)
+ if (!arr) {
+ return
+ }
+
+ for (const item of arr) {
+ if (item.type === msgContentType.QUOTE) {
+ // 先从本地消息缓存中获取
+ const msg = messageData.getMsg(props.sessionId, item.value.msgId)
+ if (!msg.msgId) {
+ // 如果本地消息缓存中没有，再去服务器查询
+ const res = await msgChatQueryMessagesService({
+ sessionId: props.sessionId,
+ msgIds: item.value.msgId
+ })
+
+ if (res.data.data && res.data.data.length > 0) {
+ quoteMsg.value = res.data.data[0]
+ }
+ } else {
+ quoteMsg.value = msg
+ }
+ } else if (item.type === msgContentType.FORWARD_TOGETHER) {
+ const forwatdMsgIds = item.value.data.map((item) => item.msgId)
+
+ const toQueryMsgIds = []
+ for (const msgId of forwatdMsgIds) {
+ // 先从本地消息缓存中获取
+ const msg = messageData.getMsg(props.sessionId, msgId)
+ if (!msg.msgId) {
+ // 如果本地消息缓存中没有，再去服务器查询
+ toQueryMsgIds.push(msgId)
+ } else {
+ forwardMsgs.value.push(msg)
+ }
+ }
+
+ if (toQueryMsgIds.length > 0) {
+ const res = await msgChatQueryMessagesService({
+ sessionId: item.value.sessionId,
+ msgIds: toQueryMsgIds.join(',')
+ })
+ res.data.data.forEach((item) => {
+ forwardMsgs.value.push(item)
+ })
+ }
+ }
+ }
+}
+
let app = null
-const rendering = async () => {
+const rendering = () => {
const msgContent = document.querySelector(`#div-content-${msg.value.msgId}`)
if (msgContent) {
if (app) {
app.unmount()
}
- const vnode = await renderComponent(msg.value.content)
+ const vnode = renderComponent(msg.value.content)
app = createApp({
render: () => vnode
})
@@ -88,117 +147,55 @@ const rendering = async () => {
* 动态渲染消息内容
* @param content 消息内容
*/
-const renderComponent = async (content) => {
- const contentJson = jsonParseSafe(content)
- if (!contentJson) {
- return renderMix(content)
+const renderComponent = (content) => {
+ const arr = jsonParseSafe(content)
+
+ // 不允许非结构化的content
+ if (!arr) {
+ return h('span', '')
}
- const type = contentJson['type']
- const value = contentJson['value']
- if (!type || !value) {
- return renderMix(content)
- }
+ return arr.map((item) => {
+ if (!item.type || !item.value) {
+ return h('span', '')
+ }
- switch (type) {
- case msgContentType.MIX:
- return renderMix(value)
- case msgContentType.TEXT:
- return renderText(value)
- case msgContentType.RECORDING:
- return renderRecording(value)
- case msgContentType.AUDIO:
- return renderAudio(value)
- case msgContentType.IMAGE:
- return renderImage(value)
- case msgContentType.EMOJI:
- return renderEmoji(value)
- case msgContentType.VIDEO:
- return renderVideo(value)
- case msgContentType.DOCUMENT:
- return renderDocument(value)
- case msgContentType.FORWARD_TOGETHER:
- return await renderForwardTogether(value)
- default:
- return h('span', content)
- }
-}
+ switch (item.type) {
+ case msgContentType.TEXT:
+ return renderText(item.value)
+ case msgContentType.EMOJI:
+ return renderEmoji(item.value)
+ case msgContentType.SCREENSHOT:
+ return renderImage(item.value, true)
+ case msgContentType.AT:
+ return renderAt(item.value)
+ case msgContentType.QUOTE:
+ return renderQuote(item.value)
-const renderText = (content) => {
- return h('span', content)
-}
-
-const renderMix = (content) => {
- if (!content) return h('div', [])
- let contentArray = []
-
- // 1. 先匹配quote引用内容
- content.split(/(「\{.*?\}」)/).forEach((item) => {
- if (item.startsWith('「{') && item.endsWith('}」')) {
- // quote引用内容直接添加如数组
- contentArray.push(item)
- } else {
- //2. 匹配内容中的图片
- item.split(/(\{\d+\})/).forEach((item) => {
- //3. 匹配内容中的表情
- item.split(/(\[.*?\])/).forEach((item) => {
- item.split(/(<.*?>)/).forEach((item) => {
- if (item) {
- contentArray.push(item)
- }
- })
- })
- })
+ case msgContentType.IMAGE:
+ return renderImage(item.value)
+ case msgContentType.RECORDING:
+ return renderRecording(item.value)
+ case msgContentType.AUDIO:
+ return renderAudio(item.value)
+ case msgContentType.VIDEO:
+ return renderVideo(item.value)
+ case msgContentType.DOCUMENT:
+ return renderDocument(item.value)
+ case msgContentType.FORWARD_TOGETHER:
+ return renderForwardTogether(item.value)
+ default:
+ return h('span', content)
}
})
+}
- return contentArray.map((item) => {
- if (item.startsWith('{') && item.endsWith('}')) {
- return renderImage(item.slice(1, -1), true)
- } else if (item.startsWith('[') && item.endsWith(']')) {
- return renderEmoji(item.slice(1, -1))
- } else if (item.startsWith('<') && item.endsWith('>')) {
- return renderAt(item.slice(1, -1))
- } else if (item.startsWith('「{') && item.endsWith('}」')) {
- return renderQuote(item.slice(1, -1))
- } else {
- return h('span', item.trim())
- }
- })
+const renderText = (text) => {
+ return h('span', text)
}
const renderQuote = (quoteContent) => {
- const { msgId, nickName, content, msgTime } = jsonParseSafe(quoteContent)
- let showContent = content || ''
- if (content) {
- const defaultContent = content.replace(/<(?:.*?)-(.*?)>/g, '@$1').replace(/\{\d+\}/g, '[图片]')
- showContent = defaultContent
- const contentJson = jsonParseSafe(defaultContent)
- if (contentJson) {
- const type = contentJson['type']
- const objectId = contentJson['value']
- switch (type) {
- case msgContentType.RECORDING:
- showContent = '[语音]'
- break
- case msgContentType.AUDIO:
- showContent = `[音频] ${audioData.audio[objectId].fileName}`
- break
- case msgContentType.IMAGE:
- showContent = `[图片] ${imageData.image[objectId].fileName}`
- break
- case msgContentType.VIDEO:
- showContent = `[视频] ${videoData.video[objectId].fileName}`
- break
- case msgContentType.DOCUMENT:
- showContent = `[文档] ${documentData.document[objectId].fileName}`
- break
- default:
- break
- }
- }
- }
-
+ const { nickName, msgId } = quoteContent
return h(
// 和InputEditor.vue中的结构保持一致，使用相同class可以复用样式
'div',
@@ -217,84 +214,25 @@ const renderQuote = (quoteContent) => {
[
h('div', { class: 'quote-sender' }, [
h('span', { class: 'quote-nickName' }, nickName + ' '),
- h('span', { class: 'quote-msgTime' }, msgTime + '：')
+ h('span', { class: 'quote-msgTime' }, showTimeFormat(quoteMsg.value.msgTime) + '：')
]),
- h('span', { class: 'quote-content' }, showContent)
+ h('span', { class: 'quote-content' }, showSimplifyMsgContent(quoteMsg.value.content))
]
)
)
}
-const showMsgContentInForwardTogether = (content) => {
- const jsonContent = jsonParseSafe(content)
- let template
- if (jsonContent && jsonContent['type'] && jsonContent['value']) {
- if (jsonContent['type'] == msgContentType.IMAGE) {
- template = '[图片]'
- } else if (jsonContent['type'] == msgContentType.AUDIO) {
- template = '[音频]'
- } else if (jsonContent['type'] == msgContentType.RECORDING) {
- template = '[语音]'
- } else if (jsonContent['type'] == msgContentType.VIDEO) {
- template = '[视频]'
- } else if (jsonContent['type'] == msgContentType.DOCUMENT) {
- template = '[文件]'
- } else if (jsonContent['type'] == msgContentType.FORWARD_TOGETHER) {
- template = '[聊天记录]'
- } else {
- template = jsonContent['value']
- }
- return template
- } else {
- return content
- .replace(/\{\d+\}/g, '[图片]')
- .replace(/(「\{.*?\}」)/, '[引用]')
- .split(/(<.*?>)/)
- .map((item) => {
- const sliceStr = item.slice(1, -1)
- const index = sliceStr.indexOf('-')
- if (index !== -1) {
- const nickName = sliceStr.slice(index + 1)
- if (nickName) {
- return `@${nickName}`
- } else {
- return item
- }
- }
- return item
- })
- .join('')
- }
-}
-
-const renderForwardTogether = async (content) => {
- let res
- try {
- const msgIds = content.data
- .map((item) => {
- return item.msgId
- })
- .join(',')
- res = await msgChatQueryMessagesService({
- sessionId: content.sessionId,
- msgIds
- })
- } catch (error) {
- console.error(error)
- return h('span', content)
- }
-
- const msgs = res.data.data
- if (!res.data.data || res.data.data.length == 0) {
- return h('span', content)
+const renderForwardTogether = (forwardContent) => {
+ if (!forwardMsgs.value || forwardMsgs.value.length == 0) {
+ return h('span', '')
}
// 把content.data(取里面的nickName) 和 msgs合一
const newMsgs = {}
- msgs.forEach((item) => {
+ forwardMsgs.value.forEach((item) => {
newMsgs[item.msgId] = item
})
- content.data.forEach((item) => {
+ forwardContent.data.forEach((item) => {
if (item.msgId in newMsgs) {
newMsgs[item.msgId] = {
...newMsgs[item.msgId],
@@ -303,15 +241,16 @@ const renderForwardTogether = async (content) => {
}
})
- const title =
- (msgs[0].msgType === MsgType.GROUP_CHAT ? '群聊' : nickNameFromMsg.value) + '的聊天记录'
-
const msgsSorted = Object.values(newMsgs).sort((a, b) => {
const timeA = new Date(a.sendTime || a.msgTime).getTime()
const timeB = new Date(b.sendTime || b.msgTime).getTime()
return timeA - timeB
})
+ const title =
+ (forwardMsgs.value[0].msgType === MsgType.GROUP_CHAT ? '群聊' : nickNameFromMsg.value) +
+ '的聊天记录'
+
return h(
'div',
{
@@ -351,7 +290,7 @@ const renderForwardTogether = async (content) => {
return h('div', { class: 'msg-item', key: index }, [
h('span', { class: 'msg-item-nickname' }, msg.nickName || msg.fromId),
h('span', '：'),
- h('span', { class: 'msg-item-content' }, showMsgContentInForwardTogether(msg.content))
+ h('span', { class: 'msg-item-content' }, showSimplifyMsgContent(msg.content))
])
})
)
@@ -361,45 +300,33 @@ const renderForwardTogether = async (content) => {
)
}
-const renderAt = (content) => {
- const index = content.indexOf('-')
- if (index !== -1) {
- const account = content.slice(0, index)
- const nickName = content.slice(index + 1)
- if (messageData.sessionList[props.sessionId].sessionType === MsgType.GROUP_CHAT && nickName) {
- const style = {
- color: '#337ECC',
- fontWeight: account === myAccount.value || account === '0' ? 'bold' : 'normal'
- }
- return h('span', { style }, `@${nickName} `)
- } else {
- return h('span', `<${content}>`)
- }
- } else {
- return h('span', `<${content}>`)
+const renderAt = (atContent) => {
+ const style = {
+ color: '#337ECC',
+ fontWeight:
+ atContent.account === myAccount.value || atContent.account === '0' ? 'bold' : 'normal'
}
+ return h('span', { style }, `@${atContent.nickName} `)
}
-const renderEmoji = (content) => {
- const emojiId = `[${content}]`
+const renderEmoji = (emojiId) => {
const url = emojis[emojiId]
if (url) {
return h('img', {
class: 'emoji',
src: url,
alt: emojiId,
- title: content,
+ title: emojiId.slice(1, -1),
onLoad: () => {
emit('loadFinished')
}
})
} else {
- return h('span', `[${content}]`)
+ return h('span', emojiId)
}
}
-const renderVideo = (content) => {
- const videoId = content
+const renderVideo = (videoId) => {
const url = videoData.video[videoId]?.downloadUrl
if (url) {
return h(MsgBoxVideo, {
@@ -415,19 +342,18 @@ const renderVideo = (content) => {
}
})
} else {
- return h('span', `[${content}]`)
+ return h('span', `[${videoId}]`)
}
}
-const renderImage = (content, isForMix = false) => {
- const imgId = content
+const renderImage = (imgId, isScreenShot = false) => {
if (imageData.image[imgId]) {
// 只要这里渲染，就收集该session下的所有image，用于preview-src-list
imageData.setImageInSession(props.sessionId, imageData.image[imgId])
return h(MsgBoxImage, {
sessionId: props.sessionId,
imgId,
- isForMix,
+ isScreenShot,
thumbWidth: imageData.image[imgId].thumbWidth,
thumbHeight: imageData.image[imgId].thumbHeight,
onLoad: () => {
@@ -435,12 +361,11 @@ const renderImage = (content, isForMix = false) => {
}
})
} else {
- return h('span', isForMix ? `{${content}}` : `[${content}]`)
+ return h('span', `[${imgId}]`)
}
}
-const renderRecording = (content) => {
- const audioId = content
+const renderRecording = (audioId) => {
const url = audioData.audio[audioId]?.downloadUrl
const duration = audioData.audio[audioId]?.duration
if (url) {
@@ -452,12 +377,11 @@ const renderRecording = (content) => {
}
})
} else {
- return h('span', `[${content}]`)
+ return h('span', '[语音]')
}
}
-const renderAudio = (content) => {
- const audioId = content
+const renderAudio = (audioId) => {
const url = audioData.audio[audioId]?.downloadUrl
if (url) {
return h(MsgBoxAudio, {
@@ -469,12 +393,11 @@ const renderAudio = (content) => {
}
})
} else {
- return h('span', `[${content}]`)
+ return h('span', `[${audioId}]`)
}
}
-const renderDocument = (content) => {
- const documentId = content
+const renderDocument = (documentId) => {
const url = documentData.document[documentId]?.downloadUrl
if (url) {
return h(MsgBoxDocument, {
@@ -487,25 +410,10 @@ const renderDocument = (content) => {
}
})
} else {
- return h('span', `[${content}]`)
+ return h('span', `[${documentId}]`)
}
}
-const contentType = computed(() => {
- const contentJson = jsonParseSafe(msg.value.content)
- if (!contentJson) {
- return msgContentType.MIX
- }
-
- const type = contentJson['type']
- const value = contentJson['value']
- if (!type || !value) {
- return msgContentType.MIX
- } else {
- return type
- }
-})
-
const msg = computed(() => {
return messageData.getMsg(props.sessionId, props.msgKey)
})
@@ -892,13 +800,11 @@ const isDelete = computed(() => {
return msg.value.delete
})
+/**
+ * 是否支持撤回重新编辑
+ */
const isReedit = computed(() => {
- const contentJson = jsonParseSafe(msg.value.content)
- if (!contentJson) {
- return true
- }
-
- const type = contentJson['type']
+ const type = msg.value.contentType
if (
type === msgContentType.IMAGE ||
type === msgContentType.RECORDING ||
@@ -964,10 +870,34 @@ const onSelectMenuMsgItem = async (label) => {
switch (label) {
case 'copy':
try {
- await navigator.clipboard.writeText(msg.value.content)
+ let text = ''
+ const arr = jsonParseSafe(msg.value.content)
+ if (arr && Array.isArray(arr)) {
+ for (const item of arr) {
+ if (item.type === msgContentType.TEXT) {
+ text += item.value
+ }
+ }
+ }
+
+ const clipboardItem = new ClipboardItem({
+ 'text/html': new Blob(
+ [`
`],
+ {
+ type: 'text/html'
+ }
+ ), // 在html自定义属性data-quill-custom中传递clipboardContent结构化数据
+ 'text/plain': new Blob([text], { type: 'text/plain' }) // 纯文本
+ })
+
+ try {
+ await navigator.clipboard.write([clipboardItem])
+ } catch (error) {
+ await navigator.clipboard.writeText(text) // 降级方案：仅写入纯文本
+ }
ElMessage.success('已复制到剪贴板')
} catch (error) {
- ElMessage.error('复制出错')
+ ElMessage.error('复制出错 ', error)
}
break
case 'revoke':
@@ -1023,6 +953,7 @@ const onSelectMenuMsgItem = async (label) => {
props.inputEditorRef?.insertQuote({
account: msg.value.fromId,
nickName: nickNameFromMsg.value,
+ msgKey: props.msgKey, // 引用本地缓存消息的时候用
msgId: msg.value.msgId, // 引用要用msg.value.msgId
content: msg.value.content,
msgTime: msg.value.msgTime
@@ -1058,9 +989,12 @@ watch(
}
)
+/**
+ * 哪些情况在多选模式下是禁选的
+ */
const multiSelectOptionDisabled = computed(() => {
return (
- contentType.value === msgContentType.RECORDING ||
+ msg.value.contentType === msgContentType.RECORDING ||
isSystemMsg.value ||
isRevoke.value ||
isDelete.value ||
@@ -1468,6 +1402,8 @@ const handleItemClick = () => {
border-top-left-radius: 0;
user-select: text;
white-space: pre-wrap;
+ word-break: break-word; /* 长单词或URL强制换行 */
+ overflow-wrap: break-word; /* 兼容性更好的换行 */
}
}
}
diff --git a/src/views/message/components/MsgBoxImage.vue b/src/views/message/components/MsgBoxImage.vue
index 95e0428..d202d81 100644
--- a/src/views/message/components/MsgBoxImage.vue
+++ b/src/views/message/components/MsgBoxImage.vue
@@ -5,17 +5,17 @@ import { formatFileSize } from '@/js/utils/common'
import { useImageStore } from '@/stores'
import ImageloadfailedIcon from '@/assets/svg/imageloadfailed.svg'
-const props = defineProps(['sessionId', 'imgId', 'isForMix', 'thumbWidth', 'thumbHeight'])
+const props = defineProps(['sessionId', 'imgId', 'isScreenShot', 'thumbWidth', 'thumbHeight'])
const emits = defineEmits(['load'])
const imageData = useImageStore()
const maxWidth = computed(() => {
- return props.isForMix ? Math.min(props.thumbWidth, 360) : 360
+ return props.isScreenShot ? Math.min(props.thumbWidth, 360) : 360
})
const maxHeight = computed(() => {
- return props.isForMix ? Math.min(props.thumbHeight, 270) : 270
+ return props.isScreenShot ? Math.min(props.thumbHeight, 270) : 270
})
const renderWidth = computed(() => {
@@ -65,11 +65,11 @@ const initialIndex = computed(() => {
})
const fileName = computed(() => {
- return props.isForMix ? '' : imageData.image[props.imgId]?.fileName
+ return props.isScreenShot ? '' : imageData.image[props.imgId]?.fileName
})
const size = computed(() => {
- return props.isForMix ? '' : imageData.image[props.imgId]?.size
+ return props.isScreenShot ? '' : imageData.image[props.imgId]?.size
})
const formatSize = computed(() => {
diff --git a/src/views/message/components/MsgBoxRecording.vue b/src/views/message/components/MsgBoxRecording.vue
index 705d800..8c1d8af 100644
--- a/src/views/message/components/MsgBoxRecording.vue
+++ b/src/views/message/components/MsgBoxRecording.vue
@@ -1,9 +1,10 @@