From afc4d72db10f14ef7a9db480ad78be680e6797dd Mon Sep 17 00:00:00 2001
From: caiyx <msad123415@163.com>
Date: Fri, 6 Dec 2024 16:55:15 +0800
Subject: [PATCH] fix

---
 package.json                                 |   2 +-
 src/api/chat/index.js                        |  12 ++
 src/components/talk/message/ImageMessage.vue |  39 ++++-
 src/components/talk/message/MixedMessage.vue |   7 +
 src/components/talk/message/VideoMessage.vue |   2 +-
 src/event/talk.js                            |   8 +-
 src/hooks/useTalkRecord.js                   |  62 ++++---
 src/pages/dialog/components/filePanel.vue    | 160 +++++++++++++++++++
 src/pages/dialog/index.vue                   | 136 +++++++++++-----
 src/service/index.js                         |  13 +-
 src/service/request/index.js                 |   3 -
 src/static/image/chatList/folder.png         | Bin 0 -> 1033 bytes
 src/static/image/chatList/photoAlbum.png     | Bin 0 -> 1162 bytes
 src/static/image/chatList/photoGraph.png     | Bin 0 -> 1358 bytes
 src/store/auth/index.js                      |   2 +-
 src/store/index.js                           |   1 +
 src/store/modules/dialogueList.js            |  79 +++++++++
 src/utils/index.js                           |   5 +
 18 files changed, 453 insertions(+), 78 deletions(-)
 create mode 100644 src/pages/dialog/components/filePanel.vue
 create mode 100644 src/static/image/chatList/folder.png
 create mode 100644 src/static/image/chatList/photoAlbum.png
 create mode 100644 src/static/image/chatList/photoGraph.png
 create mode 100644 src/store/modules/dialogueList.js

diff --git a/package.json b/package.json
index ea57ce6..ccf5355 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,7 @@
   "packageManager": "pnpm@8.14.1",
   "license": "MIT",
   "scripts": {
-    "test:h5": "uni --mode test",
+    "test:h5": "uni --mode test --port 2468",
     "prod:h5": "uni --mode prod",
     "build:h5:test": "uni build --mode test",
     "build:h5:prod": "uni build --mode prod"
diff --git a/src/api/chat/index.js b/src/api/chat/index.js
index ed761d2..a76899a 100644
--- a/src/api/chat/index.js
+++ b/src/api/chat/index.js
@@ -1,4 +1,5 @@
 import request from '@/service/index.js'
+import qs from 'qs'
 
 // 获取聊天列表服务接口
 export const ServeGetTalkList = (data) => {
@@ -158,3 +159,14 @@ export const ServeConfirmVoteHandle = (data) => {
     data,
   })
 }
+
+export const uploadImg = (data,onProgressFn) => {
+  return request({
+    url: '/upload/img',
+    method: 'POST',
+    data:data,
+    baseURL:import.meta.env.VITE_EPR_BASEURL,
+    isFormData:true,
+    onUploadProgress:(progressEvent)=>onProgressFn(progressEvent,data.get('file'))
+  })
+}
diff --git a/src/components/talk/message/ImageMessage.vue b/src/components/talk/message/ImageMessage.vue
index 8b69ad2..839a9aa 100644
--- a/src/components/talk/message/ImageMessage.vue
+++ b/src/components/talk/message/ImageMessage.vue
@@ -1,20 +1,39 @@
 <script lang="ts" setup>
 import { getImageInfo } from '@/utils/functions'
 
-defineProps<{
+const props = defineProps<{
   extra: any
   data: any
   maxWidth?: Boolean
 }>()
 
 const img = (src: string, width = 200) => {
-  const info = getImageInfo(src)
+  // console.log(props.extra);
+  let info = {
+    width: 0,
+    height: 0
+  }
+  if (src.includes('blob:http://')) {
+    info = {
+      width: props.extra.width,
+      height: props.extra.height
+    }
+  }else {
+    info = getImageInfo(src)
+  }
+
   if (info.width == 0 || info.height == 0) {
     return {
       width: 450,
       height: 298
     }
   }
+  if(info.width<300){
+    return {
+      width: 300,
+      height: info.height / (info.width / 300)
+    }
+  }
 
   if (info.width < width) {
     return {
@@ -34,7 +53,10 @@ const img = (src: string, width = 200) => {
     class="im-message-image"
     :class="{ left: data.float === 'left' }"
   >
-    <tm-image preview :width="img(extra.url,450).width" :height="img(extra.url,450).height" :src="extra.url" />
+  <div class="image-container">
+    <tm-image preview :width="img(extra.url,350).width" :height="img(extra.url,350).height" :src="extra.url" />
+    <wd-circle custom-class="circleProgress" v-if="props.data.uploadCurrent && props.data.uploadCurrent<100"  v-model="props.data.uploadCurrent" color="#ffffff" layer-color="#E3E3E3"></wd-circle>
+  </div>
   </section>
 </template>
 <style lang="less" scoped>
@@ -51,4 +73,15 @@ const img = (src: string, width = 200) => {
     border-radius: 0 16rpx 16rpx 16rpx;
   }
 }
+.image-container {
+    position: relative;
+
+  .circleProgress {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 1;
+  }
+}
 </style>
diff --git a/src/components/talk/message/MixedMessage.vue b/src/components/talk/message/MixedMessage.vue
index 56115d8..dfd6858 100644
--- a/src/components/talk/message/MixedMessage.vue
+++ b/src/components/talk/message/MixedMessage.vue
@@ -22,6 +22,13 @@ const img = (src: string, width = 200) => {
     }
   }
 
+  if(info.width<300){
+    return {
+      width: 300,
+      height: info.height / (info.width / 300)
+    }
+  }
+
   if (info.width < width) {
     return {
       width: info.width,
diff --git a/src/components/talk/message/VideoMessage.vue b/src/components/talk/message/VideoMessage.vue
index c5783f3..a1f23e3 100644
--- a/src/components/talk/message/VideoMessage.vue
+++ b/src/components/talk/message/VideoMessage.vue
@@ -18,7 +18,7 @@ const videoContext = ref()
 const open = ref(false)
 
 const img = (src: string, width = 200) => {
-  console.log(props);
+  // console.log(props);
 
   const info: any = getImageInfo(src)
 
diff --git a/src/event/talk.js b/src/event/talk.js
index 694ff3c..4ea80bb 100644
--- a/src/event/talk.js
+++ b/src/event/talk.js
@@ -6,7 +6,7 @@ import * as message from '@/constant/message'
 import { formatTalkItem, palyMusic, formatTalkRecord } from '@/utils/talk'
 // import { isElectronMode } from '@/utils/common'
 import { ServeClearTalkUnreadNum, ServeCreateTalkList } from '@/api/chat/index.js'
-import { useTalkStore, useDialogueStore } from '@/store'
+import { useTalkStore, useDialogueStore,useDialogueListStore } from '@/store'
 
 /**
  * 好友状态事件
@@ -166,13 +166,13 @@ class Talk extends Base {
    */
   insertTalkRecord() {
     let record = this.resource
-
+    let newRecord = formatTalkRecord(this.getAccountId(), this.resource);
     // 群成员变化的消息，需要更新群成员列表
     if ([1102, 1103, 1104].includes(record.msg_type)) {
       useDialogueStore().updateGroupMembers()
     }
-
-    useDialogueStore().addDialogueRecord(formatTalkRecord(this.getAccountId(), this.resource))
+    useDialogueListStore().addDialogueRecord([newRecord],'add')
+    useDialogueStore().addDialogueRecord(newRecord)
 
     if (!this.isCurrSender()) {
       // 推送已读消息
diff --git a/src/hooks/useTalkRecord.js b/src/hooks/useTalkRecord.js
index 07c9df4..cdef028 100644
--- a/src/hooks/useTalkRecord.js
+++ b/src/hooks/useTalkRecord.js
@@ -1,13 +1,21 @@
 import { reactive, computed, nextTick } from 'vue'
 import { ServeTalkRecords } from '@/api/chat'
-import { useDialogueStore } from '@/store'
+import { useDialogueStore, useDialogueListStore } from '@/store'
 import { formatTalkRecord } from '@/utils/talk'
 import { addClass, removeClass } from '@/utils/dom'
+import { storeToRefs } from 'pinia'
 
 export const useTalkRecord = (uid) => {
   const dialogueStore = useDialogueStore()
-
-  const records = computed(() => dialogueStore.records)
+  const dialogueListStore = useDialogueListStore()
+  const { getDialogueList } = storeToRefs(dialogueListStore)
+  const records = computed(() => {
+    const dialogueList = getDialogueList.value(dialogueStore.index_name)
+    if(dialogueList){
+      return dialogueList.records
+    }
+    return dialogueStore.records
+  } )
 
   const location = reactive({
     msgid: '',
@@ -63,20 +71,20 @@ export const useTalkRecord = (uid) => {
   // 加载数据列表
   const load = async (params) => {
     const request = {
+      limit:30,
+      ...params,
       talk_type: params.talk_type,
       receiver_id: params.receiver_id,
       cursor: loadConfig.cursor,
-      limit: 30
     }
 
     loadConfig.status = 0
 
     let scrollHeight = 0
     const el = document.getElementById('imChatPanel')
-    if (el) {
-      scrollHeight = el.scrollHeight
-    }
-
+    // if (el) {
+    //   scrollHeight = el.scrollHeight
+    // }
     const { data, code } = await ServeTalkRecords(request)
     if (code != 200) {
       return (loadConfig.status = 1)
@@ -89,19 +97,18 @@ export const useTalkRecord = (uid) => {
     ) {
       return (location.msgid = '')
     }
-
     const items = (data.items || []).map((item) => formatTalkRecord(uid, item))
 
     if (request.cursor == 0) {
       // 判断是否是初次加载
       dialogueStore.clearDialogueRecord()
     }
-
-    dialogueStore.unshiftDialogueRecord(items.reverse())
-
-    loadConfig.status = items.length >= request.limit ? 1 : 2
-
-    loadConfig.cursor = data.cursor
+    const reverseItems = items.toReversed()
+    dialogueStore.unshiftDialogueRecord(reverseItems)
+    dialogueListStore.addDialogueRecord(params.direction=='down'?reverseItems:items,params.direction=='down'?'add':'unshift')
+    const dialogueList = getDialogueList.value(dialogueStore.index_name)
+    loadConfig.status = dialogueList.records[0].sequence > 1 ? 1 : 2
+    // loadConfig.cursor = data.cursor
 
     nextTick(() => {
       const el = document.getElementById('imChatPanel')
@@ -125,21 +132,38 @@ export const useTalkRecord = (uid) => {
   }
 
   const onRefreshLoad = () => {
+    let dialogueList = getDialogueList.value(dialogueStore.index_name)
+    if (dialogueList.records[0].sequence === 1 ) {
+      return false
+    }
     if (loadConfig.status == 1) {
+      let filterList = dialogueList.records.filter(item=>item.sequence !== -1)
+      loadConfig.cursor = filterList[0].sequence
       load({
         receiver_id: loadConfig.receiver_id,
         talk_type: loadConfig.talk_type,
-        limit: 30
+        direction:'up',
+        no_limit:0,
       })
     }
   }
 
-  const onLoad = (params) => {
-    loadConfig.cursor = 0
+  const onLoad = async (params) => {
+    let dialogueList = getDialogueList.value(params.index_name)
+    if (!dialogueList) {
+      loadConfig.cursor = 0
+    }else{
+      let filterList = dialogueList.records.filter(item=>item.sequence !== -1)
+      if(params.direction=='up'){
+        loadConfig.cursor = filterList[0].sequence
+      }else{
+        loadConfig.cursor = filterList[filterList.length-1].sequence
+      }
+    }
     loadConfig.receiver_id = params.receiver_id
     loadConfig.talk_type = params.talk_type
 
-    load(params)
+    await load(params)
   }
 
   return { loadConfig, records, onLoad, onRefreshLoad, onJumpMessage }
diff --git a/src/pages/dialog/components/filePanel.vue b/src/pages/dialog/components/filePanel.vue
new file mode 100644
index 0000000..c2ccac8
--- /dev/null
+++ b/src/pages/dialog/components/filePanel.vue
@@ -0,0 +1,160 @@
+<template>
+  <div class="emojiRoot">
+    <div @click="choosePhoto" class="flex flex-col items-center">
+      <div class="w-[106rpx] h-[106rpx] bg-[#F9F9F9] rounded-[60rpx] flex-center">
+        <tm-image :width="53" :height="44" :src="photoAlbum"></tm-image>
+      </div>
+      <div class="mt-[6rpx] text-[#666666] text-[24rpx]">照片</div>
+    </div>
+    <div @click="takePhoto" class="flex flex-col items-center">
+      <div class="w-[106rpx] h-[106rpx] bg-[#F9F9F9] rounded-[60rpx] flex-center">
+        <tm-image :width="53" :height="44" :src="photoGraph"></tm-image>
+      </div>
+      <div class="mt-[6rpx] text-[#666666] text-[24rpx]">拍摄</div>
+    </div>
+    <div @click="chooseFile" class="flex flex-col items-center">
+      <div class="w-[106rpx] h-[106rpx] bg-[#F9F9F9] rounded-[60rpx] flex-center">
+        <tm-image :width="53" :height="44" :src="folder"></tm-image>
+      </div>
+      <div class="mt-[6rpx] text-[#666666] text-[24rpx]">文件</div>
+    </div>
+  </div>
+</template>
+<script setup>
+import { ref, reactive, defineProps, defineEmits } from "vue"
+import dayjs from "dayjs";
+import { beautifyTime } from '@/utils/datetime'
+import { useDialogueListStore, useDialogueStore, useUserStore } from '@/store'
+import { useSessionMenu } from '@/hooks'
+import photoAlbum from '@/static/image/chatList/photoAlbum.png'
+import photoGraph from '@/static/image/chatList/photoGraph.png'
+import folder from '@/static/image/chatList/folder.png'
+import { uploadImg } from '@/api/chat'
+import { uniqueId } from '@/utils'
+
+const props = defineProps({
+  sendUserInfo: {
+    type: Object,
+    default: {},
+    required: true
+  }
+});
+
+const dialogueListStore = useDialogueListStore()
+const dialogueStore = useDialogueStore()
+const userStore = useUserStore()
+
+const emit = defineEmits(['selectImg','updateUploadProgress'])
+
+const onProgressFn = (progress, file,id) => {
+  emit('updateUploadProgress', id, progress.loaded / progress.total * 100)
+}
+
+const onUploadImage = (file) => {
+  return new Promise((resolve) => {
+    let image = new Image()
+    image.src = URL.createObjectURL(file)
+    image.onload = () => {
+      const form = new FormData()
+      form.append('file', file)
+      form.append("source", "fonchain-chat");
+      form.append("urlParam", `width=${image.width}&height=${image.height}`);
+      let randomId = uniqueId()
+      dialogueListStore.addDialogueRecord([
+        {
+          avatar: userStore.avatar,
+          created_at: dayjs().format('YYYY-MM-DD HH:mm:ss'),
+          extra: {
+            height: image.height,
+            name: "",
+            size: 0,
+            url: image.src,
+            width: image.width
+          },
+          float: "right",
+          isCheck: false,
+          is_mark: 0,
+          is_read: 0,
+          is_revoke: 0,
+          msg_id: randomId,
+          msg_type: 3,
+          nickname: userStore.nickname,
+          receiver_id: dialogueStore.talk.receiver_id,
+          sequence: -1,
+          talk_type: dialogueStore.talk.talk_type,
+          user_id: userStore.uid,
+          uploadCurrent: 0
+        }
+      ], 'add')
+
+      uploadImg(form, (e, file) => onProgressFn(e, file, randomId)).then(({ status, data, msg }) => {
+        if (status == 0) {
+          // message.success('上传成功')
+          resolve({
+            url: data.ori_url,
+            size: file.size,
+            width: image.width,
+            height: image.height
+          })
+        } else {
+          resolve('')
+          message.error(msg)
+        }
+      })
+    }
+  })
+}
+
+const choosePhoto = () => {
+  uni.chooseImage({
+    sourceType: ['album'],
+    success: async (res) => {
+      console.log(res.tempFiles);
+      res.tempFiles.forEach(async item => {
+        if (item.type.indexOf('image/') === 0) {
+          console.log("进入图片")
+          let data = await onUploadImage(item)
+          return false;
+          emit('selectImg', data)
+          // if (src) {
+          //   quill.insertEmbed(index, 'image', src)
+          //   quill.setSelection(index + 1)
+          // }
+          return
+        }
+
+        if (item.type.indexOf('video/') === 0) {
+          console.log("进入视频")
+          let fn = emitCall('video_event', item, () => { })
+          emit('editor-event', fn)
+        }
+      })
+
+    },
+    fail: (err) => {
+      console.log(err);
+
+      message.error(err)
+    }
+  })
+}
+const takePhoto = () => {
+
+}
+const chooseFile = () => {
+
+}
+
+
+
+</script>
+<style lang="scss" scoped>
+.emojiRoot {
+  width: 100%;
+  height: 232rpx;
+  padding: 20rpx 130rpx 0 130rpx;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+}
+</style>
diff --git a/src/pages/dialog/index.vue b/src/pages/dialog/index.vue
index 7a973c2..b56c255 100644
--- a/src/pages/dialog/index.vue
+++ b/src/pages/dialog/index.vue
@@ -15,19 +15,46 @@
     </div>
     <div class="root">
       <div class="dialogBox">
-        <ZPaging :fixed="false" use-chat-record-mode :use-page-scroll="false" :refresher-enabled="false"
-          :show-scrollbar="false" :loading-more-enabled="true" :hide-empty-view="true" height="100%" ref="pagingRef"
-          @scrolltolower="onRefreshLoad">
+        <ZPaging
+          :fixed="false"
+          use-chat-record-mode
+          :use-page-scroll="false"
+          :refresher-enabled="false"
+          :show-scrollbar="false"
+          :loading-more-enabled="false"
+          :hide-empty-view="true"
+          height="100%"
+          ref="zpagingRef"
+          :use-virtual-list="true"
+          :preload-page="1"
+          cell-height-mode="dynamic"
+          :loading-more-custom-style="{display:'none',height:'0'}"
+          @virtualListChange="virtualListChange"
+          @scrolltolower="onRefreshLoad"
+        >
+          <!-- <template #top>
+            <div class="load-toolbar pointer">
+              <span v-if="loadConfig.status == 0"> 正在加载数据中 ... </span>
+              <span v-else-if="loadConfig.status == 1" @click="onRefreshLoad"> 查看更多消息 ... </span>
+              <span v-else class="no-more"> 没有更多消息了 </span>
+            </div>
+          </template> -->
+
           <!-- 数据加载状态栏 -->
-          <div class="message-item" v-for="(item, index) in reversedRecords" style="transform: scaleY(-1);"
-            :key="item.msg_id" :id="item.msg_id">
+          <div
+            class="message-item"
+            v-for="item in virtualList"
+            :id="`zp-id-${item.zp_index}`"
+            :key="item.zp_index"
+            style="transform: scaleY(-1);"
+          >
             <!-- 系统消息 -->
             <div v-if="item.msg_type >= 1000" class="message-box">
               <component :is="MessageComponents[item.msg_type] || 'unknown-message'" :extra="item.extra" :data="item" />
             </div>
             <!-- 撤回消息 -->
             <div v-else-if="item.is_revoke == 1" class="message-box">
-              <revoke-message :login_uid="uid" :user_id="item.user_id" :nickname="item.nickname"
+              <revoke-message :login_uid="userStore.uid" :user_id="item.user_id" :nickname="item.nickname"
                 :talk_type="item.talk_type" :datetime="item.created_at" />
             </div>
 
@@ -37,9 +64,9 @@
               'multi-select-check': item.isCheck
             }">
               <!-- 多选按钮 -->
-              <aside v-if="dialogueStore.isOpenMultiSelect" class="checkbox-column">
+              <!-- <aside v-if="dialogueStore.isOpenMultiSelect" class="checkbox-column">
                 <n-checkbox size="small" :checked="item.isCheck" @update:checked="item.isCheck = !item.isCheck" />
-              </aside>
+              </aside> -->
 
               <!-- 头像信息 -->
               <aside class="avatar-column">
@@ -50,7 +77,7 @@
               <!-- 主体信息 -->
               <main class="main-column">
                 <div class="talk-title">
-                  <span class="nickname pointer" v-show="talk_type == 2 && item.float == 'left'"
+                  <span class="nickname pointer" v-show="talkParams.type == 2 && item.float == 'left'"
                     @click="onClickNickname(item)">
                     <span class="at">@</span>{{ item.nickname }}
                   </span>
@@ -62,16 +89,16 @@
                     :data="item" :max-width="true" :source="'panel'"
                     @contextmenu.prevent="onContextMenu($event, item)" />
 
-                  <div class="talk-tools">
-                    <template v-if="talk_type == 1 && item.float == 'right'">
+                  <!-- <div class="talk-tools">
+                    <template v-if="talkParams.type == 1 && item.float == 'right'">
                       <loading theme="outline" size="19" fill="#000" :strokeWidth="1" class="icon-rotate"
                         v-show="item.send_status == 1" />
 
                       <span v-show="item.send_status == 1"> 正在发送... </span>
-                      <!-- <span v-show="item.send_status != 1"> 已送达 </span> -->
+                      <span v-show="item.send_status != 1"> 已送达 </span>
                     </template>
 
-                  </div>
+                  </div> -->
                 </div>
 
                 <div v-if="item.extra.reply" class="talk-reply pointer"
@@ -87,10 +114,11 @@
 
           </div>
           <div class="load-toolbar pointer" style="transform: scaleY(-1);">
-            <span v-if="loadConfig.status == 0"> 正在加载数据中 ... </span>
-            <span v-else-if="loadConfig.status == 1" @click="onRefreshLoad"> 查看更多消息 ... </span>
-            <span v-else class="no-more"> 没有更多消息了 </span>
-          </div>
+              <span v-if="loadConfig.status == 0"> 正在加载数据中 ... </span>
+              <span v-else-if="loadConfig.status == 1" @click="onRefreshLoad"> 查看更多消息 ... </span>
+              <span v-else class="no-more"> 没有更多消息了 </span>
+            </div>
+
         </ZPaging>
       </div>
     </div>
@@ -102,13 +130,17 @@
           <!-- <tm-input type=textarea autoHeight focusColor="#F9F9F9" color="#F9F9F9" :inputPadding="[12]"
             placeholder=""></tm-input> -->
         </div>
-        <tm-image :margin="[10,0]" @click="state.isOpenEmojiPanel = !state.isOpenEmojiPanel" :width="52" :height="52" :round="12"
+        <tm-image :margin="[10,0]" @click="handleEmojiPanel" :width="52" :height="52" :round="12"
           :src="state.isOpenEmojiPanel ? keyboard : smile"></tm-image>
-        <tm-image :margin="[10,0]" :width="52" :height="52" :round="12" :src="addCircleGray"></tm-image>
+        <tm-image @click="handleFilePanel" :margin="[10,0]" :width="52" :height="52" :round="12" :src="addCircleGray"></tm-image>
         <tm-button @click="onSendMessageClick" :margin="[0,0]" :padding="[0,30]" color="#46299D" :fontSize="28" size="mini" :shadow="0" label="发送"></tm-button>
       </div>
       <div v-if="state.isOpenEmojiPanel" class="mt-[50rpx]">
-        <emoji-panel @on-select="onEmoticonEvent" />
+        <emojiPanel @on-select="onEmoticonEvent" />
+      </div>
+      <div v-if="state.isOpenFilePanel" class="mt-[16rpx]">
+        <filePanel @selectImg="handleSelectImg" />
+
       </div>
       <!--底部安全区-->
       <div class="content-placeholder"></div>
@@ -116,12 +148,12 @@
   </div>
 </template>
 <script setup>
-import { ref, reactive, watch, computed, onMounted } from 'vue';
+import { ref, reactive, watch, computed, onMounted,onUnmounted } from 'vue';
 import { QuillEditor, Quill } from '@vueup/vue-quill'
 import EmojiBlot from './formats/emoji'
 import { useChatList } from "@/store/chatList/index.js";
 import { useAuth } from "@/store/auth";
-import { useUserStore, useDialogueStore, useUploadsStore, useEditorDraftStore,useTalkStore,useSettingsStore } from '@/store'
+import { useUserStore, useDialogueStore, useUploadsStore, useEditorDraftStore,useTalkStore,useSettingsStore,useDialogueListStore } from '@/store'
 import addCircleGray from "@/static/image/chatList/addCircleGray.png";
 import { MessageComponents, ForwardableMessageType } from '@/constant/message'
 import { formatTime, parseTime } from '@/utils/datetime'
@@ -133,19 +165,23 @@ import { emitCall } from '@/utils/common'
 import ZPaging from "@/uni_modules/z-paging/components/z-paging/z-paging.vue";
 import useZPaging from "@/uni_modules/z-paging/components/z-paging/js/hooks/useZPaging.js";
 import emojiPanel from './components/emojiPanel.vue'
+import filePanel from './components/filePanel.vue'
 import lodash from "lodash";
 import { ServePublishMessage } from '@/api/chat'
+import { storeToRefs } from 'pinia'
 
 Quill.register('formats/emoji', EmojiBlot)
 
+const dialogueListStore = useDialogueListStore()
+const { getDialogueList } = storeToRefs(dialogueListStore)
 const talkStore = useTalkStore()
 const settingsStore = useSettingsStore()
 const userStore = useUserStore()
 const dialogueStore = useDialogueStore()
 const editorDraftStore = useEditorDraftStore()
 const editor = ref()
-const pagingRef = ref(null)
-useZPaging(pagingRef)
+const zpagingRef = ref(null)
+useZPaging(zpagingRef)
 const indexName = computed(() => dialogueStore.index_name)
 const talkParams = reactive({
   uid: computed(() => userStore.uid),
@@ -159,9 +195,21 @@ const talkParams = reactive({
 })
 
 const state = ref({
-  isOpenEmojiPanel: false
+  isOpenEmojiPanel: false,
+  isOpenFilePanel: false
 })
 
+const virtualList = ref([])
+
+const handleEmojiPanel = () => {
+  state.value.isOpenFilePanel = false;
+  state.value.isOpenEmojiPanel = !state.value.isOpenEmojiPanel
+}
+const handleFilePanel = () => {
+  state.value.isOpenEmojiPanel = false;
+  state.value.isOpenFilePanel = !state.value.isOpenFilePanel
+}
+
 const onSendMessage = (data = {}, callBack) => {
   let message = {
     ...data,
@@ -320,7 +368,6 @@ const onEditorChange = () => {
 }
 
 const onClipboardMatcher = (node, Delta) => {
-  // debugger
   const ops = []
 
   Delta.ops.forEach((op) => {
@@ -394,33 +441,40 @@ const editorOption = {
   placeholder: '',
 }
 
+const handleSelectImg = (data) => {
+  onSendMessage({ type: 'image', ...data })
+}
+
+const virtualListChange = (vList) => {
+  virtualList.value = vList
+}
 
 
-watch(() => records, (newValue, oldValue) => {
-  console.log(newValue);
+watch(() => reversedRecords.value, (newValue, oldValue) => {
+  zpagingRef.value?.complete(newValue)
 
 }, { deep: true, immediate: true })
 
-watch(() => talkParams.uid, (newValue, oldValue) => {
+onMounted(async() => {
+  const dialogueList = getDialogueList.value(talkParams.index_name)
+  if (dialogueList?.records?.length) {
+    debugger
+    zpagingRef.value?.complete(dialogueList.records)
+  }
   let objT = {
     uid: talkParams.uid,
     talk_type: talkParams.type,
     receiver_id: talkParams.receiver_id,
-    index_name: talkParams.index_name
+    index_name: talkParams.index_name,
+    direction:dialogueList?'down':'up',
+    no_limit: dialogueList?1:0,
   }
-  onLoad({ ...objT, limit: 30 })
-}, { immediate: true })
-
-onMounted(() => {
-  let objT = {
-    uid: talkParams.uid,
-    talk_type: talkParams.type,
-    receiver_id: talkParams.receiver_id,
-    index_name: talkParams.index_name
-  }
-  onLoad({ ...objT, limit: 30 })
+  onLoad({ ...objT })
 })
 
+onUnmounted(() => {
+  dialogueStore.setDialogue({})
+})
 </script>
 <style scoped lang="less">
 uni-page-body,
diff --git a/src/service/index.js b/src/service/index.js
index 951b0a8..9e42bda 100644
--- a/src/service/index.js
+++ b/src/service/index.js
@@ -9,16 +9,19 @@ const request = new Request({
   interceptors: {
     //实例的请求拦截器
     requestInterceptors: (config) => {
-      config.headers['Content-Type'] = config.method === 'get' ?
-        'application/x-www-form-urlencoded' :
-        'application/json';
-      config.headers['Authorization'] = token.value
+      config.headers["Content-Type"] =
+        config.method === "get"
+          ? "application/x-www-form-urlencoded"
+          : config.contentType
+          ? config.contentType
+          : "application/json";
+
+      config.headers['Authorization'] = token.value || '';
       if (config.isFormData) {
         config.headers['Content-Type'] = 'multipart/form-data';
       }
       return config;
     },
-    //实例的响应拦截器
     responseInterceptors: async (res) => {
       if(res.data.status===1){
         message.warning(res.data.msg)
diff --git a/src/service/request/index.js b/src/service/request/index.js
index 9705fb5..294cd0c 100644
--- a/src/service/request/index.js
+++ b/src/service/request/index.js
@@ -1,7 +1,4 @@
 import axios from 'axios';
-import { createUniAppAxiosAdapter } from '@uni-helper/axios-adapter'
-axios.defaults.adapter = createUniAppAxiosAdapter()
-
 class Request {
   // axios 实例
   instance;
diff --git a/src/static/image/chatList/folder.png b/src/static/image/chatList/folder.png
new file mode 100644
index 0000000000000000000000000000000000000000..6edc828c9d18e3e1481227eb4276bfdf817c079e
GIT binary patch
literal 1033
zcmV+k1or!hP)<h;3K|Lk000e1NJLTq001}u001lq1^@s6Fu{A100001b5ch_0Itp)
z=>Px&!%0LzRA@upnmuR~K@@=ByR2Y9K@)>16toa66qFdyLWqThU=YEOSO^CqNKDAj
zY=T8P6$yE>n*_Zo;t7H&ECO0s2&S+Qyr7_vMp4ir-~}UuOCY=Z+&Ob$FUH$lkT`o&
z-7#-=-#2gO&3kVaA<$Y{T8yTqrglU;$IK@Xu@L~a24yz;H#6q}-~#|Wb6xlT=;-J|
z938MEJUBRb&~@D@L_8Gd0h=tl%*;bGGc#k;)6-6rcNYOy;c|$$Ey^GbWS$oag|<v4
zvlymJ5zsWvw*YW7OjxIWW}cE#UI^0(eYo>J+*FvLj{VG>mQp^fq#Ft$9w1^`M}P=A
z<%p;`3~*L+$5KguhlsX>0scV59T8?LDB>{lD**TsXWXh2+ZAU_m@E;Ut_WzFCWk#F
z*zd3VFDol6t>fe4>TJ@!DJK&P(DS^LmSw%xo@`aYSb)s@OiJ0B6gZ`4EI`lmE?buM
zC<xfo)3e(!jQ<+W8HTYiJUsk!qlu3L=s1qkus#+PLVQNVeHvKxn_6M1REkDMMn0AF
zi43T`rj+tj5JU)Z2oYyBfGhLx05C*E!*Q3W8gx7Oq=A8f>&$#tGr*!c%-k!b9E)s0
z060QKWk-V$;;BllbOZzdm3i!q1gOqFKjzyX1WBjUTkGrVzw4ZVAYxY}KmfQ)MBPEa
z-rn98!!TZIYQ54j%|-%rUH6P_+b`BRm^+AgBk_RDyf{BU-;m8_mxC~-X}<Bx2*-5>
zR4Xrv1)mU6+dAv*Ld5Ty!zoXCH5728=%v5Ezde;oP3jKlIL@&!z`sQ=Nl22HbGh91
zih#^KEv5V;-!e_}D*)`#+=9hyKg@!YM09E0@o>~I3{|Akx-s*FlrnS=&J_xU1Htl~
z5aKZ+c4$raTe)r`isVIe0C3CmyhTL3h=|t`00*w?HruwH3tOT|VA)7VC!f!6S7&#%
z0=^@nV{y}^#8|WBV5%ALs+4k~Y5{|}Yt`*RKa*eZGx?pR{Zx&BWw%aM2k4h7Zj=g6
zRk;UC2YhgeuK1CPk(e`}vZ8q+Y6yy`CHfu!4p#}_BO<z71}KEkzP1u|@?F<GYuono
zGQiHx&c@o>T6GB;_l_{?dpApNEj%j&RDb*g_KKgt7Ek_!HgzF;T1u%dWy{*ycQQhV
zn}|4+L_p8;x-84Ow~_8^fU2{vudkz~rp5*U^@Wr6O+_ut+-F%<_HW9T0V*L?lCP_)
zyRw?xD)0JF@6`Xntf~6!NA;b|($dnsOeQl|>6yO(l)T7OM$zbi00000NkvXXu0mjf
DX+_;o

literal 0
HcmV?d00001

diff --git a/src/static/image/chatList/photoAlbum.png b/src/static/image/chatList/photoAlbum.png
new file mode 100644
index 0000000000000000000000000000000000000000..8ad3d6aaee7e5fe4c08b10389922a96d36861b04
GIT binary patch
literal 1162
zcmV;51a<p~P)<h;3K|Lk000e1NJLTq001=r001lq1^@s6#Xs;P00001b5ch_0Itp)
z=>Px(L`g(JRA@u(nqO#Jbri?H-+P;8+FRNN1ue6c;cyBL74<<B+!)9nls(uNt56Xu
zv__LQrF{@~q1(im+t?MW24x)+`;h5_pf7?Tj^WS;|7;)#N-UydsB6-uf0BET`PB@v
z*e<zUOKwZ<Ykv3l`+d&$ch2vebHm==UY}tY&yswB<h=lPU~4@B;13b`jO4LcEcPoS
zk;uy;@+L`cEtXYx`<sXyR8Zdo*t-pY6oNR8GtI%l!3;@bn?ONCE-0ncnJj(26p^DO
zb6yA4G>x`x?<IK@KvQwQf35~~+Axf6(=?a84rQ9AmdRuuA^8b_7Oz6FzrR1=_xqnB
z`B2gNKj-uL<oNjbc>qqSp*;`P)zzhUbad<okRW+`*(q5Rk>ifznDKag;mU8GhAM9E
zK9U~;=vd>}F98@$r_<3yBC+D{o`xD89&WL1`-F%by4HOuA{PNXW?9xxo`(tsgFF3x
z|K|YqR0vKBBJ!eTS*JV?6%L1Y>AHRfz^xUamPKULvaBPXhjOD7fM6^Zd*Aa=%BOO<
z+)0v8R>(pBb{uE_*w~m#?Ytc*R1}+=n|n}1k|b}tM)ZrOQmG@!WO5}j*p%qk*VkwG
ze7>f(wzf;AX<l_Py3Iz4CD0*F)5ZYoEPG#t^LI5(do>!3W;W%X8W|bcmCxs+0G<Hg
zE7mh_Ei5b?pPZbWa|={5o}p0a7N5`8?KsY(BySXvA4TN!%*@QWWHM=QN=6Y5hwsre
zZJOj=0JM@tlv3XScqNreeOtbP>i}Kz)eSj*kw`?<UDL(;q!g%h;maao>AF5%dQ?0K
zH83!s(wGkmP<K{QB`ejwCK+sMYWi+H{-#vOX0y9(+kSxLMZ+-8n5Mb7VaIQ1Xy|?s
znHG`VRREQ)J6p)K-^gaO<8FK{6biLAG&CGm*#pTN04QHNYuk2DJRbk$dIN>3j1Q1J
zQOKU#0j#HwVHf%a=WN^VZ*6V;p@M2EP;~0L{vOGFWj?Fs`C@r_xqD(_;?jCUdM+Fe
zKd$TgNdPym6X+^m0}wR~W5P7e|3yeudUSSn?h}!>N#3!B5320^gLFFmQX-Max(XCa
zOH0rA{r&?0rU2ZuQBE!*Hp#D4gftA}{1w%DdU|#Q0)gi>O&bN!Rw@4j@OnC(9&K-L
zx2vsuKU(R?kg8Y<Y!p!0JeO5pVSax8oyNw-23^-*Bl#Qvf0gU0qA}Rq+&q=ZWFD@j
zoc~=!S~k1GR8&pnaE$=&F7uyi*#08<wBtC7)j(A<p%=!eE|?NPseG(b<HZXbcC!bS
z3#zc+P<(0C7MYs~y*RcG<waFi+f!Ysx>7Z?K>hgD(D<&Ft}ErrTs0hASE`1_ceV8P
zRVrJ|a$T9j!-H4;9P%lEgB#F;s5z(n_Z(K;qCF%n0P1_|R{IN&GNc0ehvbFAx8kYU
c+1XS70y0Cb=@(BIA^-pY07*qoM6N<$f|$`N!2kdN

literal 0
HcmV?d00001

diff --git a/src/static/image/chatList/photoGraph.png b/src/static/image/chatList/photoGraph.png
new file mode 100644
index 0000000000000000000000000000000000000000..6db0528e2d9aabac3e2a28b0b1a49de1b762017c
GIT binary patch
literal 1358
zcmV-U1+n^xP)<h;3K|Lk000e1NJLTq001}u001lq1^@s6Fu{A100001b5ch_0Itp)
z=>Px)2uVaiRA@u(T3u*dMHD{g-egnaZbB19>kkoxYHO)2iT1%h1pEsHe-MM%7emm+
z#;(czNfYxRw<xV-XR?V4fh46B#2?%z+iLq@AuoBU4XD^w6bo4d6<^xyK4eYy9y80{
za1+w)=FVhUwDWrB`{w)Z+&Od3%tcVt1_lNimzI_;BI5R-ltlDPKA+z=Iy!niD92hH
zsvv4_Z?9=>Z9R{OPs#ET(S_OB*^cSy=_Oe%fmdSCvaBgYd_#qxBF7YCEUJP}+MsRQ
zeE^V9A!ZGS!5ABr<&`pMn&tsSJdKFDtdO;MBFZD;i;S_aWw-+yv~7Dg5zQcCSVll8
zED>c9@kz$mk3q*M80_us-CbK-+YbO80B~nevMRy-4FKnf=tIu=6*NtAyQXQE03cE&
z0#(Vl0RVf^w(Tzgpi>oVmGPWH%d&1DVndY)QzD0m{t`1tO4zED<hDV{iTND>PUQ3X
z8Ih+ZlgW9(7mLLjLZQ$;u>}CYn*eaH<Ty8lZ^{f3(Qia_ESt@KGC4W9SW0|nXJ@FT
zrR8-Z8bZVeRU1`qkcdvE)9FL0RO+9Nh;<xiOD2;!iHNUl1b3^xstvx+7<=zlgO+-3
zS=L907?a`fW0e^sq7$5Rv7S~n!!RDzb^R?OIsgFMiVyz)fHS(TPYe$aUtNo_EGvbG
zuc$Do%HY*pF1I(COy)dMqDE|MYl{<6>}JV$F`-U`!{GtPaa<4E)6)~Kudf%z@0T^H
z#GvcC&yS3Zob|*+qtV)MIDA&qv}el^NJOX8>GaE~R4VWFH%+rk)3j6N;7j$9HYko6
zIOh-h2eB+`0ueV_u#PasERV-=oKQBK72C{RGA5-B0>BVs?6@aFlu-ciLjX}rh`2Kz
zkN@i98UuiL0&uNBqzxkC{&+k-<NLIdnx-8NDC#(4Y{<vescD)h1_C!}gSlL;(aTVT
z3fs0taCju3qD#va{No<Budi=MO-;>}fLsNbv_Zz$s#5{WvNA!dd?LEeIp69T>hA82
zG&MC9(z~Ed+Ti^Be8``U$ruEH3}bAibSnm$m8~a;Noj+KxGf%!|LF@1;*;7DL<|vK
z=A7^Hu!dpWr|Y_iq=B2X!R1QfnM5M-tuHW)X_^)&@)6M(=Uf~^7Mfug9lEZc3+ztC
z8eHZ$${2He1|QQj?fW32^7;I(L?Ut7_ca^?fOms%c^K&#B%*7a^N0K*Y}=kJ)_G-X
zBcgH6`P&|#nCe{vfCtJZS*N44!6N5NjIpmgevzt0B9U(p@#%8J5z)CwB=UmeI4k!N
zhG87kb^X(F@TK~wGWc^Ym)qk{wjIZ*$z(DkrAnV-vOP98H+RIJheo5(`i6!E5v*FO
z#h}o!?uChInqo~JBBJL2;BG`DA`(&ejO)5n{x#>Bu`KHgM0{1&oWQG^K~Iabyzw8E
z5oX)AxX4+Fq%vHaVNh^Rgu~&({`FLj$gZxgEzQl%AFG-<Wl?lJ@uGwRfDh8?^k@FH
zwO-#?ELK-nSJzeC4y4!I+A&mrqO16cXigj(id(3Kg@y0N$H%jx!{FfH*2TreCjel7
z@#6HJa%MS5pG`FwM38FCZG)=cXr=l77c(gSNolO~o2|rnqJaKSUw{(P=i&l%Cn8=1
zfIBMjRx33I5zV`<+gdnJ>F@8~<GSt<L=*?L&6N_dN#hiLLI8ka#@J8)0^9@{YX(sz
Q8~^|S07*qoM6N<$f>mgUSO5S3

literal 0
HcmV?d00001

diff --git a/src/store/auth/index.js b/src/store/auth/index.js
index 627fdbf..e349d2b 100644
--- a/src/store/auth/index.js
+++ b/src/store/auth/index.js
@@ -4,7 +4,7 @@ import {uniStorage} from "@/utils/uniStorage.js"
 import {ref} from 'vue'
 export const useAuth = createGlobalState(() => {
   // const token = useStorage('token', '', uniStorage)
-  const token = ref('30119d9978a6f3321fb4779c0040e997df4dd0dd0cf6b71119657617d2249ed783f940b0050d5be7e758740ea467afdf3eeb4d28fb5ea234af60ebe51fb218ffea38d3362de44912166520e87a6f38daaa6ef5faf4f643724f7a84be3e96d634f3c10379df86df00c605eb7b1120d2919e9b417e127bfe4828f3b56eb67ed1d62a401a9a4c065cf7b038001dd54637387e965bebe403133e408b3d4224f75952ee7682ff4e8904cce7d7c7e9766e958d253169bf05c6c5272dba34ff43ee1045')
+  const token = ref('30119d9978a6f3321fb4779c0040e997df4dd0dd0cf6b71119657617d2249ed783f940b0050d5be7e758740ea467afdf3eeb4d28fb5ea234af60ebe51fb218ffea38d3362de44912166520e87a6f38dae8dda9ac1ca35393126a287143c4b6bf18216b911f8a76572c62563bf215ccfbf481b73f0bf6d5275d6ba21139798506790b4824a503c2fbbe8230a1118dd07583187e5c342dd8f8ca02f70dbd2dcea17ac3c5fbcf6e39893a63d2e79b34908949ce628eaede23e241afbcf5b83e01b9')
   const refreshToken = useStorage('refreshToken', '', uniStorage)
   const userInfo = useStorage('userInfo', {}, uniStorage)
   const leaderList = useStorage('leaderList', [], uniStorage)
diff --git a/src/store/index.js b/src/store/index.js
index 4baa87f..5314f47 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -5,4 +5,5 @@ export * from '@/store/modules/talk'
 export * from '@/store/modules/dialogue'
 export * from '@/store/modules/editor-draft'
 export * from '@/store/modules/uploads'
+export * from '@/store/modules/dialogueList'
 // export * from '@/store/modules/note'
diff --git a/src/store/modules/dialogueList.js b/src/store/modules/dialogueList.js
new file mode 100644
index 0000000..e1af950
--- /dev/null
+++ b/src/store/modules/dialogueList.js
@@ -0,0 +1,79 @@
+import { defineStore } from 'pinia'
+import { useDialogueStore } from '@/store'
+import lodash from 'lodash'
+
+export const useDialogueListStore = defineStore('dialogueList', {
+  persist: true,
+  state: () => {
+    return {
+      dialogueList:[]
+    }
+  },
+  getters: {
+    getDialogueList:(state)=>{
+      return (indexName) => state.dialogueList.find(item=>item.index_name===indexName)
+    }
+  },
+  actions: {
+    // 添加对话
+    addDialogueRecord(newRecords,type='add') {
+      console.log(newRecords);
+
+      const dialogue = lodash.cloneDeep(useDialogueStore())
+      if (!dialogue || typeof dialogue !== 'object') return
+      // 检查是否已存在相同 index_name 的对话
+      const existingIndex = this.$state.dialogueList.findIndex(item => item.index_name === dialogue.index_name)
+      if (existingIndex === -1) {
+        // 如果不存在，直接添加
+        this.$state.dialogueList.push(dialogue)
+      } else {
+        // 如果对话存在，处理 records 数组
+        const { records = [] } = dialogue
+        newRecords.forEach(newRecord => {
+          const recordIndex = this.$state.dialogueList[existingIndex].records.findIndex(
+            record => record.msg_id === newRecord.msg_id
+          )
+
+          if (recordIndex === -1) {
+            // 如果记录不存在，添加到 records 数组
+            if(type==='add'){
+              this.$state.dialogueList[existingIndex].records.push(newRecord)
+            }else{
+              this.$state.dialogueList[existingIndex].records.unshift(newRecord)
+            }
+          }
+        })
+
+        // 更新除 records 和 index_name 外的其他属性
+        const { index_name, records: _, ...updateProps } = dialogue
+        this.$state.dialogueList[existingIndex] = {
+          ...this.$state.dialogueList[existingIndex],
+          ...updateProps
+        }
+      }
+    },
+
+    // // 更新上传图片进度
+    // updateUploadProgress(msgId,progress){
+    //   console.log('updateUploadProgress');
+
+    //   const dialogue = lodash.cloneDeep(useDialogueStore())
+    //   const item = this.getDialogueList(dialogue.index_name)
+    //   const record = item.records.find(item=>item.msg_id===msgId)
+    //   if(record){
+    //     record.uploadCurrent = progress
+    //     console.log(record.uploadCurrent);
+
+    //   }
+    // }
+
+    // 自增好友键盘输入事件
+    // triggerKeyboard() {
+    //   this.keyboard = true
+
+    //   clearTimeout(keyboardTimeout)
+
+    //   keyboardTimeout = setTimeout(() => (this.keyboard = false), 2000)
+    // },
+  }
+})
diff --git a/src/utils/index.js b/src/utils/index.js
index 5922094..1e2b38e 100644
--- a/src/utils/index.js
+++ b/src/utils/index.js
@@ -82,3 +82,8 @@ export const convertBd09ToWgs84 = (bd_lon, bd_lat) => {
     latitude: wgs84[1],
   };
 }
+
+export const uniqueId = () => 'id-' + new Date().getTime().toString(36) + '-' + Math.random().toString(36).substr(2, 9);
+
+
+