Upload 21 files

frontend/assets/app.js

@@ -4,21 +4,6 @@
   const $ = (sel, root = document) => root.querySelector(sel);
   const $$ = (sel, root = document) => [...root.querySelectorAll(sel)];
   const byId = (id) => document.getElementById(id);
-  // HF 环境识别（用于禁用不支持的本地能力）
-  const onHF = typeof location !== "undefined" && /\bhf\.space$/i.test(location.hostname);
-  function hideById(id) {
-    const el = byId(id);
-    if (el) {
-      el.style.display = "none";
-      if ("disabled" in el) el.disabled = true;
-    }
-  }
-  function hideLabelForInput(id) {
-    const el = byId(id);
-    const label = el && el.closest ? el.closest("label") : null;
-    if (label) label.style.display = "none";
-  }
-
   // 提示音状态（运行时），默认关闭，URL 指向 /ring/ring.mp3
   let soundEnabled = false;
   let soundUrl = "/ring/ring.mp3";
@@ -28,8 +13,11 @@
   function applyTheme(theme) {
     rootEl.setAttribute('data-theme', theme);
     localStorage.setItem('theme', theme);
+    const text = '主题：' + (theme === 'dark' ? '深色' : '浅色');
     const btn = byId('theme-toggle');
-    if (btn) btn.textContent = '主题：' + (theme === 'dark' ? '深色' : '浅色');
+    const btnMobile = byId('theme-toggle-mobile');
+    if (btn) btn.textContent = text;
+    if (btnMobile) btnMobile.textContent = text;
     
     // 主题切换时重新应用背景方案
     const schemeSel = byId('cfg-color-scheme');
@@ -42,27 +30,77 @@
   }
   const initialTheme = localStorage.getItem('theme') || 'dark';
   applyTheme(initialTheme);
-  const themeBtn = byId('theme-toggle');
-  if (themeBtn) {
-    themeBtn.addEventListener('click', () => {
+  
+  function setupThemeToggle() {
+    const themeBtn = byId('theme-toggle');
+    const themeBtnMobile = byId('theme-toggle-mobile');
+    const toggleTheme = () => {
       const next = (rootEl.getAttribute('data-theme') === 'dark') ? 'light' : 'dark';
       applyTheme(next);
-    });
+    };
+    if (themeBtn) themeBtn.addEventListener('click', toggleTheme);
+    if (themeBtnMobile) themeBtnMobile.addEventListener('click', toggleTheme);
   }
+  setupThemeToggle();
   // 提示音开关（在主题按钮旁）
-  const soundBtn = byId('sound-toggle');
   const soundPlayer = byId('sound-player');
   function updateSoundToggle() {
-    if (!soundBtn) return;
-    soundBtn.setAttribute('aria-pressed', soundEnabled ? 'true' : 'false');
-    soundBtn.textContent = '提示音：' + (soundEnabled ? '开' : '关');
+    const text = '提示音：' + (soundEnabled ? '开' : '关');
+    const pressed = soundEnabled ? 'true' : 'false';
+    const soundBtn = byId('sound-toggle');
+    const soundBtnMobile = byId('sound-toggle-mobile');
+    if (soundBtn) {
+      soundBtn.setAttribute('aria-pressed', pressed);
+      soundBtn.textContent = text;
+    }
+    if (soundBtnMobile) {
+      soundBtnMobile.setAttribute('aria-pressed', pressed);
+      soundBtnMobile.textContent = text;
+    }
   }
-  if (soundBtn) {
-    soundBtn.addEventListener('click', () => {
+  
+  function setupSoundToggle() {
+    const soundBtn = byId('sound-toggle');
+    const soundBtnMobile = byId('sound-toggle-mobile');
+    const toggle = () => {
       soundEnabled = !soundEnabled;
       updateSoundToggle();
+    };
+    if (soundBtn) soundBtn.addEventListener('click', toggle);
+    if (soundBtnMobile) soundBtnMobile.addEventListener('click', toggle);
+  }
+  setupSoundToggle();
+  
+  // 侧边栏控制
+  function setupSidebar() {
+    const menuToggle = byId('menu-toggle');
+    const sidebar = byId('sidebar');
+    const sidebarClose = byId('sidebar-close');
+    const sidebarOverlay = byId('sidebar-overlay');
+    
+    function openSidebar() {
+      if (sidebar) sidebar.classList.add('active');
+      if (sidebarOverlay) sidebarOverlay.classList.add('active');
+    }
+    
+    function closeSidebar() {
+      if (sidebar) sidebar.classList.remove('active');
+      if (sidebarOverlay) sidebarOverlay.classList.remove('active');
+    }
+    
+    if (menuToggle) menuToggle.addEventListener('click', openSidebar);
+    if (sidebarClose) sidebarClose.addEventListener('click', closeSidebar);
+    if (sidebarOverlay) sidebarOverlay.addEventListener('click', closeSidebar);
+    
+    // 侧边栏中的Tab按钮也要同步
+    const sidebarBtns = sidebar ? sidebar.querySelectorAll('.tab-btn[data-tab]') : [];
+    sidebarBtns.forEach(btn => {
+      btn.addEventListener('click', () => {
+        closeSidebar();
+      });
     });
   }
+  setupSidebar();
  
   // ===== 背景方案处理（非字体/主按钮）：根据配置切换页面背景 =====
   function setBackground(color) {
@@ -89,12 +127,14 @@
     applyBackgroundScheme(scheme, custom);
   }
  
-  // Tabs
-  $$(".tab-btn").forEach((btn) => {
+  // Tabs（桌面端和侧边栏都要同步）
+  $$(".tab-btn[data-tab]").forEach((btn) => {
     btn.addEventListener("click", () => {
-      $$(".tab-btn").forEach((b) => b.classList.remove("active"));
-      btn.classList.add("active");
       const tabId = btn.getAttribute("data-tab");
+      // 同步所有tab按钮状态
+      $$(".tab-btn[data-tab]").forEach((b) => b.classList.remove("active"));
+      $$(".tab-btn[data-tab='" + tabId + "']").forEach((b) => b.classList.add("active"));
+      // 切换tab内容
       $$(".tab").forEach((tab) => tab.classList.remove("active"));
       const targetTab = byId(tabId);
       if (targetTab) targetTab.classList.add("active");
@@ -154,15 +194,6 @@
       if (byId("cfg-custom-primary")) byId("cfg-custom-primary").value = cfg.custom_primary ?? "#7ba23f";
       applyAccentFromConfig(cfg);
 
-      // HF 环境不支持选择/打开本地目录，端口也由平台分配，不可编辑
-      if (onHF) {
-        hideLabelForInput("cfg-port");
-        hideById("btn-select-output-dir");
-        hideById("btn-open-output-dir");
-        const msg = byId("cfg-message");
-        if (msg) msg.textContent = "HF 环境：端口由平台分配（已忽略本地端口设置），目录选择/打开功能已禁用。";
-      }
-
       // 提示音配置
       soundEnabled = !!cfg.sound_enabled;
       soundUrl = cfg.sound_url || "/ring/ring.mp3";
@@ -545,10 +576,6 @@
   const selOutBtn = byId("btn-select-output-dir");
   if (selOutBtn) {
     selOutBtn.addEventListener("click", async () => {
-      if (onHF) {
-        toast("HF 环境不支持系统目录选择，请在输入框手填或留空使用默认。", "info");
-        return;
-      }
       try {
         loading.show();
         const res = await fetch("/api/select-output-dir");
@@ -580,10 +607,6 @@
   const openOutBtn = byId("btn-open-output-dir");
   if (openOutBtn) {
     openOutBtn.addEventListener("click", async () => {
-      if (onHF) {
-        toast("HF 环境不支持打开系统目录（不影响生成与下载）。", "info");
-        return;
-      }
       try {
         loading.show();
         const p = byId("cfg-output-dir")?.value || "";
@@ -620,8 +643,5 @@
   byId("btn-inpaint").addEventListener("click", handleInpaint);
  
   // Init
-  if (onHF) {
-    toast("HF 环境：端口由平台分配，目录选择/打开已禁用。", "info");
-  }
   loadConfig();
 })();

frontend/assets/style.css

@@ -11,7 +11,7 @@
   --border: #2a2a2a;
   --card: #121212;
   --shadow: 0 10px 30px rgba(0,0,0,0.3);
-  --radius: 12px;
+  --radius: 4px;
   --ring: rgba(255,255,255,0.12);
   --active-text: #111111;
   --switch-knob: #ffffff;
@@ -108,9 +108,8 @@ img { max-width: 100%; display: block; }
   color: var(--text);
   border: 1px solid var(--border);
   padding: 10px 14px;
-  border-radius: 999px;
+  border-radius: var(--radius);
   white-space: nowrap;
-  /* 彻底固定：移除过渡，避免任何切换动画引起的视觉“移动” */
   transition: none;
   cursor: pointer;
   font-weight: 700;
@@ -147,6 +146,104 @@ h2 {
   padding: 14px;
 }
 
+/* 汉堡菜单按钮（仅手机端显示） */
+.menu-toggle {
+  display: none;
+  appearance: none;
+  background: transparent;
+  border: none;
+  font-size: 24px;
+  color: var(--text);
+  cursor: pointer;
+  padding: 8px;
+  line-height: 1;
+}
+
+/* 侧边栏 */
+.sidebar {
+  position: fixed;
+  top: 0;
+  left: -280px;
+  width: 280px;
+  height: 100%;
+  background: var(--panel);
+  border-right: 1px solid var(--border);
+  z-index: 1000;
+  transition: left 0.3s ease;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+}
+
+.sidebar.active {
+  left: 0;
+}
+
+.sidebar-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 999;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.3s ease;
+}
+
+.sidebar-overlay.active {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.sidebar-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px;
+  border-bottom: 1px solid var(--border);
+}
+
+.sidebar-close {
+  appearance: none;
+  background: transparent;
+  border: none;
+  font-size: 32px;
+  color: var(--text);
+  cursor: pointer;
+  line-height: 1;
+  padding: 0;
+  width: 32px;
+  height: 32px;
+}
+
+.sidebar-nav {
+  flex: 1;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.sidebar-nav .tab-btn {
+  width: 100%;
+  text-align: left;
+  justify-content: flex-start;
+}
+
+.sidebar-actions {
+  padding: 16px;
+  border-top: 1px solid var(--border);
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.sidebar-actions .tab-btn {
+  width: 100%;
+}
+
 /* Form grid - mobile first */
 .form-grid {
   display: grid;
@@ -193,7 +290,7 @@ select {
   background: var(--card);
   color: var(--text);
   border: 1px solid var(--border);
-  border-radius: 12px;
+  border-radius: var(--radius);
   outline: none;
   transition: border-color .18s ease, box-shadow .18s ease;
   box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
@@ -255,13 +352,12 @@ button {
   border: 1px solid var(--border);
   background: #1a2030;
   color: #e8ecff;
-  border-radius: 12px;
+  border-radius: var(--radius);
   padding: 12px 16px;
   font-weight: 800;
   font-size: 16px;
   letter-spacing: .2px;
   cursor: pointer;
-  /* 去除 transform 过渡，避免点击“抽搐” */
   transition: background .18s ease, border-color .18s ease, box-shadow .2s ease, color .18s ease;
 }
 button:hover { border-color: #3a3a3a; background: #222222; }
@@ -295,7 +391,7 @@ button.primary:hover {
 }
 .result img {
   width: 100%;
-  border-radius: 12px;
+  border-radius: var(--radius);
   border: 1px solid var(--border);
   background: #0e1118;
 }
@@ -314,17 +410,17 @@ button.primary:hover {
   width: 100%;
 }
 
-/* Toast: 固定状态栏，不弹出动画 */
+/* Toast: 固定顶部，不占用底部空间 */
 .toast {
   position: fixed;
   left: 50%;
-  bottom: 14px;
-  transform: translateX(-50%); /* 不再上下弹出 */
+  top: 70px;
+  transform: translateX(-50%);
   background: rgba(17, 23, 34, 0.96);
   color: #fff;
   border: 1px solid var(--border);
   padding: 8px 14px;
-  border-radius: 10px;
+  border-radius: var(--radius);
   box-shadow: var(--shadow);
   z-index: 100;
   transition: none;
@@ -332,6 +428,7 @@ button.primary:hover {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  pointer-events: none;
 }
 .toast:empty { display: none; }
 .toast.success { border-color: rgba(40, 199, 111, .4); }
@@ -369,7 +466,7 @@ button.primary:hover {
 input[type="file"] {
   padding: 10px;
   background: var(--card);
-  border-radius: 10px;
+  border-radius: var(--radius);
   border: 1px solid var(--border);
 }
 
@@ -480,7 +577,7 @@ select {
   --placeholder: #8a93a8;
 }
 
-/* ===== 移动端优化（参考 NAI 生成页交互） ===== */
+/* ===== 移动端优化 ===== */
 @media (max-width: 640px) {
   /* 手机端背景图片 */
   body {
@@ -489,42 +586,28 @@ select {
     background-position: center;
   }
   
-  /* 顶部导航栏优化 */
-  .app-header {
-    padding: 8px 12px;
-    flex-direction: column;
-    align-items: stretch;
-    gap: 8px;
+  /* 显示汉堡菜单 */
+  .menu-toggle {
+    display: block;
   }
   
-  .brand {
-    font-size: 18px;
-    text-align: center;
+  /* 隐藏顶部tabs和actions */
+  .app-header .tabs,
+  .app-header .header-actions {
+    display: none;
   }
   
-  .header-actions {
-    display: flex;
-    justify-content: center;
-    gap: 8px;
+  /* 顶部导航栏简化 */
+  .app-header {
+    padding: 12px 16px;
+    flex-direction: row;
+    align-items: center;
+    gap: 12px;
   }
   
-  .tabs {
-    display: flex;
-    width: 100%;
-    overflow-x: auto;
-    -webkit-overflow-scrolling: touch;
-    gap: 6px;
-    padding-bottom: 4px;
-    scrollbar-width: none;
-  }
-  .tabs::-webkit-scrollbar {
-    display: none;
-  }
-  .tabs .tab-btn {
-    flex: 0 0 auto;
-    padding: 10px 16px;
-    font-size: 14px;
-    min-width: fit-content;
+  .brand {
+    font-size: 18px;
+    flex: 1;
   }
 
   /* 主容器调整 */

frontend/index.html

@@ -7,17 +7,37 @@
   <link rel="stylesheet" href="assets/style.css" />
 </head>
 <body>
+  <!-- 手机端侧边栏 -->
+  <div id="sidebar" class="sidebar">
+    <div class="sidebar-header">
+      <div class="brand">New NAI</div>
+      <button id="sidebar-close" class="sidebar-close">×</button>
+    </div>
+    <nav class="sidebar-nav">
+      <button class="tab-btn active" data-tab="tab-config">配置</button>
+      <button class="tab-btn" data-tab="tab-t2i">文生图</button>
+      <button class="tab-btn" data-tab="tab-i2i">图生图</button>
+      <button class="tab-btn" data-tab="tab-inpaint">局部重绘</button>
+    </nav>
+    <div class="sidebar-actions">
+      <button id="theme-toggle-mobile" class="tab-btn">主题：深色</button>
+      <button id="sound-toggle-mobile" class="tab-btn" aria-pressed="false">提示音：关</button>
+    </div>
+  </div>
+  <div id="sidebar-overlay" class="sidebar-overlay"></div>
+  
   <header class="app-header">
+    <button id="menu-toggle" class="menu-toggle">☰</button>
     <div class="brand">New NAI</div>
     <nav class="tabs">
-      <button type="button" class="tab-btn active" data-tab="tab-config">配置</button>
-      <button type="button" class="tab-btn" data-tab="tab-t2i">文生图</button>
-      <button type="button" class="tab-btn" data-tab="tab-i2i">图生图</button>
-      <button type="button" class="tab-btn" data-tab="tab-inpaint">局部重绘</button>
+      <button class="tab-btn active" data-tab="tab-config">配置</button>
+      <button class="tab-btn" data-tab="tab-t2i">文生图</button>
+      <button class="tab-btn" data-tab="tab-i2i">图生图</button>
+      <button class="tab-btn" data-tab="tab-inpaint">局部重绘</button>
     </nav>
     <div class="header-actions">
-      <button type="button" id="theme-toggle" class="tab-btn">主题：深色</button>
-      <button type="button" id="sound-toggle" class="tab-btn" aria-pressed="false">提示音：关</button>
+      <button id="theme-toggle" class="tab-btn">主题：深色</button>
+      <button id="sound-toggle" class="tab-btn" aria-pressed="false">提示音：关</button>
     </div>
   </header>
 
@@ -114,10 +134,10 @@
           </label>
         </div>
         <div class="actions">
-          <button type="button" id="btn-load-config">读取配置</button>
-          <button type="button" id="btn-select-output-dir">选择保存目录</button>
-          <button type="button" id="btn-open-output-dir">打开保存目录</button>
-          <button type="button" id="btn-save-config" class="primary">保存配置</button>
+          <button id="btn-load-config">读取配置</button>
+          <button id="btn-select-output-dir">选择保存目录</button>
+          <button id="btn-open-output-dir">打开保存目录</button>
+          <button id="btn-save-config" class="primary">保存配置</button>
         </div>
         <p id="cfg-message" class="message"></p>
       </div>
@@ -193,7 +213,7 @@
           </label>
         </div>
         <div class="actions">
-          <button type="button" id="btn-t2i" class="primary">生成</button>
+          <button id="btn-t2i" class="primary">生成</button>
         </div>
         <div class="result">
           <img id="t2i-img" alt="生成结果" />
@@ -287,7 +307,7 @@
           </label>
         </div>
         <div class="actions">
-          <button type="button" id="btn-i2i" class="primary">生成</button>
+          <button id="btn-i2i" class="primary">生成</button>
         </div>
         <div class="result">
           <img id="i2i-img" alt="生成结果" />
@@ -389,7 +409,7 @@
           </label>
         </div>
         <div class="actions">
-          <button type="button" id="btn-inpaint" class="primary">生成</button>
+          <button id="btn-inpaint" class="primary">生成</button>
         </div>
         <div class="result">
           <img id="inpaint-img" alt="生成结果" />