feat: 处理好删除老消息时，页面停留在原处

src/App.vue

@@ -76,7 +76,8 @@ export default defineComponent({
           masterId: getMasterIdFromDisplayMsg(displayMsg),
           isChattingWithTargetId: isChattingWith(getMasterIdFromDisplayMsg(displayMsg), getTargetIdFromDisplayMsg(displayMsg))
         })).then(() => {
-          chatCardTimeStamp.value = new Date().getTime()
+          console.log(displayMsg);
+          chatCardTimeStamp.value = new Date().getTime() + (Math.ceil(Math.random() * 1000))
         });
       };
 

src/db/ChatDBService.ts

@@ -17,7 +17,7 @@ export default class ChatDBService {
   }) {
     const { msg, masterId, isChattingWithTargetId } = data
 
-    ChatMessageDB.getInstance().saveMsg(msg, masterId)
+    await ChatMessageDB.getInstance().saveMsg(msg, masterId)
 
     const thePersonAlreadyInChatList = await ChatListCardDB.getInstance().thePersonAlreadyInChatList(
       getTargetIdFromDisplayMsg(msg),

src/store/test.ts

+import { reactive, ref } from "vue";
+
+export const fffList = reactive<any[]>([])
\ No newline at end of file

src/views/Chat/Chat.vue

@@ -7,7 +7,7 @@
     >
       <q-spinner color="primary" size="3rem" :thickness="5" />
     </div>
-    <div class="flex flex-col flex-grow" style="flex-basis: 0px">
+    <div class="flex flex-col flex-grow overflow-hidden" style="flex-basis: 0px">
       <ChatContentVue />
       <ServiceRating :setSelectedRate="handleSelect" :selected="selected" v-if="showServiceRating" />
       <ChatOption :selected="selectedChatOption" :setSelected="handleSelectChatOption" />
@@ -28,7 +28,6 @@ import { defineComponent, onBeforeUnmount, onMounted, reactive, ref, watch } fro
 import ChatContentVue from "./ChatContent.vue";
 import ChatInputVue from "./ChatInput.vue";
 import { connectionState } from "@/store/connectionStore";
-import FzmMessageProtocol from "@/utils/fzm-message-protocol";
 import { privateKey, publicKey, target } from "@/store/appCallerStore";
 import { token, from, orderid } from "@/store/appCallerStore";
 import { generateToken } from "@/utils/generateToken/generate-token";
@@ -42,6 +41,7 @@ import { chatCardTimeStamp } from "@/store/chatCardStore";
 import ChatListCardDB from "@/db/ChatListCardDB";
 import { v4 as uuidv4 } from 'uuid'
 import { ChatMessageTypes } from "@/types/chatMessageTypes";
+import { fffList } from "@/store/test";
 
 export default defineComponent({
   components: {
@@ -86,14 +86,13 @@ export default defineComponent({
     })
 
     watch(chatCardTimeStamp, async () => {
-      messageStore.messages.splice(0, messageStore.messages.length);
       const messageList = await ChatMessageDB.getInstance().getMessage(from, target);
+      messageStore.messages.splice(0, messageStore.messages.length);
       messageStore.messages.push(...messageList);
+      // console.log(messageList[messageList.length - 1]);
     })
 
 
-
-
     return {
       connectionState,
       selected,

src/views/Chat/ChatContent.vue

@@ -14,6 +14,8 @@
                     {{ isMobile ? '下滑加载更多' : '按住鼠标向下拖拽以加载更多' }}
                 </div>
     </div>-->
+    <!-- <div class="flex-grow overflow-hidden"> -->
+    <!-- <div class="h-full overflow-auto"> -->
     <ChatContentMessageVue
       v-for="message in messages"
       :key="message.uuid"
@@ -22,11 +24,14 @@
       :fromMyself="myid == message.from"
       :time="formatDate(message.datetime, 'MM月DD日 HH:mm')"
       :uuid="message.uuid"
+      :logid="message.logid"
       :type="message.type"
       :state="message.state"
       :hideDatetime="message.hideDatetime"
       :uploadProgress="message.uploadProgress"
     />
+    <!-- </div> -->
+    <!-- </div> -->
     <!-- </q-pull-to-refresh> -->
   </q-scroll-area>
 </template>
@@ -38,7 +43,7 @@ import { DisplayMessage, messageStore } from "@/store/messagesStore";
 import useScrollTo from "@/composables/useScrollTo";
 import ChatContentMessageVue from "./ChatContentMessage.vue";
 import { date, Platform } from "quasar";
-import ChatMessageDB from "@/db/ChatMessageDB";
+import { fffList } from "@/store/test";
 
 export default defineComponent({
   components: { ChatContentMessageVue },
@@ -48,6 +53,7 @@ export default defineComponent({
     const formatDate = date.formatDate;
     const isMobile = Platform.is.mobile;
 
+
     // 监听「下拉加载更多」操作，记录当前的第一条消息 id
     let firstMessageSnapshot: DisplayMessage;
     const loadMore = (done?: () => void) => {
@@ -64,16 +70,18 @@ export default defineComponent({
 
     // 收到新消息时滚动至底部
     const { scrollToBottom, scrollArea, scrollToElement } = useScrollTo();
+
     watch(messageStore.messages, () => {
       nextTick(() => {
         if (messageStore.appendingNewMessage.value) {
           scrollToBottom();
         } else {
-          scrollToElement(document.getElementById(firstMessageSnapshot.uuid));
+          firstMessageSnapshot && firstMessageSnapshot.uuid && scrollToElement(document.getElementById(firstMessageSnapshot.uuid));
         }
       });
     });
 
+
     return {
       scrollToBottom,
       scrollArea,

src/views/Chat/ChatContentMessage.vue

@@ -25,12 +25,24 @@
           :class="[{ 'flex-row-reverse': fromMyself }]"
           class="flex items-center max-w-chat-msg-bubble"
         >
-          <!-- 文本消息 -->
-          <ChatContentMessageTextVue
+          <div
+            v-touch-hold:300="handleTouchHoldItem"
+            @click.capture.stop="clickItem"
             v-if="type === 1 || type === ChatMessageTypes.robot"
-            :from-myself="fromMyself"
-            :content="content"
-          />
+          >
+            <div @click.capture="stop">
+              <van-popover
+                @select="onTextMsgSelect"
+                :actions="textMsgActions"
+                v-model:show="showPopOver"
+              >
+                <template #reference>
+                  <!-- 文本消息 -->
+                  <ChatContentMessageTextVue :from-myself="fromMyself" :content="content" />
+                </template>
+              </van-popover>
+            </div>
+          </div>
 
           <!-- 图片消息 -->
           <ChatContentMessageImageVue
@@ -88,7 +100,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent } from "vue";
+import { computed, defineComponent, ref } from "vue";
 import default_avatar_url from "@/assets/user_avatar.png";
 import { messageStore } from "@/store/messagesStore";
 import ChatContentMessageTextVue from "./ChatContentMessageText.vue";
@@ -97,6 +109,10 @@ import ChatContentMessageImageVue from "./ChatContentMessageImage.vue";
 import { ChatMessageTypes } from "@/types/chatMessageTypes";
 import ChatContentMessageVideoVue from "./ChatContentMessageVideo.vue";
 import { target } from "@/store/appCallerStore";
+import { copyToClipboard } from 'quasar'
+import { Toast } from "vant";
+import ChatMessageDB from "@/db/ChatMessageDB";
+import { chatCardTimeStamp } from "@/store/chatCardStore";
 
 
 export default defineComponent({
@@ -116,6 +132,7 @@ export default defineComponent({
     uuid: { type: String, required: true },
     hideDatetime: Boolean,
     uploadProgress: Object,
+    logid: { type: String, required: false, },
   },
 
   setup(props) {
@@ -138,7 +155,51 @@ export default defineComponent({
       );
     });
 
-    return { default_avatar_url, resend, isMedia, abort, ChatMessageTypes };
+
+    const textMsgActions = [
+      {
+        text: '删除', cb(data: { content: any, uuid: string, logid?: string }) {
+          ChatMessageDB.getInstance().deleteMsg({ uuid: data.uuid, logid: data.logid });
+          const index = messageStore.messages.findIndex(i => {
+            return i.uuid === data.uuid
+          })
+          messageStore.appendingNewMessage.value = false;
+          messageStore.messages.splice(index, 1);
+        }
+      },
+      {
+        text: '复制', cb(data: { content: any, uuid: string, logid: string }) {
+          copyToClipboard(data.content.content).then(() => {
+            Toast.success('复制成功')
+          }).catch(() => {
+            Toast.fail("复制失败")
+          })
+        }
+      }
+    ]
+    const onTextMsgSelect = (action: typeof textMsgActions[0]) => {
+      action.cb({
+        content: props.content,
+        uuid: props.uuid,
+        logid: props.logid
+      })
+    };
+    const showPopOver = ref(false);
+    const handleTouchHoldItem = () => {
+      showPopOver.value = true;
+    }
+    const clickItem = () => {
+      showPopOver.value = false;
+    }
+
+    return {
+      default_avatar_url, resend, isMedia, abort, ChatMessageTypes, handleTouchHoldItem,
+      onTextMsgSelect,
+      textMsgActions,
+      showPopOver,
+      clickItem
+    };
   },
 });
+
 </script>
\ No newline at end of file