From dd71ba7d9e5b4a7c680e8835abbbe66ebda0d61d Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Mon, 12 May 2025 22:18:50 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=A2=E6=9C=8D=E8=81=8A=E5=A4=A9=E5=88=97?=
 =?UTF-8?q?=E8=A1=A8=E4=BD=BF=E7=94=A8scroll-view=E5=8E=9F=E7=94=9F?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=EF=BC=8C=E7=A7=BB=E9=99=A4=20z-paging=20?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/chat/components/messageInput.vue    | 14 +++----
 pages/chat/components/messageList.vue     | 51 ++++++++++++++++-------
 pages/chat/components/messageListItem.vue |  8 ++--
 3 files changed, 48 insertions(+), 25 deletions(-)

diff --git a/pages/chat/components/messageInput.vue b/pages/chat/components/messageInput.vue
index ba4e4af..ace4727 100644
--- a/pages/chat/components/messageInput.vue
+++ b/pages/chat/components/messageInput.vue
@@ -19,13 +19,13 @@
       class="sicon-edit"
       :class="{ 'is-active': toolsMode === 'tools' }"
       @tap.stop="onTools('tools')"
-    ></text>
+    />
     <button
       v-if="message"
       class="ss-reset-button send-btn"
       @tap="sendMessage"
       :disabled="isDisabled || sending"
-      :class="{ 'disabled': isDisabled || sending }"
+      :class="{ disabled: isDisabled || sending }"
     >
       <text v-if="sending">发送中</text>
       <text v-else>发送</text>
@@ -52,18 +52,18 @@
     // 是否自动获取焦点
     autoFocus: {
       type: Boolean,
-      default: false
+      default: false,
     },
     // 最大字数限制
     maxLength: {
       type: Number,
-      default: 500
+      default: 500,
     },
     // 是否显示字数统计
     showCharCount: {
       type: Boolean,
-      default: true
-    }
+      default: true,
+    },
   });
 
   const emits = defineEmits(['update:modelValue', 'onTools', 'sendMessage']);
@@ -74,7 +74,7 @@
     },
     set(newValue) {
       emits(`update:modelValue`, newValue);
-    }
+    },
   });
 
   // 控制发送状态
diff --git a/pages/chat/components/messageList.vue b/pages/chat/components/messageList.vue
index 843c816..e021e02 100644
--- a/pages/chat/components/messageList.vue
+++ b/pages/chat/components/messageList.vue
@@ -1,19 +1,34 @@
 <template>
   <!--  聊天列表使用scroll-view原生组件，整体倒置  -->
-  <scroll-view :scroll-top="scroll.top" class="chat-scroll-view" scroll-y :refresher-enabled="false"
-               @scroll="onScroll" @scrolltolower="loadMoreHistory" style="transform: scaleY(-1);">
+  <scroll-view
+    :scroll-top="scroll.top"
+    class="chat-scroll-view"
+    scroll-y
+    :refresher-enabled="false"
+    @scroll="onScroll"
+    @scrolltolower="loadMoreHistory"
+    style="transform: scaleY(-1)"
+  >
     <!-- 消息列表容器 -->
     <view class="message-container">
       <!-- 加载更多提示 -->
-      <view v-if="isLoading" class="loading-more" style="transform: scaleY(-1);">
+      <view v-if="isLoading" class="loading-more" style="transform: scaleY(-1)">
         <text>加载中...</text>
       </view>
       <!-- 消息列表 -->
       <view class="message-list">
-        <view v-for="(item, index) in messageList" :key="item.id" class="message-item"
-              style="transform: scaleY(-1);">
+        <view
+          v-for="(item, index) in messageList"
+          :key="item.id"
+          class="message-item"
+          style="transform: scaleY(-1)"
+        >
           <!--  消息渲染  -->
-          <MessageListItem :message="item" :message-index="index" :message-list="messageList"></MessageListItem>
+          <MessageListItem
+            :message="item"
+            :message-index="index"
+            :message-list="messageList"
+          ></MessageListItem>
         </view>
       </view>
     </view>
@@ -22,7 +37,9 @@
   <!-- 底部聊天输入框 -->
   <su-fixed bottom>
     <view v-if="showTip" class="back-top ss-flex ss-row-center ss-m-b-10" @tap="scrollToTop">
-      <text class="back-top-item ss-flex ss-row-center">{{ showNewMessageTip ? '有新消息' : '回到底部' }}</text>
+      <text class="back-top-item ss-flex ss-row-center">
+        {{ showNewMessageTip ? '有新消息' : '回到底部' }}
+      </text>
     </view>
     <slot name="bottom"></slot>
   </su-fixed>
@@ -33,7 +50,7 @@
   import { onMounted, reactive, ref, computed } from 'vue';
   import KeFuApi from '@/sheep/api/promotion/kefu';
   import { isEmpty } from '@/sheep/helper/utils';
-  import { formatDate } from '@/sheep/util';
+  import { formatDate } from '@/sheep/helper/utils';
   import sheep from '@/sheep';
 
   const { safeAreaInsets } = sheep.$platform.device;
@@ -95,8 +112,8 @@
         }
 
         // 过滤掉已存在的消息
-        const historyMessages = data.filter(msg =>
-          !messageList.value.some(existing => existing.id === msg.id),
+        const historyMessages = data.filter(
+          (msg) => !messageList.value.some((existing) => existing.id === msg.id),
         );
 
         if (historyMessages.length > 0) {
@@ -187,10 +204,16 @@
     // H5环境
     window.addEventListener('resize', () => {
       // 窗口大小变化可能是由键盘引起的
-      if (document.activeElement && (document.activeElement.tagName === 'INPUT' || document.activeElement.tagName === 'TEXTAREA')) {
+      if (
+        document.activeElement &&
+        (document.activeElement.tagName === 'INPUT' ||
+          document.activeElement.tagName === 'TEXTAREA')
+      ) {
         // 估算键盘高度，实际上是窗口高度变化
         const currentHeight = window.innerHeight;
-        const viewportHeight = window.visualViewport ? window.visualViewport.height : window.innerHeight;
+        const viewportHeight = window.visualViewport
+          ? window.visualViewport.height
+          : window.innerHeight;
         const keyboardHeight = currentHeight - viewportHeight;
         setKeyboardHeight(keyboardHeight > 0 ? keyboardHeight : 0);
       } else {
@@ -213,7 +236,7 @@
     scroll.value = {
       top: 0,
       oldTop: 0,
-    }
+    };
     getMessageList();
     setupKeyboardListeners();
   });
@@ -259,7 +282,7 @@
   }
 
   .back-top {
-    .back-top-item{
+    .back-top-item {
       height: 30px;
       width: 100px;
       background-color: #fff;
diff --git a/pages/chat/components/messageListItem.vue b/pages/chat/components/messageListItem.vue
index 9521355..f3832f7 100644
--- a/pages/chat/components/messageListItem.vue
+++ b/pages/chat/components/messageListItem.vue
@@ -21,7 +21,7 @@
           {{ formatDate(message.createTime) }}
         </view>
       </view>
-      
+
       <!-- 消息体渲染管理员消息和用户消息并左右展示  -->
       <view
         v-if="message.contentType !== KeFuMessageContentTypeEnum.SYSTEM"
@@ -44,7 +44,7 @@
           "
           mode="aspectFill"
           lazy-load
-        ></image>
+        />
         <!-- 内容 -->
         <template v-if="message.contentType === KeFuMessageContentTypeEnum.TEXT">
           <view class="message-box" :class="{ admin: message.senderType === UserTypeEnum.ADMIN }">
@@ -66,7 +66,7 @@
               :height="200"
               :width="200"
               mode="aspectFill"
-            ></su-image>
+            />
           </view>
         </template>
         <template v-if="message.contentType === KeFuMessageContentTypeEnum.PRODUCT">
@@ -145,7 +145,7 @@
   // 缓存表情映射
   const emojiMap = computed(() => {
     const map = new Map();
-    emojiList.forEach(emoji => {
+    emojiList.forEach((emoji) => {
       map.set(emoji.name, emoji.file);
     });
     return map;