perf: reduce redundant chat rerenders

src/components/chat/MessageList.vue

@@ -259,6 +259,12 @@ const contextMenu = reactive({
 });
 const IMAGE_MIN_SCALE = 0.5;
 const IMAGE_MAX_SCALE = 6;
+const messageTimeFormatter = new Intl.DateTimeFormat('zh-CN', {
+  hour: '2-digit',
+  minute: '2-digit',
+  hour12: false,
+  timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone
+});
 const imageViewer = reactive({
   visible: false,
   url: '',
@@ -332,21 +338,22 @@ const menuItems = computed(() => {
 
 function scrollToBottom() {
   nextTick(() => {
-    if (listEl.value) {
-      const scroll = () => {
-        if (listEl.value) {
-          listEl.value.scrollTop = listEl.value.scrollHeight;
-        }
-      };
-      scroll();
-      requestAnimationFrame(() => {
-        scroll();
-        requestAnimationFrame(scroll);
-      });
-    }
+    requestAnimationFrame(() => {
+      if (listEl.value) {
+        listEl.value.scrollTop = listEl.value.scrollHeight;
+      }
+    });
   });
 }
 
+function isNearBottom() {
+  const element = listEl.value;
+  if (!element) {
+    return true;
+  }
+  return element.scrollHeight - element.scrollTop - element.clientHeight < 120;
+}
+
 function scrollToMessage(messageId) {
   nextTick(() => {
     if (!listEl.value || !messageId) {
@@ -361,8 +368,12 @@ function scrollToMessage(messageId) {
 }
 
 watch(
-  () => props.messages.map(message => `${message.id}:${message.status}:${message.deliveryStatus || ''}:${message.messageUid || ''}:${message.recalled ? '1' : ''}`).join('|'),
-  scrollToBottom,
+  () => props.messages.map(messageIdentity).join('|'),
+  (nextKeys, previousKeys) => {
+    if (!previousKeys || (nextKeys !== previousKeys && isNearBottom())) {
+      scrollToBottom();
+    }
+  },
   { immediate: true }
 );
 
@@ -762,12 +773,7 @@ function chooseMenuAction(action) {
 }
 
 function formatTime(timestamp) {
-  return new Intl.DateTimeFormat('zh-CN', {
-    hour: '2-digit',
-    minute: '2-digit',
-    hour12: false,
-    timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone
-  }).format(timestamp);
+  return messageTimeFormatter.format(timestamp);
 }
 
 function deliveryState(message) {