fix: PC端隐藏移动组件，JS增加移动端判断，重构NSFW按钮布局

2026-03-14 09:16:07 +08:00
1 parent 4c80a76797
commit 180b93dded
@@ -1478,3 +1478,17 @@ html[data-theme='dark'] .im-settings-sheet {
    grid-row: auto !important;
  }
 }
+
+/* ============================
+   PC 端隐藏 Imagine 移动端专属组件
+   ============================ */
+.im-sticky-bar,
+.im-settings-overlay {
+  display: none !important;
+}
+
+@media (max-width: 900px) {
+  .im-sticky-bar {
+    display: flex !important;
+  }
+}
@@ -1119,3 +1119,36 @@ html[data-theme='dark'] .nsfw-settings-sheet {
    gap: 0;
  }
 }
+
+/* ============================
+   PC 端隐藏移动端专属组件（默认隐藏）
+   ============================ */
+.nsfw-sticky-bar,
+.nsfw-settings-overlay {
+  display: none !important;
+}
+
+@media (max-width: 900px) {
+  /* Sticky Bar 移动端恢复显示 */
+  .nsfw-sticky-bar {
+    display: flex !important;
+    flex-direction: column;
+  }
+
+  /* 隐藏"操作"面板（按钮已由 Sticky Bar 承担） */
+  .top-grid > .panel:nth-child(2) {
+    display: none;
+  }
+
+  /* 第二行：整行始终可点击（垃圾桶不依赖选中），只文字颜色变化 */
+  .nsfw-sticky-row--video {
+    opacity: 1 !important;
+    pointer-events: auto !important;
+  }
+
+  /* 视频主按钮在禁用时自行淡化 */
+  #imStartVideoBtn:disabled {
+    opacity: 0.38;
+    cursor: not-allowed;
+  }
+}
@@ -2308,6 +2308,8 @@
   * 移动端 Sticky Bar 初始化
   */
  function initStickyBar() {
+    /* 移动端专属：PC 下直接退出，避免 DOM 被移动 */
+    if (!window.matchMedia("(max-width: 900px)").matches) return;
    /* 图标按钮代理 */
    const proxyMap = {
      imClearBtn: 'clearBtn',
@@ -1820,13 +1820,15 @@
  updateVideoButtons();

  /**
-   * NSFW 工作台 双行 Sticky Bar 初始化
+   * NSFW 工作台 双行 Sticky Bar 初始化（移动端专属）
   */
  function initNsfwStickyBar() {
-    /* --- 代理映射 --- */
+    /* 仅移动端执行，PC 下退出避免干扰 */
+    if (!window.matchMedia('(max-width: 900px)').matches) return;
+
+    /* --- 代理映射（只代理两个垃圾桶，imNextBatchBtn 已移除） --- */
    const proxyMap = {
      imClearImagesBtn: 'clearImagesBtn',
-      imNextBatchBtn: 'nextBatchBtn',
      imClearVideosBtn: 'clearVideosBtn',
    };
    Object.entries(proxyMap).forEach(([sId, oId]) => {
@@ -1835,7 +1837,7 @@
      if (sEl && oEl) sEl.addEventListener('click', () => oEl.click());
    });

-    /* --- 候选图主按钮：生成6张/停止候选 --- */
+    /* --- 候选图主按钮：生成6张 / 再来6张 / 停止候选 --- */
    const imGenBtn = document.getElementById('imGenerateBtn');
    const genPlayIcon = imGenBtn && imGenBtn.querySelector('.nsfw-btn-play');
    const genStopIcon = imGenBtn && imGenBtn.querySelector('.nsfw-btn-stop');
@@ -1844,22 +1846,42 @@
    function syncGenBtn() {
      if (!imGenBtn) return;
      const isRunning = generateBatchBtn && generateBatchBtn.dataset.running === '1';
+      /* 判断是否已经有候选图：imageCount 不为 "0 张" */
+      const hasImages = imageCount && String(imageCount.textContent || '').trim() !== '0 张';
      imGenBtn.classList.toggle('is-stop', isRunning);
      if (genPlayIcon) genPlayIcon.style.display = isRunning ? 'none' : '';
      if (genStopIcon) genStopIcon.style.display = isRunning ? '' : 'none';
-      if (genLabel) genLabel.textContent = isRunning ? '停止候选' : '生成 6 张';
+      if (genLabel) {
+        if (isRunning) {
+          genLabel.textContent = '停止候选';
+        } else if (hasImages) {
+          genLabel.textContent = '再来 6 张';
+        } else {
+          genLabel.textContent = '生成 6 张';
+        }
+      }
    }

    if (imGenBtn) {
      imGenBtn.addEventListener('click', () => {
        const isRunning = generateBatchBtn && generateBatchBtn.dataset.running === '1';
-        (isRunning ? stopBatchBtn : generateBatchBtn) && (isRunning ? stopBatchBtn : generateBatchBtn).click();
+        if (isRunning) {
+          stopBatchBtn && stopBatchBtn.click();
+        } else {
+          /* 再来一批 或 生成 6 张，都走 nextBatchBtn（已有图时） / generateBatchBtn（无图时） */
+          const hasImages = imageCount && String(imageCount.textContent || '').trim() !== '0 张';
+          (hasImages ? nextBatchBtn : generateBatchBtn) && (hasImages ? nextBatchBtn : generateBatchBtn).click();
+        }
      });
    }
-    /* 观察 generateBatchBtn 的 data-running 属性和 disabled 状态 */
+
    if (generateBatchBtn) {
      new MutationObserver(syncGenBtn).observe(generateBatchBtn, { attributes: true, attributeFilter: ['data-running', 'disabled'] });
    }
+    /* 同时观察 imageCount 变化以切换按钮文字 */
+    if (imageCount) {
+      new MutationObserver(syncGenBtn).observe(imageCount, { characterData: true, childList: true, subtree: true });
+    }
    syncGenBtn();

    /* --- 视频主按钮：生成视频/中断视频 --- */
@@ -1890,7 +1912,7 @@
    }
    syncVideoBtn();

-    /* --- 候选图已选状态同步 → 第二行高亮 --- */
+    /* --- 候选图已选状态同步 → 第二行文字高亮（垃圾桶始终可点） --- */
    const videoRow = document.getElementById('nsfwVideoRow');
    const selectedLabel = document.getElementById('nsfwSelectedLabel');

@@ -1899,7 +1921,6 @@
      const text = String(selectedMeta.textContent || '').trim();
      const hasSelected = !text.includes('未选择');
      videoRow.classList.toggle('has-selected', hasSelected);
-      // 截短显示
      if (hasSelected) {
        selectedLabel.textContent = text.length > 22 ? text.slice(0, 22) + '…' : text;
      } else {
@@ -1913,7 +1934,7 @@
      syncSelected();
    }

-    /* --- 设置 Bottom Sheet（画面比例、并发、分辨率、时长、NSFW） --- */
+    /* --- 设置 Bottom Sheet --- */
    const settingsBtn = document.getElementById('nsfwSettingsBtn');
    const settingsOverlay = document.getElementById('nsfwSettingsOverlay');

@@ -1932,7 +1953,7 @@
      titleEl.textContent = '生成参数';
      settingsSheet.appendChild(titleEl);

-      // 将参数表单（画面比例、并发、分辨率、时长、NSFW 这些 field，不含 textarea）移入 sheet
+      /* 将非 textarea 的参数 field 移入 sheet */
      const formGrid = document.querySelector('.form-grid');
      if (formGrid) {
        const nonWideFields = formGrid.querySelectorAll('.field:not(.field-wide)');
@@ -19,7 +19,7 @@
  <link href="/static/vendor/geist/geist-mono.css" rel="stylesheet">
  <script src="/static/common/js/theme.js?v=0.1.0"></script>
  <link href="/static/common/css/common.css?v=0.3.8" rel="stylesheet">
-  <link href="/static/public/css/imagine.css?v=0.4.0" rel="stylesheet">
+  <link href="/static/public/css/imagine.css?v=0.5.0" rel="stylesheet">
  <link href="/static/common/css/toast.css" rel="stylesheet">
 </head>

@@ -351,7 +351,7 @@
  <script src="/static/common/js/prompt-enhancer.js?v=0.1.15"></script>
  <script src="/static/common/js/pwa.js?v=0.1.1"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
-  <script src="/static/public/js/imagine.js?v=0.3.9"></script>
+  <script src="/static/public/js/imagine.js?v=0.5.0"></script>
 </body>

 </html>
@@ -19,7 +19,7 @@
  <script src="/static/common/js/theme.js?v=0.1.0"></script>
  <link href="/static/common/css/common.css?v=0.3.7" rel="stylesheet">
  <link href="/static/common/css/toast.css" rel="stylesheet">
-  <link href="/static/public/css/nsfw.css?v=0.3.8" rel="stylesheet">
+  <link href="/static/public/css/nsfw.css?v=0.3.9" rel="stylesheet">
 </head>

 <body class="public-page min-h-screen flex flex-col" style="background-color: var(--bg);">
@@ -137,9 +137,8 @@

  <!-- 移动端双行 Sticky Bar -->
  <div id="nsfwStickyBar" class="nsfw-sticky-bar">
-    <!-- 第一行：候选图操作 -->
+    <!-- 第一行：候选图操作：左⚙ + 右主按钮 -->
    <div class="nsfw-sticky-row nsfw-sticky-row--image">
-      <!-- 左：设置 -->
      <button class="nsfw-icon-btn" id="nsfwSettingsBtn" type="button" title="生成参数" aria-label="生成参数">
        <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
          stroke-linecap="round" stroke-linejoin="round">
@@ -147,27 +146,7 @@
          <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/>
        </svg>
      </button>
-      <div class="nsfw-icon-divider"></div>
-      <!-- 中：图标操作 -->
-      <div class="nsfw-icon-group">
-        <!-- 清空图片 -->
-        <button class="nsfw-icon-btn nsfw-icon-btn--danger" id="imClearImagesBtn" type="button" title="清空图片">
-          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
-            stroke-linecap="round" stroke-linejoin="round">
-            <polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/>
-            <path d="M10 11v6M14 11v6"/><path d="M9 6V4h6v2"/>
-          </svg>
-        </button>
-        <!-- 再来一批 -->
-        <button class="nsfw-icon-btn" id="imNextBatchBtn" type="button" title="再来一批">
-          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
-            stroke-linecap="round" stroke-linejoin="round">
-            <polyline points="1 4 1 10 7 10"/>
-            <path d="M3.51 15a9 9 0 1 0 .49-3.5"/>
-          </svg>
-        </button>
-      </div>
-      <!-- 右：主按钮（生成6张/停止候选） -->
+      <!-- 主按钮：生成6张 / 再来6张 / 停止候选 -->
      <button id="imGenerateBtn" class="geist-button nsfw-main-btn" type="button">
        <svg class="nsfw-btn-play" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor"
          stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
@@ -184,20 +163,26 @@
    <!-- 行分隔线 -->
    <div class="nsfw-sticky-row-sep"></div>

-    <!-- 第二行：视频操作（候选图已选时高亮） -->
+    <!-- 第二行：视频操作 -->
    <div class="nsfw-sticky-row nsfw-sticky-row--video" id="nsfwVideoRow">
      <!-- 左：已选图摘要 -->
      <div class="nsfw-selected-label" id="nsfwSelectedLabel">未选择候选图</div>
-      <!-- 右侧视频操作 -->
+      <!-- 右：两个垃圾桶 + 生成视频主按钮 -->
      <div class="nsfw-video-actions">
-        <!-- 清空视频 -->
-        <button class="nsfw-icon-btn nsfw-icon-btn--danger" id="imClearVideosBtn" type="button" title="清空视频结果">
-          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+        <!-- 清空候选图 垃圾桶 -->
+        <button class="nsfw-icon-btn nsfw-icon-btn--danger" id="imClearImagesBtn" type="button" title="清空候选图">
+          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
            stroke-linecap="round" stroke-linejoin="round">
-            <rect x="2" y="2" width="20" height="20" rx="2.18"/><line x1="7" y1="2" x2="7" y2="22"/>
-            <line x1="17" y1="2" x2="17" y2="22"/><line x1="2" y1="12" x2="22" y2="12"/>
-            <line x1="2" y1="7" x2="7" y2="7"/><line x1="2" y1="17" x2="7" y2="17"/>
-            <line x1="17" y1="17" x2="22" y2="17"/><line x1="17" y1="7" x2="22" y2="7"/>
+            <polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/>
+            <path d="M10 11v6M14 11v6"/><path d="M9 6V4h6v2"/>
+          </svg>
+        </button>
+        <!-- 清空视频结果 垃圾桶 -->
+        <button class="nsfw-icon-btn nsfw-icon-btn--danger" id="imClearVideosBtn" type="button" title="清空视频结果">
+          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+            stroke-linecap="round" stroke-linejoin="round">
+            <polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/>
+            <path d="M10 11v6M14 11v6"/><path d="M9 6V4h6v2"/>
          </svg>
        </button>
        <!-- 生成视频/中断视频 主按钮 -->
@@ -216,6 +201,7 @@
    </div>
  </div>

+
  <div id="lightbox" class="image-lightbox">
    <button class="lightbox-close" id="closeLightbox">
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
@@ -267,7 +253,7 @@
  <script src="/static/common/js/toast.js"></script>
  <script src="/static/common/js/prompt-enhancer.js?v=0.1.15"></script>
  <script src="/static/common/js/pwa.js?v=0.1.1"></script>
-  <script src="/static/public/js/nsfw.js?v=0.3.6"></script>
+  <script src="/static/public/js/nsfw.js?v=0.3.7"></script>
 </body>

 </html>