hd4k-downloader/frontend/index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<title>4KHD Downloader</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div class="app">

  <header class="bar">
    <div class="brand">
      <span class="logo">🐳</span>
      <div>
        <h1>4KHD Downloader</h1>
        <p class="sub">4KHD 画廊批量下载 · 图片直链协议 · Wails</p>
      </div>
    </div>
    <div class="actions">
      <button id="btn-import" class="btn">导入链接</button>
      <button id="btn-start" class="btn primary">开始下载</button>
      <button id="btn-stop" class="btn danger" disabled>停止</button>
      <button id="btn-clear" class="btn" title="清除已完成的任务列表项，并顺带删掉画廊目录里小于 10KB 的过小图片（占位图/损坏图）。正常图片不会动。">清除已完成</button>
      <button id="btn-delsel" class="btn danger" disabled title="删除勾选的任务。已下载的文件不会删除。">删除选中</button>
      <button id="btn-clearall" class="btn danger" title="清空整个任务列表。本地已下载的文件不会删除。">删除全部</button>
      <button id="btn-settings" class="btn icon" title="设置">⚙</button>
    </div>
  </header>

  <div class="stats" id="stats">
    <div class="stat"><b id="s-total">0</b><span>全部</span></div>
    <div class="stat queued"><b id="s-queued">0</b><span>等待</span></div>
    <div class="stat running"><b id="s-running">0</b><span>进行</span></div>
    <div class="stat done"><b id="s-done">0</b><span>完成</span></div>
    <div class="stat failed"><b id="s-failed">0</b><span>失败</span></div>
    <div class="stat progress-wrap">
      <div class="pbar"><i id="s-bar"></i></div>
      <span id="s-text">—</span>
    </div>
  </div>

  <main class="main">
    <table class="tasks" id="tasks">
      <thead>
        <tr>
          <th class="c-sel"><input type="checkbox" id="sel-all" /></th>
          <th class="c-gid">名称</th>
          <th class="c-title">标题</th>
          <th class="c-prog">进度</th>
          <th class="c-stat">状态</th>
          <th class="c-act">操作</th>
        </tr>
      </thead>
      <tbody id="tbody"></tbody>
    </table>
    <div class="empty" id="empty">
      <div class="empty-inner">
        <p class="big">还没有任务</p>
        <p>点「导入链接」，粘贴 <code>https://migmg.ssuu.uk/content/09/myua-sweetbox-vol52.html</code></p>
        <p class="dim">一行一个画廊，也支持逗号/制表符分隔。装了油猴脚本的话，浏览时点一下按钮更快。</p>
      </div>
    </div>
  </main>

  <section class="logpane" id="logpane">
    <div class="log-head" id="log-head">
      <span class="caret">▸</span>
      <span>日志</span>
      <span class="log-count" id="log-count"></span>
      <div class="spacer"></div>
      <button class="mini" id="btn-clearlog">清空</button>
      <button class="mini" id="btn-togglelog">展开</button>
    </div>
    <div class="log-body" id="log-body"></div>
  </section>

</div>

<!-- 导入 -->
<div class="modal" id="modal-import" hidden>
  <div class="sheet">
    <h2>导入画廊链接</h2>
    <p class="hint">支持完整链接 <code>https://站点域名/content/{分类}/{名字}.html</code>。每行一个，<code>/2</code>、<code>/3</code> 这类分页后缀会自动归一到第 1 页。</p>
    <textarea id="import-text" placeholder="https://migmg.ssuu.uk/content/09/myua-sweetbox-vol52.html&#10;https://migmg.ssuu.uk/content/11/another-gallery.html"></textarea>
    <div class="row">
      <input type="file" id="import-file" accept=".txt,text/plain" />
    </div>
    <div class="sheet-foot">
      <span class="msg" id="import-msg"></span>
      <button class="btn" id="btn-import-cancel">取消</button>
      <button class="btn primary" id="btn-import-ok">导入</button>
    </div>
  </div>
</div>

<!-- 通用确认 -->
<div class="modal" id="modal-confirm" hidden>
  <div class="sheet narrow">
    <h2 id="cf-title">确认</h2>
    <p class="hint" id="cf-body"></p>
    <div class="sheet-foot">
      <span class="msg" id="cf-msg"></span>
      <button class="btn" id="cf-cancel">取消</button>
      <button class="btn danger" id="cf-ok">确认</button>
    </div>
  </div>
</div>

<!-- 设置 -->
<div class="modal" id="modal-settings" hidden>
  <div class="sheet">
    <h2>设置</h2>

    <label class="field">
      <span>站点域名</span>
      <div id="set-sites"></div>
      <div class="row" style="margin-top:6px">
        <button class="btn" id="btn-site-add" type="button">+ 添加域名</button>
      </div>
      <small>这类采集站随时换域名（实测 www.4khd.com / m.4khd.com 已全部 404）。
      换域名后在这里加一行，后端解析和油猴脚本的 @match 都会跟着更新，不用改代码。</small>
    </label>

    <label class="field">
      <span>下载目录</span>
      <div class="row">
        <input type="text" id="set-dir" />
        <button class="btn" id="btn-pickdir">选择…</button>
      </div>
    </label>

    <label class="field">
      <span>目录结构模板</span>
      <div class="row">
        <input type="text" id="set-dirtpl" placeholder="{title}" />
      </div>
      <div class="presets" id="dir-presets"></div>
      <small id="dir-preview"></small>
      <small>占位符：<code>{title} {name} {slug} {host} {category} {id}</code><br>
      换模板不会重下已完成的图 —— 引擎会先去老的「标题目录」里找。</small>
    </label>

    <label class="field">
      <span>代理模式</span>
      <select id="set-proxymode">
        <option value="off">不使用代理（直连）</option>
        <option value="http">HTTP / HTTPS 代理</option>
        <option value="socks5">SOCKS5 代理</option>
      </select>
    </label>

    <label class="field">
      <span>代理地址</span>
      <input type="text" id="set-proxy" placeholder="http://127.0.0.1:7890 或 socks5://127.0.0.1:1080" />
      <small>直连能通就不用填。不通的话填本机代理端口（mihomo 默认 7890）。</small>
    </label>

    <label class="field">
      <span>画廊并发：<b id="set-gconc-v">5</b> 个</span>
      <input type="range" id="set-gconc" min="1" max="20" step="1" value="5" />
      <small>同时处理几个画廊。</small>
    </label>

    <label class="field">
      <span>单画廊图片并发：<b id="set-pconc-v">8</b> 张</span>
      <input type="range" id="set-pconc" min="1" max="20" step="1" value="8" />
      <small>每个画廊内部同时下几张图。<br>
      总并发 = 画廊并发 × 图并发，默认 <b id="set-max">40</b> 张同时下载。</small>
    </label>

    <label class="field">
      <span>请求间隔：<b id="set-interval-v">0</b> 秒</span>
      <input type="range" id="set-interval" min="0" max="50" step="1" value="0" />
      <small>所有请求之间的最小间隔（全局生效，含翻页抓取与图片下载）。0 = 不限流。<br>
      图片走 Jetpack Photon CDN，打快了会吃 429，遇到的话调到 1~2 秒。</small>
    </label>

    <label class="field">
      <span>请求超时：<b id="set-to-v">30</b> 秒</span>
      <input type="range" id="set-to" min="10" max="120" step="5" value="30" />
    </label>

    <label class="field">
      <span>油猴推送端口</span>
      <input type="text" id="set-bridgeport" placeholder="37778" />
      <small>本地桥口端口，供油猴脚本推送画廊用。改这里的话，油猴脚本里的 PORT 也要同步改。<br>
      启动日志里有「本地桥口已就绪 http://127.0.0.1:端口」那行，可用来确认实际生效端口。</small>
    </label>

    <div class="sheet-foot">
      <span class="msg" id="set-msg"></span>
      <button class="btn" id="btn-settings-cancel">取消</button>
      <button class="btn primary" id="btn-settings-ok">保存</button>
    </div>
  </div>
</div>

<script src="wailsjs/go/main/App.js"></script>
<script src="wailsjs/runtime/runtime.js"></script>
<script src="js/api.js"></script>
<script src="js/renderer.js"></script>
</body>
</html>