Snowz
471ed156af
- 将工具栏分为上下两行布局，优化窄屏下的显示效果 - 增加元素间距和可点击区域，提升用户体验 - 修复切换CSS/JS/全部时未重置分页的问题 - 禁用首页和HTML文件的缓存，避免浏览器缓存旧版本 - 更新README文档说明布局优化细节
132 lines
5.8 KiB
HTML
132 lines
5.8 KiB
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>
|