Merge branch 'xingyy' into dev

env/.env.test

@@ -8,4 +8,5 @@ VUE_APP_PREVIEW=false
  VITE_BASE_API=http://114.218.158.24:8503
  VITE_SOCKET_API=ws://114.218.158.24:8504
 VITE_EPR_BASEURL=http://114.218.158.24:9020
+VITE_PAGE_URL=http://172.16.100.93:9032
 VUE_APP_WEBSITE_NAME=""

src/components/editor/Editor.vue

@@ -363,22 +363,9 @@ async function onUploadFile(e: any) {
   console.log("文件类型"+file.type)
   if (file.type.indexOf('image/') === 0) {
     console.log("进入图片")
-    // 处理图片文件
+    // 处理图片文件 - 立即显示临时消息，然后上传
-    const quill = getQuill()
+    let fn = emitCall('image_event', file, () => {})
-    let index = getQuillSelectionIndex()
+    emit('editor-event', fn)
-
-    // 删除编辑器中多余的换行符
-    if (index == 1 && quill.getLength() == 1 && quill.getText(0, 1) == '\n') {
-      quill.deleteText(0, 1)
-      index = 0
-    }
-
-    // 上传图片并插入到编辑器中
-    let src = await onUploadImage(file)
-    if (src) {
-      quill.insertEmbed(index, 'image', src)
-      quill.setSelection(index + 1)
-    }
 
     return
   }
@@ -437,8 +424,7 @@ function onClipboardMatcher(node: any, Delta) {
 function onSendMessage() {
   var delta = getQuill().getContents()
   let data = deltaToMessage(delta)  // 转换Delta为消息格式
-
+  if (data.items.length === 0||!data.items[0].content.trim()) {
-  if (data.items.length === 0) {
     return  // 没有内容不发送
   }
 

src/components/talk/message/FileMessage.vue

@@ -49,7 +49,7 @@ const PPT_EXTENSIONS = ['PPT', 'PPTX', 'PPS', 'PPSX']
 
 // 获取文件类型信息
 const fileInfo = computed(() => {
-  const extension = getFileExtension(props.extra.name)
+  const extension = getFileExtension(props.extra.path)
   if (EXCEL_EXTENSIONS.includes(extension)) {
     return fileTypes.EXCEL
   }
@@ -63,8 +63,8 @@ const fileInfo = computed(() => {
 })
 
 // 获取文件扩展名
-function getFileExtension(filename) {
+function getFileExtension(filepath) {
-  const parts = filename.split('.')
+  const parts = filepath.split('.')
   return parts.length > 1 ? parts.pop().toUpperCase() : ''
 }
 
@@ -88,7 +88,7 @@ const strokeDashoffset = computed(() =>
 const handleClick = () => {
   if(!props.extra.is_uploading){
     window.open(
-    `${window.location.origin}/office?url=${props.extra.path}`,
+    `${import.meta.env.VITE_PAGE_URL}/office?url=${props.extra.path}`,
     '_blank',
     'width=1200,height=900,left=200,top=200,toolbar=no,menubar=no,scrollbars=yes,resizable=yes,location=no,status=no'
   );

src/components/talk/message/ImageMessage.vue

@@ -1,9 +1,9 @@
 <script lang="ts" setup>
-import { NImage } from 'naive-ui'
+import { NImage, NSpin } from 'naive-ui'
 import { getImageInfo } from '@/utils/functions'
 import { ITalkRecordExtraImage, ITalkRecord } from '@/types/chat'
 
-defineProps<{
+const props = defineProps<{
   extra: ITalkRecordExtraImage
   data: ITalkRecord
   maxWidth?: Boolean
@@ -35,7 +35,13 @@ const img = (src: string, width = 200) => {
     :class="{ left: data.float === 'left' }"
     :style="img(extra.url, 350)"
   >
-    <n-image class="h-149px" :src="extra.url" />
+    <div class="image-container">
+      <n-image class="h-149px" :src="extra.url" />
+      <!-- 上传中的loading蒙版 -->
+      <div v-if="props.extra.is_uploading" class="loading-overlay">
+        <n-spin size="large" />
+      </div>
+    </div>
   </section>
 </template>
 <style lang="less" scoped>
@@ -44,11 +50,32 @@ const img = (src: string, width = 200) => {
   padding: 5px;
   border-radius: 5px;
   background: var(--im-message-left-bg-color);
-  height:149px
+  height:149px;
+  
   &.left {
     background: var(--im-message-right-bg-color);
   }
 
+  .image-container {
+    position: relative;
+    width: 100%;
+    height: 100%;
+  }
+
+  .loading-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 5px;
+    z-index: 1;
+  }
+
   :deep(.n-image img) {
     width: 100%;
     height: 100%;

src/components/talk/message/TextMessage.vue

@@ -17,7 +17,7 @@ let textContent = props.extra?.content || ''
 textContent = textReplaceLink(textContent)
 
 if (props.data.talk_type == 2) {
-  textContent = textReplaceMention(textContent, '#462AA0')
+  textContent = textReplaceMention(textContent, float==='right'?'#fff':'#462AA0')
 }
 
 textContent = textReplaceEmoji(textContent)

src/hooks/useFriendsMenu.ts

@@ -21,7 +21,7 @@ export function useFriendsMenu() {
     dropdown.item = Object.assign({}, item)
 
     dropdown.options = []
-    dropdown.options.push({ label: '删除好友', key: 'delete' })
+    // dropdown.options.push({ label: '删除好友', key: 'delete' })
 
     dropdown.x = e.clientX
     dropdown.y = e.clientY

src/hooks/useSessionMenu.ts

@@ -71,11 +71,11 @@ export function useSessionMenu() {
     })
 
     if (item.talk_type == 1) {
-      options.push({
+      // options.push({
  
-        label: '删除好友',
+      //   label: '删除好友',
-        key: 'delete_contact'
+      //   key: 'delete_contact'
-      })
+      // })
     } else {
       options.push({
       
@@ -107,9 +107,7 @@ export function useSessionMenu() {
   }
 
   const onUserInfo = (item: ISession) => {
-    console.error('item',item)
+    user(item.erp_user_id)
-
-    user(item.id)
   }
 
   // 移除会话

src/types/chat.ts

@@ -27,6 +27,7 @@ export interface ISession {
   content?: string // 消息内容
   last_message?: ISessionLastMessage
   draft_text?: string // 草稿文本
+  erp_user_id:number
 }
 
 // 消息记录

src/utils/auth.js

@@ -18,7 +18,7 @@ export function isLoggedIn() {
  */
 export function getAccessToken() {
   // return storage.get(AccessToken) || ''
-  return JSON.parse(localStorage.getItem('token'))||'46d71a72d8d845ad7ed23eba9bdde260e635407190c2ce1bf7fd22088e41682ea07773ec65cae8946d2003f264d55961f96e0fc5da10eb96d3a348c1664e9644ce2108c311309f398ae8ea1b8200bfd490e5cb6e8c52c9e5d493cbabb163368f8351420451a631dbfa749829ee4cda49b77b5ed2d3dced5d0f2b7dd9ee76ba5465c84a17c23af040cd92b6b2a4ea48befbb5c729dcdad0a9c9668befe84074cc24f78899c1d947f8e7f94c7eda5325b8ed698df729e76febb98549ef3482ae942fb4f4a1c92d21836fa784728f0c5483aab2760a991b6b36e6b10c84f840a6433a6ecc31dee36e8f1c6158818bc89d22a02b52442e2e6a79ca35b2fa54a4bb215abd3b9cc8ad2ef018b380a88e93a2fc55fb3e36695ae76a0ea52c973374861c70339249f89f36d787b0dfa7fc99339470dbc626eb5ff42232137ef97447e79f'
+  return JSON.parse(localStorage.getItem('token'))||'46d71a72d8d845ad7ed23eba9bdde260e635407190c2ce1bf7fd22088e41682ea07773ec65cae8946d2003f264d55961f96e0fc5da10eb96d3a348c1664e9644ce2108c311309f398ae8ea1b8200bfd490e5cb6e8c52c9e5d493cbabb163368f8351420451a631dbfa749829ee4cda49b77b5ed2d3dced5d0f2b7dd9ee76ba5465c84a17c23af040cd92b6b2a4ea48befbb5c729dcdad0a9c9668befe84074cc24f78899c1d947f8e7f94c7eda5325b8ed698df729e76febb98549ef3482ae942fb4f4a1c92d21836fa784728f0c5483aab2760a991b6b36e6b10c84f840a6433a6ecc31dee36e8f1c6158818bc89d22726726265e9af0db370a54ea5ee002b43662d571b84c8468ac15330f79503a5cd5e72282d8bee92749b1a3c1b7fd87ae70b64b90e437e84c1b558c64a35e181b2ecf5db3007680c3607eac1edee7f59d'
 }
 
 /**

src/views/message/inner/panel/PanelContent.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import { watch, onMounted, ref, nextTick, onUnmounted } from 'vue'
+import { watch, onMounted, ref, nextTick } from 'vue'
-import { NDropdown, NCheckbox, NPopover, NInfiniteScroll } from 'naive-ui'
+import { NDropdown, NCheckbox } from 'naive-ui'
 import { Loading, MoreThree, ToTop } from '@icon-park/vue-next'
 import { bus } from '@/utils/event-bus'
 import { useDialogueStore } from '@/store'
@@ -14,42 +14,10 @@ import { ITalkRecord } from '@/types/chat'
 import { EditorConst } from '@/constant/event-bus'
 import { useInject, useTalkRecord, useUtil } from '@/hooks'
 import { ExclamationCircleFilled } from '@ant-design/icons-vue'
-import { useUserStore, useUploadsStore } from '@/store'
+import { useUserStore ,useUploadsStore} from '@/store'
 import RevokeMessage from '@/components/talk/message/RevokeMessage.vue'
-import { voiceToText, ServeMessageReadDetail } from '@/api/chat.js'
+import { voiceToText } from '@/api/chat.js'
-import { confirmBox } from '@/components/confirm-box/service.js'
+import {confirmBox} from '@/components/confirm-box/service.js'
-import ws from '@/connect'
-import avatarModule from '@/components/avatar-module/index.vue'
-
-// 定义消息已读状态接口
-interface ReadStatus {
-  msg_ids: string[]
-  talk_type: number
-  receiver_id: number
-  user_id?: number
-}
-
-// 定义状态接口
-interface State {
-  visibleElements: Set<HTMLElement>
-  visibleOutElements: Set<HTMLElement>
-  tempWaitDoRead: ReadStatus[]
-  tempWaitDoCheck: ReadStatus[]
-  setMessageReadInterval: number | null
-  setOutMessageReadInterval: number | null
-  lastUpdateTime: number
-  isScrolling: boolean
-  scrollTimer: number | null
-  lastTriggerTime: number
-  talkReadListDetail: any[]
-  readDetailIsUnread: number
-  currentMsgReadDetail: any | null
-  currentReadDetailPage: number
-  hasMoreReadListDetail: boolean
-  loadingReadListDetail: boolean
-  lastScrollTop: number
-}
-
 const props = defineProps({
   uid: {
     type: Number,
@@ -70,14 +38,10 @@ const props = defineProps({
   specifiedMsg: {
     type: String,
     default: ''
-  },
-  num: {
-    type: Number,
-    default: 0
   }
 })
 
-const { loadConfig, records, onLoad, onRefreshLoad, onJumpMessage, onLoadMoreDown } = useTalkRecord(props.uid)
+const { loadConfig, records, onLoad, onRefreshLoad, onJumpMessage } = useTalkRecord(props.uid)
 const uploadsStore = useUploadsStore()
 const { useMessage } = useUtil()
 const { dropdown, showDropdownMenu, closeDropdownMenu } = useMenu()
@@ -126,33 +90,11 @@ const onPanelScroll = (e: any) => {
   }
 
   const height = e.target.scrollTop + e.target.clientHeight
-  const scrollHeight = e.target.scrollHeight
-  const isScrollingDown = e.target.scrollTop > state.value.lastScrollTop
-  state.value.lastScrollTop = e.target.scrollTop
 
-  // 触底且必须是向下滚动
+  skipBottom.value = height < e.target.scrollHeight - 200
-  if (height === scrollHeight && isScrollingDown) {
-    onLoadMoreDown()
-  }
-
-  skipBottom.value = height < scrollHeight - 200
   if (!skipBottom.value && dialogueStore.unreadBubble) {
     dialogueStore.setUnreadBubble(0)
   }
-
-  // 设置滚动状态
-  state.value.isScrolling = true
-  if (state.value.scrollTimer) {
-    clearTimeout(state.value.scrollTimer)
-  }
-  state.value.scrollTimer = window.setTimeout(() => {
-    state.value.isScrolling = false
-    // 滚动停止，强制触发一次
-    checkVisibleOutElements()
-    // 重置节流时间戳，保证下一次变化能立刻触发
-    lastVisibleOutTriggerTime = Date.now()
-  }, 300) // 300ms 的防抖时间
-
   // 检测是否到达底部
   if (skipBottom.value == false) {
     let len = dialogueStore.records.length
@@ -289,6 +231,7 @@ const onClickNickname = (data: ITalkRecord) => {
 
 // 会话列表右键显示菜单
 const onContextMenu = (e: any, item: ITalkRecord) => {
+
   if (!dialogueStore.isShowEditor || dialogueStore.isOpenMultiSelect) {
     return e.preventDefault()
   }
@@ -351,10 +294,7 @@ watch(
       try {
         const parsed = JSON.parse(decodeURIComponent(newProps.specifiedMsg))
         // 只有会话id和参数都匹配才进入特殊模式
-        if (
+        if (parsed.talk_type === newProps.talk_type && parsed.receiver_id === newProps.receiver_id) {
-          parsed.talk_type === newProps.talk_type &&
-          parsed.receiver_id === newProps.receiver_id
-        ) {
           specialParams = parsed
         }
       } catch (e) {}
@@ -372,350 +312,29 @@ watch(
 )
 
 // onMounted(() => {
-// onLoad({ ...props, limit: 30 })
+  // onLoad({ ...props, limit: 30 })
 // })
-const retry = (item: any) => {
+const retry=(item:any)=>{
   confirmBox({
-    content: '确定重发吗'
+    content:'确定重发吗'
-  }).then(() => {
+  }).then(()=>{
-    uploadsStore.retryCommonUpload(item.extra.upload_id)
+   uploadsStore.retryCommonUpload(item.extra.upload_id)
   })
 }
 
-const onContextMenuAvatar = (e: any, item: any) => {
+const onContextMenuAvatar=(e:any,item:any)=>{
-  e.preventDefault()
+  if(item.talk_type!==1){
-  if (item.float !== 'right') {
+    e.preventDefault()
-    bus.emit(EditorConst.Mention, {
+  if(item.float!=='right'){
-      id: item.user_id,
+  bus.emit(EditorConst.Mention, {
-      value: item.nickname
+    id: item.user_id,
-    })
+    value: item.nickname
-  }
-}
-
-const state = ref<State>({
-  visibleElements: new Set(),
-  visibleOutElements: new Set(),
-  tempWaitDoRead: [],
-  tempWaitDoCheck: [],
-  setMessageReadInterval: null,
-  setOutMessageReadInterval: null,
-  lastUpdateTime: 0,
-  isScrolling: false,
-  scrollTimer: null,
-  lastTriggerTime: 0,
-  talkReadListDetail: [],
-  readDetailIsUnread: 1,
-  currentMsgReadDetail: null,
-  currentReadDetailPage: 1,
-  hasMoreReadListDetail: true,
-  loadingReadListDetail: false,
-  lastScrollTop: 0
-})
-
-// 定义观察者变量
-let observer: IntersectionObserver | null = null
-
-// 检查需要发送已读回执的元素
-const checkVisibleElements = () => {
-  if (state.value.visibleElements.size > 0) {
-    let waitDoRead: ReadStatus[] = []
-    state.value.visibleElements.forEach((el: HTMLElement) => {
-      const msgId = el.dataset.msgid
-      const talkType = Number(el.dataset.talktype)
-      const receiverId = Number(el.dataset.receiverid)
-
-      if (!msgId) return
-
-      if (waitDoRead.length === 0) {
-        waitDoRead.push({
-          msg_ids: [msgId],
-          talk_type: talkType,
-          receiver_id: receiverId
-        })
-      } else {
-        const existingItem = waitDoRead.find(
-          (item) => item.talk_type === talkType && item.receiver_id === receiverId
-        )
-        if (existingItem) {
-          existingItem.msg_ids.push(msgId)
-        } else {
-          waitDoRead.push({
-            msg_ids: [msgId],
-            talk_type: talkType,
-            receiver_id: receiverId
-          })
-        }
-      }
-    })
-    if (waitDoRead.length > 0) {
-      waitDoRead.forEach((doReadItem) => {
-        const prevItem = state.value.tempWaitDoRead.find(
-          (prev) =>
-            prev.talk_type === doReadItem.talk_type && prev.receiver_id === doReadItem.receiver_id
-        )
-        if (!prevItem || !doReadItem.msg_ids.every((id) => prevItem.msg_ids.includes(id))) {
-          console.error('====发送了新版已读回执=====', doReadItem)
-          ws.emit('im.message.new.read', doReadItem)
-        }
-      })
-    }
-    state.value.tempWaitDoRead = JSON.parse(JSON.stringify(waitDoRead))
-  }
-}
-
-// 检查需要获取别人发送的已读回执列表的元素
-const checkVisibleOutElements = () => {
-  if (state.value.visibleOutElements.size > 0) {
-    let waitDoCheck: ReadStatus[] = []
-    state.value.visibleOutElements.forEach((el: HTMLElement) => {
-      const msgId = el.dataset.msgid
-      const talkType = Number(el.dataset.talktype)
-      const receiverId = Number(el.dataset.receiverid)
-
-      if (!msgId) return
-
-      if (waitDoCheck.length === 0) {
-        waitDoCheck.push({
-          msg_ids: [msgId],
-          talk_type: talkType,
-          receiver_id: receiverId,
-          user_id: props.uid
-        })
-      } else {
-        const existingItem = waitDoCheck.find(
-          (item) => item.talk_type === talkType && item.receiver_id === receiverId
-        )
-        if (existingItem) {
-          existingItem.msg_ids.push(msgId)
-        } else {
-          waitDoCheck.push({
-            msg_ids: [msgId],
-            talk_type: talkType,
-            receiver_id: receiverId,
-            user_id: props.uid
-          })
-        }
-      }
-    })
-    if (waitDoCheck.length > 0) {
-      waitDoCheck.forEach((doCheckItem) => {
-        console.error('====组装了新版已读回执参数，需要发送socket=====', doCheckItem)
-        ws.emit('im.message.listen.read', doCheckItem)
-      })
-    }
-    state.value.tempWaitDoCheck = JSON.parse(JSON.stringify(waitDoCheck))
-  }
-}
-
-// 定义节流时间戳
-let lastVisibleOutTriggerTime = 0
-
-//新版采用socket监听已读回执，不轮询接口
-watch(
-  () => state.value.visibleOutElements,
-  (newVal) => {
-    const now = Date.now()
-    if (now - lastVisibleOutTriggerTime < 1000) {
-      return
-    }
-    lastVisibleOutTriggerTime = now
-    checkVisibleOutElements()
-  },
-  {
-    deep: true,
-    immediate: true
-  }
-)
-
-// 观察者函数
-const handleIntersection = (entries) => {
-  entries.forEach((entry) => {
-    if (entry.isIntersecting && entry.intersectionRatio >= 0.5) {
-      let elData = entry.target.dataset
-      const msgType = elData.msgtype
-      const userId = elData.userid
-      if (Number(msgType) < 1000 && Number(userId) !== Number(props.uid)) {
-        //我读别人发的消息，需要发送已读回执
-        state.value.visibleElements.add(entry.target)
-      }
-      if (Number(msgType) < 1000 && Number(userId) === Number(props.uid)) {
-        //我发的消息，需要获取别人发送的已读回执列表
-        state.value.visibleOutElements.add(entry.target)
-      }
-    } else {
-      // 元素离开视口，从集合中移除
-      state.value.visibleElements.delete(entry.target)
-      state.value.visibleOutElements.delete(entry.target)
-    }
   })
 }
-
-// 监听消息列表变化
-watch(
-  () => records.value,
-  () => {
-    nextTick(() => {
-      // 断开旧的观察者
-      if (observer) {
-        observer.disconnect()
-      }
-
-      // 重新初始化观察者
-      const options = {
-        root: null,
-        threshold: [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0],
-        rootMargin: '50px 0px'
-      }
-      observer = new IntersectionObserver(handleIntersection, options)
-
-      // 重新观察所有消息元素
-      const messageElements = document.querySelectorAll('.message-item')
-      messageElements.forEach((el) => {
-        if (observer) {
-          observer.observe(el)
-        }
-      })
-    })
-  },
-  { deep: true }
-)
-
-// 事件总线防抖处理
-let eventBusDebounceTimer: number | null = null
-
-onMounted(() => {
-  // 事件总线监听
-  bus.subscribe('check-visible-out-elements', (type) => {
-    if (eventBusDebounceTimer) {
-      clearTimeout(eventBusDebounceTimer)
-    }
-    eventBusDebounceTimer = window.setTimeout(() => {
-      checkVisibleOutElements()
-      eventBusDebounceTimer = null
-    }, 500)
-  })
-  //设置观察者前设置定时器
-  if (state.value.setMessageReadInterval) {
-    clearInterval(state.value.setMessageReadInterval)
-    state.value.setMessageReadInterval = null
-  }
-  state.value.setMessageReadInterval = setInterval(() => {
-    checkVisibleElements()
-  }, 2000)
-
-  if (state.value.setOutMessageReadInterval) {
-    clearInterval(state.value.setOutMessageReadInterval)
-    state.value.setOutMessageReadInterval = null
-  }
-  // 旧版采用定时器来轮询已读回执，新版采用socket监听已读回执
-  // state.value.setOutMessageReadInterval = setInterval(() => {
-  //   checkVisibleOutElements()
-  // }, 2000)
-
-  //初始化设置观察者
-  const options = {
-    root: null,
-    threshold: [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0],
-    rootMargin: '50px 0px'
-  }
-  observer = new IntersectionObserver(handleIntersection, options)
-
-  // 观察所有消息元素
-  nextTick(() => {
-    const messageElements = document.querySelectorAll('.message-item')
-    messageElements.forEach((el) => {
-      if (observer) {
-        observer.observe(el)
-      }
-    })
-  })
-})
-
-onUnmounted(() => {
-  if (observer) {
-    observer.disconnect()
-  }
-  if (state.value.setMessageReadInterval) {
-    clearInterval(state.value.setMessageReadInterval)
-    state.value.setMessageReadInterval = null
-    checkVisibleElements()
-  }
-  if (state.value.setOutMessageReadInterval) {
-    clearInterval(state.value.setOutMessageReadInterval)
-    state.value.setOutMessageReadInterval = null
-    checkVisibleOutElements()
-  }
-  // 清理事件总线防抖定时器
-  if (eventBusDebounceTimer) {
-    clearTimeout(eventBusDebounceTimer)
-    eventBusDebounceTimer = null
-  }
-  // 事件总线移除监听
-  bus.unsubscribe('check-visible-out-elements', checkVisibleOutElements)
-})
-
-//点击显示对应消息的已读回执详情
-const toShowMessageReadDetail = async (item?: ITalkRecord) => {
-  if (item) {
-    state.value.currentMsgReadDetail = item
-    onReadTabChange('unread-tab')
-    return
-  }
-  let params = {
-    page: state.value.currentReadDetailPage,
-    pageSize: 10,
-    type: 'detail', //list是列表，detail是详情
-    talkType: state?.value?.currentMsgReadDetail?.talk_type, //1私聊2群聊
-    receiverId: state?.value?.currentMsgReadDetail?.receiver_id, //私聊的时候是对方用户id，群聊的时候是对方群id
-    msgId: state?.value?.currentMsgReadDetail?.msg_id,
-    isUnread: state?.value?.readDetailIsUnread //不送或者送0代表看已读，送1看未读
-  }
-  console.log(params)
-  const resp = await ServeMessageReadDetail(params)
-  console.log(resp)
-  if (resp.code === 200) {
-    console.log(resp?.data?.data?.length)
-    if (resp?.data?.data?.length > 0) {
-      state.value.hasMoreReadListDetail = true
-      if (state.value.currentReadDetailPage === 1) {
-        state.value.talkReadListDetail = resp.data.data
-      } else {
-        state.value.talkReadListDetail = [...state.value.talkReadListDetail, ...resp.data.data]
-      }
-    } else {
-      if (state.value.currentReadDetailPage === 1) {
-        state.value.talkReadListDetail = []
-      }
-      state.value.hasMoreReadListDetail = false
-    }
   }
+ 
 }
 
-//已读回执tab切换
-const onReadTabChange = (value) => {
-  if (value === 'unread-tab') {
-    //未读
-    state.value.readDetailIsUnread = 1
-  } else if (value === 'read-tab') {
-    //已读
-    state.value.readDetailIsUnread = 0
-  }
-  state.value.currentReadDetailPage = 1
-  toShowMessageReadDetail()
-}
-
-//加载更多已读回执
-const loadMoreReadListDetail = () => {
-  console.log('loadMoreReadListDetail')
-  if (!state.value.hasMoreReadListDetail || state.value.loadingReadListDetail) {
-    return
-  }
-  state.value.loadingReadListDetail = true
-  state.value.currentReadDetailPage++
-  toShowMessageReadDetail().finally(() => {
-    state.value.loadingReadListDetail = false
-  })
-}
 </script>
 
 <template>
@@ -737,11 +356,6 @@ const loadMoreReadListDetail = () => {
         v-for="(item, index) in records"
         :key="item.msg_id"
         :id="item.msg_id"
-        :data-msgid="item.msg_id"
-        :data-msgtype="item.msg_type"
-        :data-userid="item.user_id"
-        :data-talktype="props?.talk_type"
-        :data-receiverid="props?.receiver_id"
       >
         <!-- 系统消息 -->
         <div v-if="item.msg_type >= 1000" class="message-box">
@@ -775,11 +389,7 @@ const loadMoreReadListDetail = () => {
         >
           <!-- 多选按钮 -->
           <aside v-if="dialogueStore.isOpenMultiSelect" class="checkbox-column shrink-0">
-            <n-checkbox
+            <n-checkbox size="small" :checked="item.isCheck" @update:checked="item.isCheck = !item.isCheck" />
-              size="small"
-              :checked="item.isCheck"
-              @update:checked="item.isCheck = !item.isCheck"
-            />
           </aside>
           <!-- 头像信息 -->
 
@@ -807,8 +417,10 @@ const loadMoreReadListDetail = () => {
               <span>{{ parseTime(item.created_at, '{y}/{m}/{d} {h}:{i}') }}</span>
             </div> -->
             <div class="talk-title">
-              <span class="mr-7px" v-show="talk_type == 2 && item.float == 'left'"
+              <span class="mr-7px"
-                >{{ item.nickname }}
+                v-show="talk_type == 2 && item.float == 'left'"
+                
+              >{{ item.nickname }}
               </span>
               <span>{{ parseTime(item.created_at, '{y}/{m}/{d} {h}:{i}') }}</span>
             </div>
@@ -867,72 +479,6 @@ const loadMoreReadListDetail = () => {
                 {{ item.extra?.reply?.content }}
               </span>
             </div>
-
-            <!-- 已读回执 -->
-            <div class="talk_read_num" v-if="item.user_id === props.uid">
-              <n-popover trigger="click" placement="bottom-end" style="height: 382px; padding: 0;">
-                <template #trigger>
-                  <span v-if="props.talk_type === 1">{{
-                    item.read_total_num > 0 ? '已读' : '未读'
-                  }}</span>
-                  <span v-if="props.talk_type === 2" @click="toShowMessageReadDetail(item)">
-                    已读 ({{ item?.read_total_num || 0 }}/{{
-                      props.num - 1 > 0 ? props.num - 1 : 0
-                    }})
-                  </span>
-                </template>
-                <div class="talk-read-list-detail">
-                  <n-tabs
-                    type="line"
-                    animated
-                    justify-content="space-around"
-                    @update:value="onReadTabChange"
-                  >
-                    <n-tab name="unread-tab">
-                      {{ `未读(${props.num - 1 - (item.read_total_num || 0) || 0})` }}
-                    </n-tab>
-                    <n-tab name="read-tab">
-                      {{ `已读(${item.read_total_num || 0})` }}
-                    </n-tab>
-                  </n-tabs>
-                  <div class="talk-read-list">
-                    <n-infinite-scroll style="height: 340px;" @load="loadMoreReadListDetail">
-                      <div
-                        class="talk-read-list-item"
-                        v-for="(talkReadDetailItem,
-                        talkReadDetailIndex) in state.talkReadListDetail"
-                        :key="talkReadDetailIndex"
-                      >
-                        <avatarModule
-                          :mode="1"
-                          :avatar="talkReadDetailItem.avatar"
-                          :userName="talkReadDetailItem.nickName"
-                          :groupType="0"
-                          :customStyle="{
-                            width: '36px',
-                            height: '36px'
-                          }"
-                          :customTextStyle="{
-                            fontSize: '12px',
-                            fontWeight: 'bold',
-                            color: '#fff',
-                            lineHeight: '17px'
-                          }"
-                        ></avatarModule>
-                        <div class="talk-read-list-item-info">
-                          <span style="font-size: 12px; font-weight: 600; line-height: 17px;">{{
-                            talkReadDetailItem.nickName
-                          }}</span>
-                          <span style="font-size: 12px; color: #999; line-height: 14px;">{{
-                            talkReadDetailItem.jobNum
-                          }}</span>
-                        </div>
-                      </div>
-                    </n-infinite-scroll>
-                  </div>
-                </div>
-              </n-popover>
-            </div>
           </main>
         </div>
 
@@ -1131,18 +677,6 @@ const loadMoreReadListDetail = () => {
         }
       }
 
-      .talk_read_num {
-        text-align: right;
-        color: #7a58de;
-        font-size: 12px;
-        font-weight: 400;
-        line-height: 17px;
-        margin: 5px 0 0;
-        span {
-          cursor: pointer;
-        }
-      }
-
       &:hover {
         .talk-title {
           opacity: 1;
@@ -1191,31 +725,4 @@ const loadMoreReadListDetail = () => {
     }
   }
 }
-
-.talk-read-list-detail {
-  width: 341px;
-  padding: 0 14px;
-
-  .talk-read-list {
-    .talk-read-list-item {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      justify-content: flex-start;
-      gap: 10px;
-      padding: 10px 0;
-      border-bottom: 1px solid #f1f1f1;
-
-      .talk-read-list-item-info {
-        display: flex;
-        flex-direction: column;
-        align-items: flex-start;
-        justify-content: center;
-
-        span {
-        }
-      }
-    }
-  }
-}
 </style>

src/views/message/inner/panel/PanelFooter.vue

@@ -94,8 +94,60 @@ const onSendTextEvent = throttle((value: any) => {
 }, 1000)
 
 // 发送图片消息
-const onSendImageEvent = ({ data, callBack }) => {
+const onSendImageEvent = ({ data }) => {
-  onSendMessage({ type: 'image', ...data }, callBack)
+  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])
+ 
+    }
+  )
 }
 
 // 发送视频消息

vite.config.ts

@@ -46,9 +46,9 @@ export default defineConfig(({ mode }) => {
       vueJsx({}), 
       compressPlugin(), 
       UnoCSS(),
-      // vueDevTools({
+      vueDevTools({
-      //   launchEditor: 'trae',
+        launchEditor: 'trae',
-      // })
+      })
     ],
     define: {
       __APP_ENV__: env.APP_ENV