public/index.html

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Asset Cache - 前端首页</title>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet" />
    <link rel="stylesheet" href="/styles.css?v=20251128" />
  </head>
  <body>
    <header class="hero">
      <div class="container">
        <h1>Asset Cache</h1>
        <p class="subtitle">内部资源缓存与静态分发</p>
        <p class="desc">本网站收录的开源库均仅支持内部使用。</p>
        <div class="cta-group">
          <a class="btn" href="/api/seed" target="_blank">触发一次内置 Seed 抓取</a>
          <a class="btn btn-outline" href="/health" target="_blank">查看健康状态</a>
        </div>
      </div>
    </header>

    <main class="container">
      <section class="notice">
        <h2>使用说明</h2>
        <p>
          为保证外部依赖的稳定性，请优先选择成熟公共 CDN 服务。以下为常用公共库加速服务的入口与地址：
        </p>
      </section>

      <section class="grid">
        <article class="card">
          <h3>BootCDN 加速服务</h3>
          <p>开源项目免费 CDN 服务，主要同步于 CDNJS 仓库。</p>
          <a class="link" href="https://www.bootcdn.cn/" target="_blank" rel="noopener">https://www.bootcdn.cn/</a>
        </article>
        <article class="card">
          <h3>CDNJS 前端公共库</h3>
          <p>由社区维护的大型公共库集合，覆盖范围广。</p>
          <a class="link" href="https://cdnjs.com/" target="_blank" rel="noopener">https://cdnjs.com/</a>
        </article>
        <article class="card">
          <h3>jsDelivr</h3>
          <p>全球 CDN，提供 npm/gh 等来源的静态资源分发。</p>
          <a class="link" href="https://www.jsdelivr.com/" target="_blank" rel="noopener">https://www.jsdelivr.com/</a>
        </article>
        <article class="card">
          <h3>七牛免费 CDN 前端公开库</h3>
          <p>开放静态文件 CDN，覆盖常见开源库。</p>
          <a class="link" href="https://www.staticfile.org/" target="_blank" rel="noopener">https://www.staticfile.org/</a>
        </article>
        <article class="card">
          <h3>又拍云常用 JavaScript 库 CDN 服务</h3>
          <p>托管常用 JS 库，直接通过 CDN 加速引用。</p>
          <a class="link" href="http://jscdn.upai.com/" target="_blank" rel="noopener">http://jscdn.upai.com/</a>
        </article>
        <article class="card">
          <h3>Google Hosted Libraries</h3>
          <p>Google 托管的常用前端库集合（部分地区访问受限）。</p>
          <a class="link" href="https://developers.google.com/speed/libraries" target="_blank" rel="noopener">https://developers.google.com/speed/libraries</a>
        </article>
        <article class="card">
          <h3>Microsoft Ajax CDN</h3>
          <p>微软提供的前端库公共 CDN。</p>
          <a class="link" href="https://ajax.aspnetcdn.com/" target="_blank" rel="noopener">https://ajax.aspnetcdn.com/</a>
        </article>
      </section>

      <section class="cache">
        <div class="cache-header">
          <h2>已缓存资源</h2>
          <div class="toolbar">
            <div class="toolbar-top">
              <div class="seg">
                <button class="seg-btn is-active" data-type="">全部</button>
                <button class="seg-btn" data-type="css">CSS</button>
                <button class="seg-btn" data-type="js">JS</button>
              </div>
              <select id="timeRange" class="select">
                <option value="">全部时间</option>
                <option value="24">最近24小时</option>
                <option value="168">最近7天</option>
                <option value="720">最近30天</option>
              </select>
              <button id="refresh" class="btn">刷新列表</button>
            </div>
            <div class="toolbar-bottom">
              <input id="search" class="search" type="text" placeholder="按名称或路径片段搜索..." />
              <select id="sortBy" class="select">
                <option value="mtime">按更新时间</option>
                <option value="name">按名称</option>
                <option value="size">按大小</option>
              </select>
              <select id="order" class="select">
                <option value="desc">倒序</option>
                <option value="asc">正序</option>
              </select>
              <select id="pageSize" class="select">
                <option value="20">每页20</option>
                <option value="30" selected>每页30</option>
                <option value="50">每页50</option>
              </select>
            </div>
          </div>
        </div>
        <div id="stats" class="stats">加载中...</div>
        <div id="list" class="list"></div>
        <div id="sentinel" class="sentinel">加载更多...</div>
        <button id="backTop" class="back-top" title="回到顶部">↑</button>
      </section>

      <section class="footer-note">
        <p>
          说明：本服务仅用于内部缓存和分发，严禁用于非法用途。若需高可用外部公共库，请使用上方所列 CDN 服务。
        </p>
      </section>
    </main>

    <footer class="footer">
      <div class="container">
        <span>© 2025 Asset Cache & © Photo8 Tools Team</span>
        <nav>
          <a href="https://ckk.photo8.site/Photo8/Asset-cache" target="_blank">项目地址</a>
        </nav>
      </div>
    </footer>
    <script src="/app.js?v=20251128"></script>
  </body>
  </html>