Upload 10 files

public/index.html

@@ -416,7 +416,7 @@
       visibility: visible;
     }
     
-    /* Mobile Generate Button */
+    /* Mobile Generate Button - Draggable */
     .mobile-generate-btn {
       position: fixed;
       left: 20px;
@@ -430,22 +430,29 @@
       width: 60px;
       height: 60px;
       font-size: 24px;
-      cursor: pointer;
+      cursor: move;
       box-shadow: var(--shadow-lg);
       transition: all 0.3s ease;
       display: none;
+      touch-action: none;
+      user-select: none;
     }
     
     .mobile-generate-btn:hover {
-      transform: translateY(-50%) scale(1.1);
       box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2), 0 10px 10px -5px rgba(0, 0, 0, 0.1);
     }
     
     .mobile-generate-btn:active {
-      transform: translateY(-50%) scale(0.95);
+      transform: scale(0.95);
+    }
+    
+    .mobile-generate-btn.dragging {
+      transition: none;
+      z-index: 1000;
+      transform: scale(1.1);
     }
 
-    /* Card Meta Expandable */
+    /* Card Meta Expandable - Fixed for mobile */
     .card .meta {
       padding: 16px;
       border-top: 1px solid var(--border);
@@ -462,19 +469,24 @@
     }
     
     .card .meta-toggle {
-      background: none;
-      border: none;
+      background: var(--bg);
+      border: 1px solid var(--border);
       color: var(--accent);
       cursor: pointer;
       font-size: 12px;
-      padding: 4px 8px;
-      border-radius: 4px;
+      padding: 6px 12px;
+      border-radius: 6px;
       transition: all 0.2s ease;
-      min-height: auto;
+      min-height: 32px;
+      font-weight: 500;
+      touch-action: manipulation;
     }
     
-    .card .meta-toggle:hover {
-      background: var(--border);
+    .card .meta-toggle:hover,
+    .card .meta-toggle:active {
+      background: var(--accent);
+      color: white;
+      border-color: var(--accent);
       transform: none;
       box-shadow: none;
     }
@@ -486,7 +498,7 @@
     }
     
     .card .meta-content.expanded {
-      max-height: 200px;
+      max-height: 300px;
     }
 
     /* Mobile Responsive Styles */
@@ -573,6 +585,23 @@
         padding: 14px 16px;
         font-size: 16px;
         border-radius: 8px;
+        -webkit-appearance: none;
+        -moz-appearance: none;
+        appearance: none;
+        touch-action: manipulation;
+      }
+      
+      /* 修复iOS输入框问题 */
+      .group input:focus, .group select:focus, .group textarea:focus {
+        transform: none;
+        -webkit-user-select: text;
+        user-select: text;
+      }
+      
+      .group textarea {
+        -webkit-user-select: text;
+        user-select: text;
+        resize: vertical;
       }
     }
     
@@ -878,9 +907,24 @@
     metaHeader.className = 'meta-header';
     metaHeader.innerHTML = `
       <div style="font-weight: 600;">${params.model}</div>
-      <button class="meta-toggle" onclick="toggleCardMeta(this)">详情</button>
     `;
     
+    const toggleBtn = document.createElement('button');
+    toggleBtn.className = 'meta-toggle';
+    toggleBtn.textContent = '详情';
+    toggleBtn.addEventListener('click', function(e) {
+      e.preventDefault();
+      e.stopPropagation();
+      toggleCardMeta(this);
+    });
+    toggleBtn.addEventListener('touchend', function(e) {
+      e.preventDefault();
+      e.stopPropagation();
+      toggleCardMeta(this);
+    });
+    
+    metaHeader.appendChild(toggleBtn);
+    
     const metaContent = document.createElement('div');
     metaContent.className = 'meta-content';
     metaContent.innerHTML = `
@@ -898,7 +942,7 @@
     wrap.appendChild(meta);
   }
 
-  // 切换卡片详情显示
+  // 切换卡片详情显示 - 修复移动端点击问题
   function toggleCardMeta(button) {
     const metaContent = button.parentElement.nextElementSibling;
     const isExpanded = metaContent.classList.contains('expanded');
@@ -912,6 +956,124 @@
     }
   }
 
+  // 拖拽功能
+  let dragState = {
+    isDragging: false,
+    startX: 0,
+    startY: 0,
+    currentX: 0,
+    currentY: 0,
+    initialX: 20,
+    initialY: 0
+  };
+
+  function initDragButton() {
+    const btn = qs('#mobileGenerateBtn');
+    if (!btn) return;
+
+    // 鼠标事件
+    btn.addEventListener('mousedown', startDrag);
+    document.addEventListener('mousemove', drag);
+    document.addEventListener('mouseup', endDrag);
+
+    // 触摸事件
+    btn.addEventListener('touchstart', startDrag, { passive: false });
+    document.addEventListener('touchmove', drag, { passive: false });
+    document.addEventListener('touchend', endDrag);
+  }
+
+  function startDrag(e) {
+    const btn = qs('#mobileGenerateBtn');
+    if (!btn) return;
+
+    dragState.isDragging = true;
+    btn.classList.add('dragging');
+
+    if (e.type === 'touchstart') {
+      dragState.startX = e.touches[0].clientX;
+      dragState.startY = e.touches[0].clientY;
+    } else {
+      dragState.startX = e.clientX;
+      dragState.startY = e.clientY;
+    }
+
+    const rect = btn.getBoundingClientRect();
+    dragState.initialX = rect.left;
+    dragState.initialY = rect.top;
+
+    e.preventDefault();
+  }
+
+  function drag(e) {
+    if (!dragState.isDragging) return;
+
+    e.preventDefault();
+
+    let clientX, clientY;
+    if (e.type === 'touchmove') {
+      clientX = e.touches[0].clientX;
+      clientY = e.touches[0].clientY;
+    } else {
+      clientX = e.clientX;
+      clientY = e.clientY;
+    }
+
+    dragState.currentX = dragState.initialX + (clientX - dragState.startX);
+    dragState.currentY = dragState.initialY + (clientY - dragState.startY);
+
+    // 限制在屏幕范围内
+    const btn = qs('#mobileGenerateBtn');
+    const maxX = window.innerWidth - 60;
+    const maxY = window.innerHeight - 60;
+
+    dragState.currentX = Math.max(0, Math.min(maxX, dragState.currentX));
+    dragState.currentY = Math.max(0, Math.min(maxY, dragState.currentY));
+
+    btn.style.left = dragState.currentX + 'px';
+    btn.style.top = dragState.currentY + 'px';
+    btn.style.transform = 'none';
+  }
+
+  function endDrag(e) {
+    if (!dragState.isDragging) return;
+
+    const btn = qs('#mobileGenerateBtn');
+    if (!btn) return;
+
+    dragState.isDragging = false;
+    btn.classList.remove('dragging');
+
+    // 如果移动距离很小，视为点击
+    const moveDistance = Math.sqrt(
+      Math.pow(dragState.currentX - dragState.initialX, 2) +
+      Math.pow(dragState.currentY - dragState.initialY, 2)
+    );
+
+    if (moveDistance < 10) {
+      // 触发生成
+      generate();
+    }
+
+    // 保存位置
+    ls.set('generateBtnPosition', {
+      x: dragState.currentX,
+      y: dragState.currentY
+    });
+  }
+
+  // 恢复按钮位置
+  function restoreButtonPosition() {
+    const btn = qs('#mobileGenerateBtn');
+    if (!btn) return;
+
+    const savedPos = ls.get('generateBtnPosition', null);
+    if (savedPos) {
+      btn.style.left = savedPos.x + 'px';
+      btn.style.top = savedPos.y + 'px';
+      btn.style.transform = 'none';
+    }
+  }
+
   // 移动端优化的下载函数
   function downloadImageMobile(filename, dataUrl) {
     // 检测是否为移动端
@@ -1185,10 +1347,9 @@
       closeSidebar();
     });
     
-    // 移动端浮动生成按钮
-    qs('#mobileGenerateBtn').addEventListener('click', () => {
-      generate();
-    });
+    // 初始化拖拽功能
+    initDragButton();
+    restoreButtonPosition();
     
     // 通用事件绑定
     qs('#downloadAll').addEventListener('click', () => {