From 10b136810f38927b5db5c6e6b2afc2ce40e439fc Mon Sep 17 00:00:00 2001 From: qiutianhong Date: Wed, 6 Nov 2024 17:35:10 +0800 Subject: [PATCH] =?UTF-8?q?add=EF=BC=9A=E5=AE=8C=E5=96=84=E6=96=87?= =?UTF-8?q?=E4=BB=B6=E8=81=8A=E5=A4=A9=E6=B6=88=E6=81=AF=E5=B1=95=E7=A4=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/chat/ChatBox.vue | 35 ++- frontend/src/components/chat/ChatMessage.vue | 287 ++++++++++--------- frontend/src/components/chat/ChatMsgList.vue | 20 +- frontend/src/stores/chat.ts | 181 ++++++++---- frontend/src/stores/db.ts | 11 +- frontend/src/stores/upgrade.ts | 3 + frontend/src/system/initBuiltin.ts | 14 +- 7 files changed, 352 insertions(+), 199 deletions(-) diff --git a/frontend/src/components/chat/ChatBox.vue b/frontend/src/components/chat/ChatBox.vue index 8bfb68c..5a7cbf5 100644 --- a/frontend/src/components/chat/ChatBox.vue +++ b/frontend/src/components/chat/ChatBox.vue @@ -18,7 +18,10 @@ >
@@ -130,8 +133,8 @@ - -
+ +
@@ -214,6 +217,32 @@ const choose = useChooseStore(); const imgExt = ["png", "jpg", "jpeg", "gif", "bmp", "webp", "svg"]; const choosetype = ref(""); + const scrollbarRef = ref(null); + const innerRef = ref(null); + + function scrollToBottom() { + store.setScrollToBottom(innerRef, scrollbarRef); + } + + // 监听store中的messageSendStatus.value = true,调用scrollToBottom + watch( + () => store.messageSendStatus, + (newVal, _) => { + if (newVal) { + scrollToBottom(); + } + } + ); + + // 监听store中的messageReceiveStatus,调用scrollToBottom + watch( + () => store.messageReceiveStatus, + (newVal, _) => { + if (newVal) { + scrollToBottom(); + } + } + ); // 监听store.drawerVisible watch( diff --git a/frontend/src/components/chat/ChatMessage.vue b/frontend/src/components/chat/ChatMessage.vue index a4cf424..3686e76 100644 --- a/frontend/src/components/chat/ChatMessage.vue +++ b/frontend/src/components/chat/ChatMessage.vue @@ -6,154 +6,165 @@ :key="item.chatId" >
- - - - - -
- {{ store.userInfo.nickname }} -
-
-
-
- -
- {{ item.message }} -
+ {{ item.message }} + +
- +
+
+ + + + + +
+ {{ store.userInfo.nickname }} +
+
+
-
- -
-
+ +
{{ item.message }}
-
- -
- +
+
+ +
+
+ {{ item.message }} +
+
+ + +
+ +
+
+ +
+ {{ item.previewTimeFormat }} +
+ + +
+
-
- -
- {{ item.previewTimeFormat }} -
-
- -
- -
-
-
-
-
- - -
- -
-
- - - -
- {{ item.displayName }} -
-
-
-
- -
- {{ item.message }} + + +
+
+ + +
+
+
+ + + +
+ {{ item.displayName }} +
+
+
+
+ +
+ {{ item.message }} +
- -
-
- + +
+
+ +
+
+ {{ item.message }} +
-
- {{ item.message }} + + +
+
- - -
- + +
+ {{ item.previewTimeFormat }}
-
- -
- {{ item.previewTimeFormat }} -
- - - + + + +
-
import { useChatStore } from "@/stores/chat"; + import { System } from "@/system"; const store = useChatStore(); + const sys: any = inject("system");