feat: 长按对话弹出操作菜单 - 重命名/分享/置顶/删除

www/app.js

@@ -83,18 +83,38 @@ function showConversationList() {
         <div class="conversation-list" id="conversationList">
           ${conversations.length === 0 
             ? '<div class="empty-list">暂无对话记录</div>'
-            : conversations.map(conv => `
+            : sortConversations().map(conv => `
-              <div class="conversation-item" data-id="${conv.id}">
+              <div class="conversation-item ${conv.is_pinned ? 'pinned' : ''}" data-id="${conv.id}">
+                ${conv.is_pinned ? '<span class="pin-icon">📌</span>' : ''}
                 <div class="conv-title">${escapeHtml(conv.title)}</div>
                 <div class="conv-meta">${conv.messages.length} 条消息 · ${formatTime(conv.updatedAt)}</div>
-                <button class="conv-delete-btn" data-id="${conv.id}" title="删除对话">
-                  <svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/></svg>
-                </button>
               </div>
             `).join('')
           }
         </div>
       </div>
+      
+      <!-- 操作菜单 -->
+      <div class="action-menu" id="actionMenu">
+        <div class="action-menu-content">
+          <div class="action-menu-item" data-action="rename">
+            <svg viewBox="0 0 24 24" width="18" height="18"><path fill="currentColor" d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>
+            <span>重命名</span>
+          </div>
+          <div class="action-menu-item" data-action="share">
+            <svg viewBox="0 0 24 24" width="18" height="18"><path fill="currentColor" d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.35 2.92 3 2.92s3-1.31 3-2.92c0-1.61-1.35-2.92-3-2.92z"/></svg>
+            <span>分享</span>
+          </div>
+          <div class="action-menu-item" data-action="pin">
+            <svg viewBox="0 0 24 24" width="18" height="18"><path fill="currentColor" d="M16 12V4h1V2H7v2h1v8l-2 2v2h5.2v6h1.6v-6H18v-2l-2-2z"/></svg>
+            <span id="pinText">置顶</span>
+          </div>
+          <div class="action-menu-item delete-action" data-action="delete">
+            <svg viewBox="0 0 24 24" width="18" height="18"><path fill="currentColor" d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/></svg>
+            <span>删除</span>
+          </div>
+        </div>
+      </div>
     </div>
   `;
   
@@ -107,21 +127,201 @@ function showConversationList() {
   }
   
   const conversationList = document.getElementById('conversationList');
+  const actionMenu = document.getElementById('actionMenu');
+  let longPressTimer = null;
+  let currentActionConvId = null;
+  
   if (conversationList) {
+    // 点击事件
     conversationList.addEventListener('click', (e) => {
       const item = e.target.closest('.conversation-item');
-      const deleteBtn = e.target.closest('.conv-delete-btn');
       
-      if (deleteBtn) {
+      if (item) {
-        e.stopPropagation();
-        const id = deleteBtn.getAttribute('data-id');
-        deleteConversation(id);
-      } else if (item) {
         const id = item.getAttribute('data-id');
         openConversation(id);
       }
     });
+    
+    // 长按事件
+    conversationList.addEventListener('touchstart', (e) => {
+      const item = e.target.closest('.conversation-item');
+      if (item) {
+        longPressTimer = setTimeout(() => {
+          currentActionConvId = item.getAttribute('data-id');
+          showActionMenu(currentActionConvId);
+        }, 500);  // 500ms长按
       }
+    });
+    
+    conversationList.addEventListener('touchend', () => {
+      if (longPressTimer) {
+        clearTimeout(longPressTimer);
+        longPressTimer = null;
+      }
+    });
+    
+    conversationList.addEventListener('touchmove', () => {
+      if (longPressTimer) {
+        clearTimeout(longPressTimer);
+        longPressTimer = null;
+      }
+    });
+    
+    // 鼠标长按（PC端）
+    conversationList.addEventListener('mousedown', (e) => {
+      const item = e.target.closest('.conversation-item');
+      if (item) {
+        longPressTimer = setTimeout(() => {
+          currentActionConvId = item.getAttribute('data-id');
+          showActionMenu(currentActionConvId);
+        }, 500);
+      }
+    });
+    
+    conversationList.addEventListener('mouseup', () => {
+      if (longPressTimer) {
+        clearTimeout(longPressTimer);
+        longPressTimer = null;
+      }
+    });
+    
+    conversationList.addEventListener('mouseleave', () => {
+      if (longPressTimer) {
+        clearTimeout(longPressTimer);
+        longPressTimer = null;
+      }
+    });
+  }
+  
+  // 操作菜单事件
+  if (actionMenu) {
+    actionMenu.addEventListener('click', (e) => {
+      const item = e.target.closest('.action-menu-item');
+      if (item && currentActionConvId) {
+        const action = item.getAttribute('data-action');
+        handleActionMenuAction(action, currentActionConvId);
+        hideActionMenu();
+      }
+    });
+    
+    // 点击其他地方关闭菜单
+    document.addEventListener('click', (e) => {
+      if (actionMenu.classList.contains('show') && !actionMenu.contains(e.target)) {
+        hideActionMenu();
+      }
+    });
+  }
+}
+
+// 排序对话（置顶在前）
+function sortConversations() {
+  return [...conversations].sort((a, b) => {
+    // 置顶优先
+    if (a.is_pinned && !b.is_pinned) return -1;
+    if (!a.is_pinned && b.is_pinned) return 1;
+    // 然后按更新时间
+    return b.updatedAt - a.updatedAt;
+  });
+}
+
+// 显示操作菜单
+function showActionMenu(convId) {
+  const actionMenu = document.getElementById('actionMenu');
+  const conv = conversations.find(c => c.id === convId);
+  if (!actionMenu || !conv) return;
+  
+  // 更新置顶按钮文字
+  const pinText = document.getElementById('pinText');
+  if (pinText) {
+    pinText.textContent = conv.is_pinned ? '取消置顶' : '置顶';
+  }
+  
+  // 显示菜单
+  actionMenu.classList.add('show');
+}
+
+// 隐藏操作菜单
+function hideActionMenu() {
+  const actionMenu = document.getElementById('actionMenu');
+  if (actionMenu) {
+    actionMenu.classList.remove('show');
+  }
+}
+
+// 处理操作菜单动作
+function handleActionMenuAction(action, convId) {
+  const conv = conversations.find(c => c.id === convId);
+  if (!conv) return;
+  
+  switch (action) {
+    case 'rename':
+      renameConversation(convId);
+      break;
+    case 'share':
+      shareConversation(convId);
+      break;
+    case 'pin':
+      togglePinConversation(convId);
+      break;
+    case 'delete':
+      deleteConversation(convId);
+      break;
+  }
+}
+
+// 重命名对话
+function renameConversation(convId) {
+  const conv = conversations.find(c => c.id === convId);
+  if (!conv) return;
+  
+  const newTitle = prompt('请输入新的对话标题:', conv.title);
+  if (newTitle && newTitle.trim() && newTitle !== conv.title) {
+    conv.title = newTitle.trim();
+    conv.updatedAt = Date.now();
+    saveConversations();
+    showConversationList();
+    showToast('已重命名');
+  }
+}
+
+// 分享对话
+function shareConversation(convId) {
+  const conv = conversations.find(c => c.id === convId);
+  if (!conv) return;
+  
+  // 构建分享内容
+  const shareContent = `【${conv.title}】\n\n${conv.messages.map(m => 
+    `${m.role === 'user' ? '👤 用户' : '🤖 AI'}: ${m.content}`
+  ).join('\n\n')}`;
+  
+  // 复制到剪贴板
+  try {
+    const textarea = document.createElement('textarea');
+    textarea.value = shareContent;
+    textarea.style.position = 'fixed';
+    textarea.style.top = '0';
+    textarea.style.left = '0';
+    textarea.style.opacity = '0';
+    document.body.appendChild(textarea);
+    textarea.select();
+    document.execCommand('copy');
+    document.body.removeChild(textarea);
+    showToast('对话已复制到剪贴板');
+  } catch (err) {
+    showToast('分享失败');
+  }
+}
+
+// 置顶/取消置顶对话
+function togglePinConversation(convId) {
+  const conv = conversations.find(c => c.id === convId);
+  if (!conv) return;
+  
+  conv.is_pinned = !conv.is_pinned;
+  conv.updatedAt = Date.now();
+  saveConversations();
+  showConversationList();
+  showToast(conv.is_pinned ? '已置顶' : '已取消置顶');
 }
 
 // 创建新对话

www/index.html

@@ -8,12 +8,12 @@
   <meta http-equiv="Pragma" content="no-cache">
   <meta http-equiv="Expires" content="0">
   <title>AI助手</title>
-  <link rel="stylesheet" href="style.css?v=2.3.1">
+  <link rel="stylesheet" href="style.css?v=2.4.0">
   <link rel="manifest" href="manifest.json">
 </head>
 <body>
   <div id="app"></div>
-  <script src="marked.min.js?v=2.3.1"></script>
+  <script src="marked.min.js?v=2.4.0"></script>
-  <script src="app.js?v=2.3.1"></script>
+  <script src="app.js?v=2.4.0"></script>
 </body>
 </html>

www/style.css

@@ -152,7 +152,7 @@ body {
 
 .conversation-item {
   display: flex;
-  flex-direction: column;
+  align-items: center;
   padding: 12px 16px;
   background: white;
   border: 1px solid var(--border-color);
@@ -160,6 +160,12 @@ body {
   cursor: pointer;
   transition: all 0.2s;
   position: relative;
+  gap: 8px;
+}
+
+.conversation-item.pinned {
+  border-color: var(--primary);
+  background: rgba(102, 126, 234, 0.08);
 }
 
 .conversation-item:hover {
@@ -171,43 +177,90 @@ body {
   background: rgba(102, 126, 234, 0.1);
 }
 
+.pin-icon {
+  font-size: 14px;
+}
+
 .conv-title {
   font-size: 16px;
   font-weight: 500;
   color: var(--text-color);
-  margin-bottom: 4px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  flex: 1;
 }
 
 .conv-meta {
   font-size: 12px;
   color: var(--text-light);
+  white-space: nowrap;
 }
 
-.conv-delete-btn {
+/* 操作菜单 */
-  position: absolute;
+.action-menu {
-  right: 12px;
+  position: fixed;
-  top: 50%;
+  bottom: 0;
-  transform: translateY(-50%);
+  left: 0;
+  right: 0;
   background: transparent;
-  border: none;
+  display: none;
-  color: var(--text-light);
+  z-index: 1000;
-  padding: 6px;
+}
+
+.action-menu.show {
+  display: block;
+}
+
+.action-menu-content {
+  background: white;
+  border-radius: 16px 16px 0 0;
+  padding: 16px;
+  box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
+  animation: slideUp 0.2s ease;
+}
+
+@keyframes slideUp {
+  from { transform: translateY(100%); }
+  to { transform: translateY(0); }
+}
+
+.action-menu-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 14px 16px;
+  border-radius: 10px;
   cursor: pointer;
-  opacity: 0;
   transition: all 0.2s;
 }
 
-.conversation-item:hover .conv-delete-btn {
+.action-menu-item:hover {
-  opacity: 1;
+  background: rgba(102, 126, 234, 0.1);
 }
 
-.conv-delete-btn:hover {
+.action-menu-item:active {
+  background: rgba(102, 126, 234, 0.2);
+}
+
+.action-menu-item svg {
+  color: var(--primary);
+}
+
+.action-menu-item span {
+  font-size: 16px;
+  color: var(--text-color);
+}
+
+.action-menu-item.delete-action svg,
+.action-menu-item.delete-action span {
   color: #e53e3e;
 }
 
+.action-menu-item.delete-action:hover {
+  background: rgba(229, 62, 62, 0.1);
+}
+
 /* ==================== 对话页面 ==================== */
 
 #chatPage {