默认进入采购清单页

server/public/css/style.css

@@ -56,8 +56,6 @@ body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-
 .send-btn { background: #3b82f6; border: none; color: #fff; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }
 .send-btn svg { width: 18px; height: 18px; fill: #fff; }
 
-.purchase-panel-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #fff; z-index: 10; display: flex; flex-direction: column; }
-.purchase-panel-header { background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%); color: #fff; padding: 0 16px; display: flex; justify-content: space-between; align-items: center; min-height: 48px; }
 .purchase-panel-body { flex: 1; overflow-y: auto; padding: 12px; }
 .purchase-month-group { margin-bottom: 20px; }
 .purchase-month-header { background: #f5f5f5; font-size: 16px; font-weight: 600; padding: 10px 8px; border-radius: 4px; display: flex; justify-content: space-between; }

server/public/index.html

@@ -54,17 +54,28 @@
                 </div>
             </div>
 
-            <!-- 聊天窗口 -->
-            <div id="chat-page" class="chat-window hidden">
-                <div class="chat-header">
+            <!-- 采购清单页 -->
+            <div id="purchase-page" class="hidden" style="display:flex; flex-direction:column; height:100%;">
+                <div class="header">
                     <button class="icon-btn back-btn" onclick="showList()">
                         <svg viewBox="0 0 24 24"><polyline points="15 18 9 12 15 6"></polyline></svg>
                     </button>
-                    <span class="chat-title" id="current-chat-name"></span>
-                    <button class="icon-btn" onclick="openPurchasePanel()" title="采购清单">
-                        <svg viewBox="0 0 24 24"><line x1="8" y1="6" x2="21" y2="6"></line><line x1="8" y1="12" x2="21" y2="12"></line><line x1="8" y1="18" x2="21" y2="18"></line><line x1="3" y1="6" x2="3.01" y2="6"></line><line x1="3" y1="12" x2="3.01" y2="12"></line><line x1="3" y1="18" x2="3.01" y2="18"></line></svg>
+                    <span class="chat-title">采购清单</span>
+                    <button class="icon-btn" onclick="openChatFromPurchase()" title="聊天">
+                        <svg viewBox="0 0 24 24"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg>
                     </button>
                 </div>
+                <div class="purchase-panel-body" id="purchase-panel-body"></div>
+            </div>
+
+            <!-- 聊天窗口 -->
+            <div id="chat-page" class="chat-window hidden">
+                <div class="chat-header">
+                    <button class="icon-btn back-btn" onclick="backToPurchase()">
+                        <svg viewBox="0 0 24 24"><polyline points="15 18 9 12 15 6"></polyline></svg>
+                    </button>
+                    <span class="chat-title" id="current-chat-name"></span>
+                </div>
                 <div class="messages" id="messages-container"></div>
                 <div class="input-area">
                     <label class="file-upload-btn" title="上传图片">
@@ -76,15 +87,6 @@
                         <svg viewBox="0 0 24 24"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
                     </button>
                 </div>
-                <div id="purchase-panel-overlay" class="purchase-panel-overlay hidden">
-                    <div class="purchase-panel-header">
-                        <span>采购清单</span>
-                        <button class="icon-btn close-btn" onclick="closePurchasePanel()">
-                            <svg viewBox="0 0 24 24"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
-                        </button>
-                    </div>
-                    <div class="purchase-panel-body" id="purchase-panel-body"></div>
-                </div>
             </div>
         </div>
 

server/public/js/purchases.js

@@ -46,14 +46,6 @@ function formatMonth(dateStr) {
   return dateStr.substring(0,7);
 }
 
-function openPurchasePanel() {
-  document.getElementById('purchase-panel-body').innerHTML = '<p style="text-align:center;color:#888;">加载中...</p>';
-  document.getElementById('purchase-panel-overlay').classList.remove('hidden');
-  loadPurchases();
-}
-
-function closePurchasePanel() { document.getElementById('purchase-panel-overlay').classList.add('hidden'); }
-
 async function openDetail(pid) {
   const token = Store.getToken();
   const res = await fetch('/api/purchases/' + pid, { headers: { 'Authorization': `Bearer ${token}` } });
@@ -89,7 +81,7 @@ async function openSummary() {
   if (summary.length === 0) html = '<p>暂无采购记录</p>';
   else {
     summary.forEach(s => {
-      html += `<div class="summary-card" onclick="event.stopPropagation(); closeDetailModal(); openChat('${s.room_id}', true)" style="margin:8px 0;"><h4>${escapeHtml(s.room_name)}</h4><p>${s.purchase_count} 条，合计 ¥${s.total_amount}</p></div>`;
+      html += `<div class="summary-card" onclick="event.stopPropagation(); closeDetailModal(); openPurchasePage('${s.room_id}')" style="margin:8px 0;"><h4>${escapeHtml(s.room_name)}</h4><p>${s.purchase_count} 条，合计 ¥${s.total_amount}</p></div>`;
     });
   }
   document.getElementById('detail-title').textContent = '采购汇总';
@@ -151,32 +143,14 @@ async function deleteRoom() {
 // 滑动手势
 function initSwipeGestures() {
   const chatPage = document.getElementById('chat-page');
-  const purchaseOverlay = document.getElementById('purchase-panel-overlay');
-  let startX = 0, startY = 0;
+  let startX = 0;
 
-  function handleTouchStart(e) { startX = e.touches[0].clientX; startY = e.touches[0].clientY; }
-
-  function handleTouchEnd(e, target) {
+  chatPage.addEventListener('touchstart', (e) => { startX = e.touches[0].clientX; }, { passive: true });
+  chatPage.addEventListener('touchend', (e) => {
     if (!startX) return;
     const endX = e.changedTouches[0].clientX;
-    const endY = e.changedTouches[0].clientY;
     const diffX = endX - startX;
-    const diffY = endY - startY;
-    if (Math.abs(diffX) > Math.abs(diffY) && Math.abs(diffX) > 50) {
-      if (target === chatPage && !purchaseOverlay.classList.contains('hidden')) {
-        if (Math.abs(diffX) > 30) closePurchasePanel();
-      } else if (target === chatPage) {
-        if (diffX > 30) showList();
-        else if (diffX < -30) openPurchasePanel();
-      } else if (target === purchaseOverlay) {
-        if (Math.abs(diffX) > 30) closePurchasePanel();
-      }
-    }
-    startX = 0; startY = 0;
-  }
-
-  chatPage.addEventListener('touchstart', handleTouchStart, { passive: true });
-  chatPage.addEventListener('touchend', (e) => handleTouchEnd(e, chatPage), { passive: true });
-  purchaseOverlay.addEventListener('touchstart', handleTouchStart, { passive: true });
-  purchaseOverlay.addEventListener('touchend', (e) => handleTouchEnd(e, purchaseOverlay), { passive: true });
+    if (diffX > 50) backToPurchase();
+    startX = 0;
+  }, { passive: true });
 }

server/public/js/ws.js

@@ -80,13 +80,13 @@ function renderChatList() {
     }
     return `
       <div class="chat-item" data-room-id="${room.id}">
-        <div class="avatar" onclick="openChat('${room.id}')">${escapeHtml(room.name.charAt(0))}</div>
-        <div class="chat-info" onclick="openChat('${room.id}')">
+        <div class="avatar" onclick="openPurchasePage('${room.id}')">${escapeHtml(room.name.charAt(0))}</div>
+        <div class="chat-info" onclick="openPurchasePage('${room.id}')">
           <div class="chat-name">${escapeHtml(room.name)}</div>
           <div class="last-msg">${escapeHtml(lastMsg)}</div>
         </div>
         <div class="chat-right">
-          <div class="chat-time" onclick="openChat('${room.id}')">${lastTime}</div>
+          <div class="chat-time" onclick="openPurchasePage('${room.id}')">${lastTime}</div>
           ${isAdmin ? `<div class="room-actions">
             ${whiteListHtml}
             <button class="edit-room-btn" onclick="event.stopPropagation(); openManageRoom('${room.id}')" title="编辑群聊">
@@ -98,15 +98,35 @@ function renderChatList() {
   }).join('');
 }
 
-async function openChat(roomId, autoOpenPurchase = false) {
+async function openPurchasePage(roomId) {
+  Store.currentRoom = roomId;
+  document.getElementById('list-page').classList.add('hidden');
+  document.getElementById('chat-page').classList.add('hidden');
+  document.getElementById('purchase-page').classList.remove('hidden');
+  document.getElementById('purchase-panel-body').innerHTML = '<p style="text-align:center;color:#888;">加载中...</p>';
+  loadPurchases();
+}
+
+async function openChatFromPurchase() {
+  if (!Store.currentRoom) return;
+  openChat(Store.currentRoom);
+}
+
+function backToPurchase() {
+  clearTempBubble();
+  document.getElementById('chat-page').classList.add('hidden');
+  document.getElementById('purchase-page').classList.remove('hidden');
+  loadPurchases();
+}
+
+async function openChat(roomId) {
   Store.currentRoom = roomId;
   clearTempBubble();
   document.getElementById('list-page').classList.add('hidden');
+  document.getElementById('purchase-page').classList.add('hidden');
   document.getElementById('chat-page').classList.remove('hidden');
   const room = Store.rooms.find(r => r.id === roomId);
   document.getElementById('current-chat-name').textContent = room?.name || '';
-  document.getElementById('purchase-panel-overlay').classList.add('hidden');
-  if (autoOpenPurchase) setTimeout(() => openPurchasePanel(), 200);
   const token = Store.getToken();
   const res = await fetch('/api/rooms/' + roomId + '/messages', { headers: { 'Authorization': `Bearer ${token}` } });
   const msgs = await res.json();
@@ -117,6 +137,7 @@ async function openChat(roomId, autoOpenPurchase = false) {
 function showList() {
   clearTempBubble();
   document.getElementById('chat-page').classList.add('hidden');
+  document.getElementById('purchase-page').classList.add('hidden');
   document.getElementById('list-page').classList.remove('hidden');
   Store.currentRoom = null;
   loadRooms();