web端聊天室优化

urbanLifelineWeb/packages/workcase/src/components/chatRoom/chatRoom/ChatRoom.scss

@@ -10,6 +10,14 @@ $brand-color-hover: #004488;
     background: #fff;
 }
 
+// ==================== 加载更多 ====================
+.loading-more {
+    text-align: center;
+    padding: 12px;
+    font-size: 13px;
+    color: #94a3b8;
+}
+
 // ==================== 聊天室头部 ====================
 .chat-header {
     height: 64px;
@@ -96,12 +104,28 @@ $brand-color-hover: #004488;
         border-radius: 50%;
         flex-shrink: 0;
         overflow: hidden;
+        background: $brand-color-light;
+        display: flex;
+        align-items: center;
+        justify-content: center;
 
         img {
             width: 100%;
             height: 100%;
             object-fit: cover;
         }
+
+        .avatar-text {
+            font-size: 14px;
+            font-weight: 600;
+            color: $brand-color;
+        }
+    }
+
+    .sender-name {
+        font-size: 12px;
+        color: #64748b;
+        margin-bottom: 4px;
     }
 
     .message-content-wrapper {

urbanLifelineWeb/packages/workcase/src/components/chatRoom/chatRoom/ChatRoom.vue

@@ -10,7 +10,11 @@
         </header>
 
         <!-- 消息容器 -->
-        <div ref="messagesRef" class="messages-container">
+        <div ref="messagesRef" class="messages-container" @scroll="handleScroll">
+            <!-- 加载更多提示 -->
+            <div v-if="loadingMore" class="loading-more">加载中...</div>
+            <div v-else-if="!hasMore" class="loading-more">没有更多消息了</div>
+
             <!-- Jitsi Meet会议iframe -->
             <div v-if="showMeeting && meetingUrl" class="meeting-container">
                 <IframeView :src="meetingUrl" />
@@ -24,9 +28,13 @@
                     class="message-row"
                     :class="message.senderId === currentUserId ? 'is-me' : 'other'"
                 >
-                    <!-- 头像 -->
-                    <div class="message-avatar">
-                        <img :src="FILE_DOWNLOAD_URL + message.senderAvatar" />
+                    <div>
+                        <!-- 头像 -->
+                        <div class="message-avatar">
+                            <img v-if="message.senderAvatar" :src="FILE_DOWNLOAD_URL + message.senderAvatar" />
+                            <span v-else class="avatar-text">{{ message.senderName?.charAt(0) || '?' }}</span>
+                        </div>
+                        <div class="sender-name">{{ message.senderName || '未知用户' }}</div>
                     </div>
 
                     <!-- 消息内容 -->
@@ -126,12 +134,16 @@ interface Props {
     meetingUrl?: string
     showMeeting?: boolean
     fileDownloadUrl?: string
+    hasMore?: boolean
+    loadingMore?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
     roomName: '聊天室',
     showMeeting: false,
-    fileDownloadUrl: ''
+    fileDownloadUrl: '',
+    hasMore: true,
+    loadingMore: false
 })
 
 const FILE_DOWNLOAD_URL = props.fileDownloadUrl
@@ -140,8 +152,17 @@ const emit = defineEmits<{
     'send-message': [content: string, files: File[]]
     'start-meeting': []
     'download-file': [fileId: string]
+    'load-more': []
 }>()
 
+// 滚动到顶部加载更多
+const handleScroll = (e: Event) => {
+    const target = e.target as HTMLElement
+    if (target.scrollTop < 50 && props.hasMore && !props.loadingMore) {
+        emit('load-more')
+    }
+}
+
 defineSlots<{
     header?: () => any
     'action-area'?: () => any