加入双击放大功能

server/public/index.html

@@ -5,45 +5,49 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
     <title>小财记账</title>
     <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+    <meta name="theme-color" content="#1e3c72">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
     <style>
         * { margin: 0; padding: 0; box-sizing: border-box; }
         body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #f5f5f5; height: 100vh; display: flex; justify-content: center; align-items: center; }
         .app { width: 100%; max-width: 420px; height: 100vh; background: #fff; display: flex; flex-direction: column; box-shadow: 0 0 20px rgba(0,0,0,0.1); position: relative; }
         .hidden { display: none !important; }
 
-        .header { background: #1a1a1a; color: #fff; padding: 12px 16px; display: flex; justify-content: space-between; align-items: center; }
+        .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; }
         .header-left { display: flex; align-items: center; gap: 8px; }
         .header-left h2 { font-size: 18px; font-weight: 500; }
         .icon-btn { background: none; border: none; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 4px; border-radius: 50%; }
         .icon-btn svg { width: 22px; height: 22px; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
 
+        #create-room-btn { visibility: hidden; }
+        #create-room-btn.visible { visibility: visible; }
+
         .chat-list { flex: 1; overflow-y: auto; padding-bottom: 8px; }
-        .chat-item { padding: 14px 16px; border-bottom: 1px solid #f0f0f0; display: flex; align-items: center; cursor: pointer; position: relative; }
+        .chat-item { padding: 14px 16px; border-bottom: 1px solid #f0f0f0; display: flex; align-items: center; cursor: pointer; }
         .chat-item:active { background: #f9f9f9; }
         .avatar { width: 44px; height: 44px; border-radius: 50%; background: #e0e0e0; margin-right: 12px; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 600; color: #555; flex-shrink: 0; }
         .chat-info { flex: 1; min-width: 0; }
         .chat-name { font-size: 16px; font-weight: 500; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
         .last-msg { font-size: 14px; color: #888; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-        .chat-time { font-size: 12px; color: #aaa; margin-left: 8px; white-space: nowrap; }
+        .chat-right { display: flex; flex-direction: column; align-items: flex-end; margin-left: 8px; flex-shrink: 0; min-width: 56px; }
-
+        .chat-time { font-size: 12px; color: #aaa; white-space: nowrap; }
-        .edit-room-btn {
+        .room-actions { display: flex; gap: 4px; margin-top: 4px; }
-            position: absolute; right: 40px; top: 50%; transform: translateY(-50%);
+        .edit-room-btn { background: none; border: none; cursor: pointer; display: flex; align-items: center; padding: 2px; }
-            background: none; border: none; cursor: pointer; display: flex; align-items: center; padding: 8px;
+        .edit-room-btn svg { width: 16px; height: 16px; stroke: #888; fill: none; stroke-width: 2; }
-        }
-        .edit-room-btn svg { width: 18px; height: 18px; stroke: #888; fill: none; stroke-width: 2; }
 
         .summary-card { background: #f0f7ff; margin: 8px; border-radius: 12px; padding: 14px 16px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
         .summary-card h4 { font-size: 16px; font-weight: 500; }
         .summary-card .summary-preview { font-size: 14px; color: #555; }
 
         .chat-window { display: flex; flex-direction: column; height: 100%; }
-        .chat-header { background: #1a1a1a; color: #fff; padding: 12px 16px; display: flex; align-items: center; }
+        .chat-header { background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%); color: #fff; padding: 0 16px; display: flex; align-items: center; min-height: 48px; }
         .chat-header .back-btn { margin-right: 12px; }
         .chat-header .chat-title { font-size: 17px; font-weight: 500; flex: 1; }
         .messages { flex: 1; overflow-y: auto; padding: 12px; background: #fafafa; }
         .msg { margin-bottom: 12px; display: flex; flex-direction: column; }
         .msg.me { align-items: flex-end; }
-        .msg-bubble { max-width: 75%; padding: 10px 14px; border-radius: 20px; font-size: 16px; line-height: 1.5; word-wrap: break-word; overflow-wrap: break-word; }
+        .msg-bubble { max-width: 75%; padding: 10px 14px; border-radius: 20px; font-size: 16px; line-height: 1.5; word-wrap: break-word; overflow-wrap: break-word; cursor: pointer; }
         .msg.me .msg-bubble { background: #d1f0d1; border-bottom-right-radius: 4px; }
         .msg.other .msg-bubble { background: #fff; border: 1px solid #eee; border-bottom-left-radius: 4px; }
         .msg-user { font-size: 12px; color: #888; margin-bottom: 2px; margin-left: 4px; }
@@ -64,7 +68,7 @@
         .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: #1a1a1a; color: #fff; padding: 12px 16px; display: flex; justify-content: space-between; align-items: center; }
+        .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; }
@@ -92,6 +96,21 @@
         .attachments { display: flex; flex-wrap: wrap; margin: 8px 0; }
         .msg-img { max-width: 200px; border-radius: 8px; margin: 4px 0; }
         .msg-placeholder .msg-bubble { opacity: 0.6; }
+
+        .version { text-align: center; font-size: 12px; color: #aaa; margin-top: 16px; }
+
+        /* 全屏预览弹窗 */
+        .fullscreen-overlay {
+            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
+            background: rgba(0,0,0,0.9); display: flex; align-items: center; justify-content: center;
+            z-index: 200; cursor: pointer;
+        }
+        .fullscreen-overlay img { max-width: 100%; max-height: 100%; object-fit: contain; }
+        .fullscreen-overlay .fullscreen-text {
+            background: #fff; padding: 20px; border-radius: 8px; max-width: 90%; max-height: 80%;
+            overflow: auto; font-size: 16px; line-height: 1.5; color: #333;
+        }
+        .fullscreen-overlay .fullscreen-text img { max-width: 200px; border-radius: 8px; margin: 4px 0; }
     </style>
 </head>
 <body>
@@ -104,6 +123,7 @@
                 <input type="password" id="login-pass" placeholder="密码">
                 <button class="primary-btn" onclick="login()" style="width:100%;">登录</button>
                 <p id="login-error" style="color:red; margin-top:8px;"></p>
+                <div class="version">v2.2</div>
             </div>
         </div>
 
@@ -118,7 +138,7 @@
                         </svg>
                         <h2>小财记账</h2>
                     </div>
-                    <button class="icon-btn" id="create-room-btn" style="display:none;" onclick="openCreateRoom()" title="新建群聊">
+                    <button class="icon-btn" id="create-room-btn" onclick="openCreateRoom()" title="新建群聊">
                         <svg viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
                     </button>
                 </div>
@@ -288,12 +308,14 @@
             messageCache = msgs || [];
             messagesContainer.innerHTML = messageCache.map(renderMessageHTML).join('');
             scrollToBottom();
+            bindMessageEvents();
         }
 
         function appendMessage(msg) {
             messageCache.push(msg);
             messagesContainer.insertAdjacentHTML('beforeend', renderMessageHTML(msg));
             scrollToBottom();
+            bindMessageEvents();
         }
 
         function replaceMessage(msgId, newMsg) {
@@ -305,11 +327,52 @@
             } else {
                 appendMessage(newMsg);
             }
+            bindMessageEvents();
         }
 
         function scrollToBottom() { messagesContainer.scrollTop = messagesContainer.scrollHeight; }
 
-        // WebSocket
+        // 双击全屏相关
+        function bindMessageEvents() {
+            // 图片双击全屏
+            document.querySelectorAll('.msg-img').forEach(img => {
+                img.removeEventListener('dblclick', onImageDblClick);
+                img.addEventListener('dblclick', onImageDblClick);
+            });
+            // 气泡双击全屏
+            document.querySelectorAll('.msg-bubble').forEach(bubble => {
+                bubble.removeEventListener('dblclick', onBubbleDblClick);
+                bubble.addEventListener('dblclick', onBubbleDblClick);
+            });
+        }
+
+        function onImageDblClick(e) {
+            e.stopPropagation();
+            const imgSrc = e.target.src;
+            const overlay = document.createElement('div');
+            overlay.className = 'fullscreen-overlay';
+            overlay.innerHTML = `<img src="${imgSrc}" alt="">`;
+            overlay.addEventListener('click', () => overlay.remove());
+            document.body.appendChild(overlay);
+        }
+
+        function onBubbleDblClick(e) {
+            e.stopPropagation();
+            const bubble = e.currentTarget;
+            // 克隆气泡内容，去掉事件
+            const clone = bubble.cloneNode(true);
+            // 移除可能有的链接行为
+            const overlay = document.createElement('div');
+            overlay.className = 'fullscreen-overlay';
+            const container = document.createElement('div');
+            container.className = 'fullscreen-text';
+            container.innerHTML = clone.innerHTML;
+            overlay.appendChild(container);
+            overlay.addEventListener('click', () => overlay.remove());
+            document.body.appendChild(overlay);
+        }
+
+        // WebSocket 重连
         let wsReconnectTimer = null;
         let reconnectAttempts = 0;
         const MAX_RECONNECT_DELAY = 30000;
@@ -381,11 +444,14 @@
                         document.getElementById('login-page').classList.add('hidden');
                         document.getElementById('main-page').classList.remove('hidden');
                         if (localStorage.getItem('isAdmin') === 'true') {
-                            document.getElementById('create-room-btn').style.display = 'flex';
+                            document.getElementById('create-room-btn').classList.add('visible');
+                        } else {
+                            document.getElementById('create-room-btn').classList.remove('visible');
                         }
                         initWebSocket();
                         loadRooms();
                         updateSummaryPreview();
+                        initSwipeGestures();
                         return;
                     }
                 } catch(e) {}
@@ -407,16 +473,68 @@
                 saveAuth(data);
                 document.getElementById('login-page').classList.add('hidden');
                 document.getElementById('main-page').classList.remove('hidden');
-                if (data.isAdmin) document.getElementById('create-room-btn').style.display = 'flex';
+                if (data.isAdmin) {
+                    document.getElementById('create-room-btn').classList.add('visible');
+                } else {
+                    document.getElementById('create-room-btn').classList.remove('visible');
+                }
                 initWebSocket();
                 loadRooms();
                 updateSummaryPreview();
+                initSwipeGestures();
             } else {
                 const err = await res.json();
                 document.getElementById('login-error').textContent = err.error || '登录失败';
             }
         }
 
+        // 修正滑动手势方向
+        function initSwipeGestures() {
+            const chatPage = document.getElementById('chat-page');
+            const purchaseOverlay = document.getElementById('purchase-panel-overlay');
+            let startX = 0;
+            let startY = 0;
+
+            function handleTouchStart(e) {
+                startX = e.touches[0].clientX;
+                startY = e.touches[0].clientY;
+            }
+
+            function handleTouchEnd(e, target) {
+                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 });
+        }
+
         async function loadRooms() {
             const token = getToken();
             const res = await fetch(API + '/api/rooms', { headers: { 'Authorization': `Bearer ${token}` } });
@@ -438,11 +556,14 @@
                             <div class="chat-name">${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>
-                        ${isAdmin ? `
+                            ${isAdmin ? `<div class="room-actions">
                                 <button class="edit-room-btn" onclick="event.stopPropagation(); openManageRoom('${room.id}')" title="编辑群聊">
                                     <svg viewBox="0 0 24 24"><path d="M12 20h9"></path><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path></svg>
-                        </button>` : ''}
+                                </button>
+                            </div>` : ''}
+                        </div>
                     </div>`;
             }).join('');
         }
@@ -622,7 +743,6 @@
             loadRooms();
         }
 
-        // 群聊管理
         function openManageRoom(roomId) {
             const room = rooms.find(r => r.id === roomId);
             if (!room) return;