web端聊天室优化

2025-12-23 19:15:00 +08:00
parent a7897c67e5
commit 1fd26dcf1a
4 changed files with 324 additions and 57 deletions
--- a/urbanLifelineWeb/packages/workcase/src/views/public/ChatRoom/ChatRoomView.scss
+++ b/urbanLifelineWeb/packages/workcase/src/views/public/ChatRoom/ChatRoomView.scss
@@ -12,15 +12,135 @@ $brand-color-hover: #004488;
    font-family: 'Inter', 'Noto Sans SC', sans-serif;
 }

-// ==================== 聊天室列表侧边栏 ====================
-.room-list-sidebar {
-    width: 320px;
+// ==================== 折叠状态的侧边栏 ====================
+.sidebar-collapsed {
+    position: absolute;
+    left: 0;
+    top: 0;
    height: 100%;
+    width: 48px;
    background: #fff;
    border-right: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
-    flex-shrink: 0;
+    align-items: center;
+    padding: 16px 0;
+    z-index: 10;
+
+    .sidebar-toggle-btn {
+        padding: 8px;
+        color: #64748b;
+        background: transparent;
+        border: none;
+        border-radius: 8px;
+        cursor: pointer;
+        transition: all 0.2s;
+        margin-bottom: 8px;
+
+        &:hover {
+            color: $brand-color;
+            background: $brand-color-light;
+        }
+    }
+
+    .sidebar-icons {
+        flex: 1;
+        overflow-y: auto;
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 4px;
+        padding: 8px 0;
+    }
+
+    .sidebar-icon-btn {
+        width: 32px;
+        height: 32px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: #fff;
+        background: linear-gradient(135deg, $brand-color 0%, $brand-color-hover 100%);
+        border: none;
+        border-radius: 50%;
+        cursor: pointer;
+        transition: all 0.2s;
+        font-size: 12px;
+        font-weight: 600;
+
+        &:hover {
+            transform: scale(1.1);
+        }
+
+        &.active {
+            box-shadow: 0 0 0 2px $brand-color-light;
+        }
+    }
+
+    .expand-btn {
+        padding: 8px;
+        color: #94a3b8;
+        background: transparent;
+        border: none;
+        border-radius: 8px;
+        cursor: pointer;
+        transition: all 0.2s;
+
+        &:hover {
+            color: #64748b;
+            background: #f1f5f9;
+        }
+    }
+}
+
+// ==================== 展开时的关闭按钮 ====================
+.sidebar-close-btn {
+    position: absolute;
+    left: 256px;
+    top: 50%;
+    transform: translateY(-50%);
+    z-index: 20;
+    background: #fff;
+    border: 1px solid #e2e8f0;
+    border-left: none;
+    border-radius: 0 8px 8px 0;
+    padding: 8px;
+    cursor: pointer;
+    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.05);
+    transition: all 0.2s;
+    color: #64748b;
+
+    &:hover {
+        background: #f8fafc;
+        box-shadow: 2px 0 12px rgba(0, 0, 0, 0.1);
+    }
+}
+
+// ==================== 聊天室列表侧边栏 ====================
+.room-list-sidebar {
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 100%;
+    width: 0;
+    background: #fff;
+    border-right: 1px solid #e2e8f0;
+    z-index: 10;
+    transition: all 0.3s ease;
+    overflow: hidden;
+    box-shadow: 4px 0 16px rgba(0, 0, 0, 0.08);
+
+    &.open {
+        width: 256px;
+    }
+
+    .sidebar-inner {
+        width: 256px;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+    }

    .sidebar-header {
        height: 56px;
@@ -156,6 +276,12 @@ $brand-color-hover: #004488;
    flex-direction: column;
    height: 100%;
    background: #fff;
+    margin-left: 48px;
+    transition: margin-left 0.3s ease;
+
+    &.sidebar-open {
+        margin-left: 256px;
+    }
 }

 // ==================== 聊天室头部 ====================
--- a/urbanLifelineWeb/packages/workcase/src/views/public/ChatRoom/ChatRoomView.vue
+++ b/urbanLifelineWeb/packages/workcase/src/views/public/ChatRoom/ChatRoomView.vue
@@ -1,69 +1,102 @@
 <template>
    <div class="chat-room-container">
-        <!-- 聊天室列表侧边栏 -->
-        <aside class="room-list-sidebar">
-            <!-- 头部 -->
-            <div class="sidebar-header">
-                <span class="title">聊天室</span>
-            </div>
-
-            <!-- 搜索框 -->
-            <div class="search-box">
-                <ElInput
-                    v-model="searchText"
-                    placeholder="搜索工单号、来客姓名、电话..."
-                    :prefix-icon="Search"
-                    clearable
-                />
-            </div>
-
-            <!-- chatRoom列表 -->
-            <div class="room-list-container">
-                <div v-if="filteredRooms.length === 0" class="empty-tip">
-                    暂无聊天室
-                </div>
-                <div
-                    v-for="room in filteredRooms"
+        <!-- 折叠状态的侧边栏 -->
+        <div v-if="!isSidebarOpen" class="sidebar-collapsed">
+            <button class="sidebar-toggle-btn" @click="toggleSidebar" title="展开聊天室列表">
+                <MessageCircle :size="20" />
+            </button>
+            <div class="sidebar-icons">
+                <button
+                    v-for="room in filteredRooms.slice(0, 8)"
                    :key="room.roomId"
-                    class="room-item"
+                    @click="selectRoom(room.roomId!); toggleSidebar()"
+                    class="sidebar-icon-btn"
                    :class="{ active: currentRoomId === room.roomId }"
-                    @click="selectRoom(room.roomId!)"
+                    :title="room.roomName"
                >
-                    <!-- 头像 -->
-                    <div class="room-avatar">
-                        {{ room.guestName?.substring(0, 1) || '?' }}
-                    </div>
+                    {{ room.guestName?.substring(0, 1) || '?' }}
+                </button>
+            </div>
+            <button class="expand-btn" @click="toggleSidebar" title="展开聊天室列表">
+                <ChevronRight :size="18" />
+            </button>
+        </div>

-                    <!-- 信息 -->
-                    <div class="room-info">
-                        <div class="room-header">
-                            <div class="room-name">{{ room.roomName }}</div>
-                            <div class="room-time">{{ formatTime(room.lastMessageTime) }}</div>
+        <!-- 展开时的关闭按钮 -->
+        <button v-if="isSidebarOpen" class="sidebar-close-btn" @click="toggleSidebar">
+            <ChevronLeft :size="18" />
+        </button>
+
+        <!-- 聊天室列表侧边栏 -->
+        <aside class="room-list-sidebar" :class="{ open: isSidebarOpen }">
+            <div class="sidebar-inner">
+                <!-- 头部 -->
+                <div class="sidebar-header">
+                    <span class="title">聊天室</span>
+                </div>
+
+                <!-- 搜索框 -->
+                <div class="search-box">
+                    <ElInput
+                        v-model="searchText"
+                        placeholder="搜索工单号、来客姓名、电话..."
+                        :prefix-icon="Search"
+                        clearable
+                    />
+                </div>
+
+                <!-- chatRoom列表 -->
+                <div class="room-list-container">
+                    <div v-if="filteredRooms.length === 0" class="empty-tip">
+                        暂无聊天室
+                    </div>
+                    <div
+                        v-for="room in filteredRooms"
+                        :key="room.roomId"
+                        class="room-item"
+                        :class="{ active: currentRoomId === room.roomId }"
+                        @click="selectRoom(room.roomId!)"
+                    >
+                        <!-- 头像 -->
+                        <div class="room-avatar">
+                            {{ room.guestName?.substring(0, 1) || '?' }}
                        </div>
-                        <div class="last-message">{{ room.lastMessage || '暂无消息' }}</div>
-                    </div>

-                    <!-- 未读红点 -->
-                    <div v-if="(room.unreadCount ?? 0) > 0" class="unread-badge">
-                        {{ (room.unreadCount ?? 0) > 99 ? '99+' : room.unreadCount }}
+                        <!-- 信息 -->
+                        <div class="room-info">
+                            <div class="room-header">
+                                <div class="room-name">{{ room.roomName }}</div>
+                                <div class="room-time">{{ formatTime(room.lastMessageTime) }}</div>
+                            </div>
+                            <div class="last-message">{{ room.lastMessage || '暂无消息' }}</div>
+                        </div>
+
+                        <!-- 未读红点 -->
+                        <div v-if="(room.unreadCount ?? 0) > 0" class="unread-badge">
+                            {{ (room.unreadCount ?? 0) > 99 ? '99+' : room.unreadCount }}
+                        </div>
                    </div>
                </div>
            </div>
        </aside>

        <!-- 主聊天区域 -->
-        <main class="chat-main">
+        <main class="chat-main" :class="{ 'sidebar-open': isSidebarOpen }">
            <template v-if="currentRoomId">
                <ChatRoom
+                    ref="chatRoomRef"
                    :messages="messages"
                    :current-user-id="userId"
                    :room-name="currentRoom?.roomName"
                    :meeting-url="currentMeetingUrl"
                    :show-meeting="showMeetingIframe"
                    :file-download-url="FILE_DOWNLOAD_URL"
+                    :has-more="hasMore"
+                    :loading-more="loadingMore"
                    @send-message="handleSendMessage"
                    @start-meeting="startMeeting"
                    @download-file="downloadFile"
+                    @load-more="loadMoreMessages"
                >
                    <template #header>
                        <div class="chat-room-header">
@@ -113,10 +146,11 @@
        </ElDialog>
    </div>
 </template>
+
 <script setup lang="ts">
-import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
+import { ref, computed, onMounted, onUnmounted, watch, nextTick } from 'vue'
 import { ElButton, ElInput, ElDialog, ElMessage } from 'element-plus'
-import { Search, FileText, MessageSquare } from 'lucide-vue-next'
+import { Search, FileText, MessageSquare, MessageCircle, ChevronLeft, ChevronRight } from 'lucide-vue-next'
 import { ChatRoom } from '@/components/chatRoom'
 import WorkcaseDetail from '@/views/public/workcase/WorkcaseDetail/WorkcaseDetail.vue'
 import { workcaseChatAPI } from '@/api/workcase'
@@ -143,12 +177,26 @@ let listSubscription: any = null
 // 当前用户ID（从登录状态获取）
 const userId = ref(localStorage.getItem('userId') || '')

+// 侧边栏展开状态
+const isSidebarOpen = ref(false)
+
+// 切换侧边栏
+const toggleSidebar = () => {
+    isSidebarOpen.value = !isSidebarOpen.value
+}
+
 // 搜索文本
 const searchText = ref('')
 const userType = true //web端固定这个
 // 加载状态
 const loading = ref(false)
 const messageLoading = ref(false)
+const loadingMore = ref(false)
+
+// 分页状态
+const PAGE_SIZE = 5
+const currentPage = ref(1)
+const hasMore = ref(true)

 // 聊天室列表
 const chatRooms = ref<ChatRoomVO[]>([])
@@ -185,6 +233,9 @@ const showWorkcaseDetail = ref(false)
 const currentMeetingUrl = ref('')
 const showMeetingIframe = ref(false)

+// ChatRoom组件引用
+const chatRoomRef = ref<InstanceType<typeof ChatRoom> | null>(null)
+
 // 获取聊天室列表
 const fetchChatRooms = async () => {
    loading.value = true
@@ -196,6 +247,7 @@ const fetchChatRooms = async () => {
        if (result.success && result.pageDomain) {
            chatRooms.value = result.pageDomain.dataList || []
        }
+
    } catch (error) {
        console.error('获取聊天室列表失败:', error)
        ElMessage.error('获取聊天室列表失败')
@@ -210,17 +262,26 @@ const selectRoom = (roomId: string) => {
    loadMessages(roomId)
 }

-// 加载消息
+// 加载消息（初始加载page1，后端降序返回）
 const loadMessages = async (roomId: string) => {
    messageLoading.value = true
+    currentPage.value = 1
+    hasMore.value = true
    try {
        const result = await workcaseChatAPI.getChatMessagePage({
            filter: { roomId },
-            pageParam: { page: 1, pageSize: 100, total: 0 }
+            pageParam: { page: 1, pageSize: PAGE_SIZE }
        })
        if (result.success && result.pageDomain) {
-            messages.value = result.pageDomain.dataList || []
+            const pageInfo = result.pageDomain.pageParam
+            const actualTotalPages = pageInfo?.totalPages || 1
+            hasMore.value = actualTotalPages > currentPage.value
+            
+            // 后端降序返回，需要反转后显示（早的在上，新的在下）
+            const dataList = result.pageDomain.dataList || []
+            messages.value = [...dataList].reverse()
        }
+        // 加载完成后滚动到底部
        scrollToBottom()
    } catch (error) {
        console.error('加载消息失败:', error)
@@ -230,6 +291,39 @@ const loadMessages = async (roomId: string) => {
    }
 }

+// 加载更多历史消息（滚动到顶部触发）
+const loadMoreMessages = async () => {
+    if (!currentRoomId.value || loadingMore.value || !hasMore.value) return
+    
+    const nextPage = currentPage.value + 1
+    loadingMore.value = true
+    try {
+        const result = await workcaseChatAPI.getChatMessagePage({
+            filter: { roomId: currentRoomId.value },
+            pageParam: { page: nextPage, pageSize: PAGE_SIZE }
+        })
+        if (result.success && result.pageDomain) {
+            const pageInfo = result.pageDomain.pageParam
+            const actualTotalPages = pageInfo?.totalPages || 1
+            const dataList = result.pageDomain.dataList || []
+            
+            if (dataList.length > 0) {
+                currentPage.value = nextPage
+                hasMore.value = actualTotalPages > currentPage.value
+                // 后端降序返回，反转后插入到列表前面
+                const reversedList = [...dataList].reverse()
+                messages.value.unshift(...reversedList)
+            } else {
+                hasMore.value = false
+            }
+        }
+    } catch (error) {
+        console.error('加载更多消息失败:', error)
+    } finally {
+        loadingMore.value = false
+    }
+}
+
 // 处理发送消息（从ChatRoom组件触发）
 const handleSendMessage = async (content: string, files: File[]) => {
    if (!currentRoomId.value) return
@@ -284,9 +378,11 @@ const startMeeting = async () => {
    showMeetingIframe.value = true
 }

-// 滚动到底部
+// 滚动聊天消息到底部
 const scrollToBottom = () => {
-    // TODO: 滚动到ChatRoom组件底部
+    nextTick(() => {
+        chatRoomRef.value?.scrollToBottom()
+    })
 }

 // 格式化时间（用于聊天室列表）