Upload 22 files

frontend/assets/app.js

@@ -30,6 +30,15 @@
     localStorage.setItem('theme', theme);
     const btn = byId('theme-toggle');
     if (btn) btn.textContent = '主题：' + (theme === 'dark' ? '深色' : '浅色');
+    
+    // 主题切换时重新应用背景方案
+    const schemeSel = byId('cfg-color-scheme');
+    const customColor = byId('cfg-custom-primary');
+    if (schemeSel) {
+      const scheme = schemeSel.value || 'auto';
+      const custom = customColor?.value || '#7ba23f';
+      applyBackgroundScheme(scheme, custom);
+    }
   }
   const initialTheme = localStorage.getItem('theme') || 'dark';
   applyTheme(initialTheme);
@@ -87,7 +96,8 @@
       btn.classList.add("active");
       const tabId = btn.getAttribute("data-tab");
       $$(".tab").forEach((tab) => tab.classList.remove("active"));
-      byId(tabId).classList.add("active");
+      const targetTab = byId(tabId);
+      if (targetTab) targetTab.classList.add("active");
     });
   });
 

frontend/assets/style.css

@@ -1,22 +1,22 @@
 :root {
-  /* 将浅色作为默认，切换立即生效；暗色在 [data-theme="dark"] 中覆盖 */
-  --bg: #f5f7fb;
-  --panel: #ffffff;
-  --text: #111;
-  --muted: #5b6470;
-  /* 浅色用黑色 */
-  --primary: #000000;
-  --primary-600: #222222;
-  --danger: #e95353;
-  --success: #22b66b;
-  --border: #e6e8ef;
-  --card: #ffffff;
-  --shadow: 0 10px 30px rgba(0,0,0,0.15);
+  /* 默认深色主题，避免闪烁 */
+  --bg: #121315;
+  --panel: #1a1a1a;
+  --text: #e6e6e6;
+  --muted: #9a9a9a;
+  --primary: #ffffff;
+  --primary-600: #e6e6e6;
+  --danger: #ff5d5d;
+  --success: #28c76f;
+  --border: #2a2a2a;
+  --card: #121212;
+  --shadow: 0 10px 30px rgba(0,0,0,0.3);
   --radius: 12px;
-  /* 统一焦点环与激活文字颜色 */
-  --ring: rgba(0,0,0,0.15);
-  --active-text: #ffffff;
+  --ring: rgba(255,255,255,0.12);
+  --active-text: #111111;
   --switch-knob: #ffffff;
+  --switch-knob-checked: #1a1a1a;
+  --placeholder: #b8c1d1;
 }
 
 * { box-sizing: border-box; }
@@ -29,12 +29,42 @@ body {
   font: 16px/1.7 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  /* 背景图片设置 - 电脑端 */
+  background-image: url('/image/windows7.jpg');
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-attachment: fixed;
+  position: relative;
+}
+
+/* 背景遮罩层，提升可读性 */
+body::before {
+  content: '';
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.4);
+  z-index: -1;
+  pointer-events: none;
+}
+
+/* 深色主题遮罩更深 */
+[data-theme="dark"] body::before {
+  background: rgba(0, 0, 0, 0.5);
+}
+
+/* 浅色主题遮罩更浅 */
+[data-theme="light"] body::before {
+  background: rgba(255, 255, 255, 0.6);
 }
 
 img { max-width: 100%; display: block; }
 
 .app-header {
-  position: fixed; /* 彻底固定选项栏（不随滚动、不跳动） */
+  position: fixed;
   top: 0;
   left: 0;
   right: 0;
@@ -45,9 +75,10 @@ img { max-width: 100%; display: block; }
   align-items: center;
   justify-content: space-between;
   padding: 10px 14px;
-  background: rgba(10,12,18,0.75);
+  background: var(--panel);
   backdrop-filter: blur(8px);
   border-bottom: 1px solid var(--border);
+  transition: background-color 0.2s ease, border-color 0.2s ease;
 }
 
 .brand {
@@ -451,58 +482,230 @@ select {
 
 /* ===== 移动端优化（参考 NAI 生成页交互） ===== */
 @media (max-width: 640px) {
-  /* 底部固定操作栏：当前 Tab 的 actions 固定在底部，仅当前 Tab 可见 */
-  .actions {
-    position: fixed;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    padding: 10px 16px;
-    background: var(--panel);
-    border-top: 1px solid var(--border);
-    z-index: 80;
+  /* 手机端背景图片 */
+  body {
+    background-image: url('/image2/punk.png');
+    background-size: cover;
+    background-position: center;
   }
-  .actions .primary { width: 100%; }
-
-  /* 预留底部空间，避免内容被按钮遮挡；并为顶部两行导航预留高度 */
-  main {
-    padding-bottom: 120px;
-    padding-top: 112px; /* 顶部两行（品牌/按钮 + 可横向滚动的 tabs） */
-  }
-
-  /* 顶部改为两行，选项（文生图/图生图/局部重绘）单独一行并可横向滚动，避免“找不到” */
+  
+  /* 顶部导航栏优化 */
   .app-header {
-    padding: 8px 10px;
+    padding: 8px 12px;
     flex-direction: column;
     align-items: stretch;
-    gap: 6px;
+    gap: 8px;
+  }
+  
+  .brand {
+    font-size: 18px;
+    text-align: center;
   }
+  
   .header-actions {
-    order: 2;
-    align-self: flex-end;
+    display: flex;
+    justify-content: center;
+    gap: 8px;
   }
+  
   .tabs {
-    order: 3;
     display: flex;
     width: 100%;
     overflow-x: auto;
     -webkit-overflow-scrolling: touch;
-    gap: 8px;
-    padding-bottom: 2px;
+    gap: 6px;
+    padding-bottom: 4px;
+    scrollbar-width: none;
+  }
+  .tabs::-webkit-scrollbar {
+    display: none;
   }
   .tabs .tab-btn {
     flex: 0 0 auto;
-    padding: 8px 10px;
+    padding: 10px 16px;
     font-size: 14px;
+    min-width: fit-content;
+  }
+
+  /* 主容器调整 */
+  main {
+    padding: 130px 12px 20px;
+    max-width: 100%;
   }
 
-  /* 触控表单更易点按 */
+  /* 卡片优化 */
+  .card {
+    padding: 16px 12px;
+    border-radius: 16px;
+  }
+
+  /* 表单网格优化 - 移动端单列 */
+  .form-grid {
+    grid-template-columns: 1fr !important;
+    gap: 16px;
+  }
+
+  /* 触控友好的输入框 */
   input[type="text"],
   input[type="password"],
   input[type="number"],
+  input[type="color"],
   textarea,
   select {
     padding: 14px 16px;
     font-size: 16px;
+    border-radius: 12px;
+    min-height: 48px;
+  }
+  
+  textarea {
+    min-height: 100px;
+  }
+
+  /* 按钮优化 */
+  button {
+    padding: 14px 20px;
+    font-size: 16px;
+    min-height: 48px;
+    border-radius: 12px;
+  }
+
+  /* 开关优化 */
+  .switch {
+    padding: 8px 0;
+  }
+  .switch input[type="checkbox"] {
+    width: 50px;
+    height: 30px;
+  }
+  .switch input[type="checkbox"]::after {
+    width: 24px;
+    height: 24px;
+    top: 2px;
+    left: 2px;
+  }
+  .switch input[type="checkbox"]:checked::after {
+    transform: translateX(20px);
+  }
+
+  /* 底部固定操作栏：仅对生成页面固定 */
+  #tab-t2i .actions,
+  #tab-i2i .actions,
+  #tab-inpaint .actions {
+    position: fixed;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    padding: 12px 16px;
+    background: var(--panel);
+    border-top: 1px solid var(--border);
+    z-index: 80;
+    box-shadow: 0 -4px 12px rgba(0,0,0,0.15);
+    display: flex;
+    justify-content: center;
+  }
+  
+  #tab-t2i .actions .primary,
+  #tab-i2i .actions .primary,
+  #tab-inpaint .actions .primary {
+    width: 100%;
+    max-width: 400px;
+    font-size: 17px;
+    font-weight: 700;
+    padding: 16px 24px;
+  }
+  
+  /* 配置页面的 actions 保持正常流式布局 */
+  #tab-config .actions {
+    position: relative;
+    padding: 16px 0;
+    flex-direction: column;
+  }
+  
+  #tab-config .actions button {
+    width: 100%;
+  }
+
+  /* 为生成页面预留底部空间 */
+  #tab-t2i .card,
+  #tab-i2i .card,
+  #tab-inpaint .card {
+    padding-bottom: 90px;
+  }
+
+  /* 结果展示优化 */
+  .result {
+    margin-top: 16px;
+    gap: 16px;
+  }
+  
+  .result img {
+    border-radius: 16px;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+  }
+
+  /* 保存路径显示优化 */
+  .saved-path {
+    grid-template-columns: 1fr;
+    gap: 8px;
+  }
+  
+  .saved-path label {
+    font-size: 13px;
+  }
+  
+  .saved-path input {
+    font-size: 13px;
+    padding: 10px 12px;
+  }
+
+  /* Toast 优化 */
+  .toast {
+    bottom: 90px;
+    max-width: calc(100% - 32px);
+    padding: 12px 16px;
+    font-size: 15px;
+  }
+
+  /* 标题优化 */
+  h2 {
+    font-size: 20px;
+    margin: 0 0 16px;
+  }
+
+  /* 标签字体优化 */
+  label {
+    font-size: 15px;
+  }
+  
+  label > span {
+    font-weight: 600;
+    margin-bottom: 4px;
+  }
+
+  /* 信息提示优化 */
+  .message {
+    font-size: 14px;
+    margin-top: 12px;
+  }
+
+  /* 滚动条隐藏（更流畅的移动体验） */
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: var(--border) transparent;
+  }
+  
+  *::-webkit-scrollbar {
+    width: 2px;
+    height: 2px;
+  }
+  
+  *::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  
+  *::-webkit-scrollbar-thumb {
+    background: var(--border);
+    border-radius: 2px;
   }
 }

server.js

@@ -36,6 +36,8 @@ const app = express();
 const ROOT = __dirname;
 const FRONTEND_DIR = path.join(ROOT, 'frontend');
 const RING_DIR = path.join(ROOT, 'ring');
+const IMAGE_DIR = path.join(ROOT, 'image');
+const IMAGE2_DIR = path.join(ROOT, 'image2');
 const CONFIG_PATH = path.join(ROOT, 'backend', 'config.json');
 
 // ---------- 中间件 ----------
@@ -356,6 +358,12 @@ app.get('/favicon.ico', (req, res) => res.status(204).end());
 
 // ---------- 静态资源 ----------
 
+// 背景图片目录（电脑端）
+app.use('/image', express.static(IMAGE_DIR, { fallthrough: true }));
+
+// 背景图片目录（手机端）
+app.use('/image2', express.static(IMAGE2_DIR, { fallthrough: true }));
+
 // 铃声目录
 app.use('/ring', express.static(RING_DIR, { fallthrough: true }));
 

背景图片说明.md

@@ -0,0 +1,68 @@
+# 背景图片使用说明
+
+## 目录结构
+
+- `image/` - 电脑端（桌面端）背景图片目录
+- `image2/` - 手机端背景图片目录
+
+## 如何更换背景图片
+
+### 电脑端背景
+
+1. 将您的背景图片重命名为 `windows7.jpg`
+2. 替换到 `image/` 目录下
+3. 支持的格式：`.jpg`, `.jpeg`, `.png`, `.webp`, `.gif`
+4. 建议尺寸：1920x1080 或更高分辨率
+
+### 手机端背景
+
+1. 将您的背景图片重命名为 `punk.png`
+2. 替换到 `image2/` 目录下
+3. 支持的格式：`.jpg`, `.jpeg`, `.png`, `.webp`, `.gif`
+4. 建议尺寸：1080x1920 或适合竖屏的分辨率
+
+## 自定义文件名
+
+如果您想使用不同的文件名，请按以下步骤修改：
+
+### 修改电脑端背景文件名
+
+1. 打开 `frontend/assets/style.css`
+2. 找到第 33 行：
+   ```css
+   background-image: url('/image/windows7.jpg');
+   ```
+3. 将 `windows7.jpg` 改为您的文件名
+4. 保存文件并重启服务器
+
+### 修改手机端背景文件名
+
+1. 打开 `frontend/assets/style.css`
+2. 找到约 462 行（在 `@media (max-width: 640px)` 内）：
+   ```css
+   background-image: url('/image2/punk.png');
+   ```
+3. 将 `punk.png` 改为您的文件名
+4. 保存文件并重启服务器
+
+## 背景效果说明
+
+- **遮罩层**：为了提升界面可读性，背景图片上会有一层半透明遮罩
+- **深色模式**：遮罩透明度为 50%（更暗）
+- **浅色模式**：遮罩透明度为 60%（更亮）
+- **固定背景**：桌面端背景图片固定不随滚动移动
+
+## 提示
+
+- 图片文件不宜过大，建议不超过 5MB，以免影响加载速度
+- 可以使用在线图片压缩工具优化图片大小
+- 建议选择对比度适中的图片，避免影响文字阅读
+- 更换图片后需要刷新浏览器（Ctrl+F5 强制刷新）才能看到效果
+
+## 注意事项
+
+⚠️ 请确保图片文件具有适当的权限，服务器需要能够读取这些文件。
+
+✅ 支持的图片格式：JPG, JPEG, PNG, WebP, GIF
+
+❌ 不支持的格式：BMP, TIFF, SVG（需要特殊处理）