Update index.html

index.html

@@ -397,7 +397,14 @@
             50% { transform: translateY(-15px) rotate(10deg); }
         }
         
-        /* 响应式优化 */
+        /* 添加使用说明样式 */
+        .usage-tip {
+            font-size: 12px;
+            color: #d4a5a5;
+            text-align: center;
+            margin-top: 10px;
+            opacity: 0.8;
+        }
         @media (max-height: 700px) {
             .container {
                 padding: 10px;
@@ -514,6 +521,10 @@
                 <input type="text" class="note-input" placeholder="写点什么暖心的话吧~ ♡">
             </div>
             
+            <div class="usage-tip">
+                点击选择项目 | 长按或右键减少数量
+            </div>
+            
             <button class="pay-button" onclick="showPayment()">
                 💖 确认打赏 💖
             </button>
@@ -554,17 +565,12 @@
             const amount = element.dataset.amount;
             
             if (selectedItems.has(amount)) {
-                // 增加数量
+                // 已选中的项目，增加数量
                 itemQuantities[amount] = (itemQuantities[amount] || 1) + 1;
                 
                 // 更新数量显示
                 const qtyElement = element.querySelector('.quantity');
-                if (!qtyElement) {
-                    const span = document.createElement('span');
-                    span.className = 'quantity';
-                    span.textContent = `×${itemQuantities[amount]}`;
-                    element.appendChild(span);
-                } else {
+                if (qtyElement) {
                     qtyElement.textContent = `×${itemQuantities[amount]}`;
                 }
             } else {
@@ -582,6 +588,80 @@
             updateTotalAmount();
         }
         
+        // 添加长按或右键点击来减少数量的功能
+        function handleRightClick(element, event) {
+            event.preventDefault(); // 阻止默认的右键菜单
+            const amount = element.dataset.amount;
+            
+            if (selectedItems.has(amount) && itemQuantities[amount] > 0) {
+                if (itemQuantities[amount] === 1) {
+                    // 如果数量为1，取消选择
+                    element.classList.remove('active');
+                    selectedItems.delete(amount);
+                    delete itemQuantities[amount];
+                    
+                    // 移除数量标签
+                    const qtyElement = element.querySelector('.quantity');
+                    if (qtyElement) {
+                        qtyElement.remove();
+                    }
+                } else {
+                    // 数量大于1，减少数量
+                    itemQuantities[amount]--;
+                    const qtyElement = element.querySelector('.quantity');
+                    if (qtyElement) {
+                        qtyElement.textContent = `×${itemQuantities[amount]}`;
+                    }
+                }
+                
+                // 确保至少有一个项目被选中
+                if (selectedItems.size === 0) {
+                    const firstItem = document.querySelector('.payment-item');
+                    firstItem.classList.add('active');
+                    const firstAmount = firstItem.dataset.amount;
+                    selectedItems.add(firstAmount);
+                    itemQuantities[firstAmount] = 1;
+                    
+                    const span = document.createElement('span');
+                    span.className = 'quantity';
+                    span.textContent = '×1';
+                    firstItem.appendChild(span);
+                }
+                
+                updateTotalAmount();
+            }
+        }
+        
+        // 初始化事件监听
+        document.addEventListener('DOMContentLoaded', function() {
+            // 为所有付款项目添加右键点击事件
+            document.querySelectorAll('.payment-item').forEach(item => {
+                item.addEventListener('contextmenu', function(e) {
+                    handleRightClick(this, e);
+                });
+                
+                // 添加长按事件（移动端）
+                let pressTimer;
+                item.addEventListener('touchstart', function(e) {
+                    pressTimer = setTimeout(() => {
+                        handleRightClick(this, e);
+                        // 添加触觉反馈（如果设备支持）
+                        if (navigator.vibrate) {
+                            navigator.vibrate(50);
+                        }
+                    }, 500); // 500毫秒长按
+                });
+                
+                item.addEventListener('touchend', function() {
+                    clearTimeout(pressTimer);
+                });
+                
+                item.addEventListener('touchmove', function() {
+                    clearTimeout(pressTimer);
+                });
+            });
+        });
+        
         function updateTotalAmount() {
             let total = 0;
             selectedItems.forEach(amount => {