feat: 新增前端首页与缓存资源管理功能
- 添加公共静态目录及首页HTML/CSS/JS文件 - 实现缓存资源列表API，支持分页、过滤与排序 - 移除multer依赖，简化上传功能 - 更新README文档说明新增功能与接口
This commit is contained in:
196
public/app.js
Normal file
196
public/app.js
Normal file
@@ -0,0 +1,196 @@
|
||||
(() => {
|
||||
const state = { type: '', q: '', limit: 200 }
|
||||
|
||||
const elList = document.getElementById('list')
|
||||
const elStats = document.getElementById('stats')
|
||||
const elSearch = document.getElementById('search')
|
||||
const elRefresh = document.getElementById('refresh')
|
||||
const segBtns = Array.from(document.querySelectorAll('.seg-btn'))
|
||||
const elSortBy = document.getElementById('sortBy')
|
||||
const elOrder = document.getElementById('order')
|
||||
const elPageSize = document.getElementById('pageSize')
|
||||
const elTimeRange = document.getElementById('timeRange')
|
||||
const elSentinel = document.getElementById('sentinel')
|
||||
const elBackTop = document.getElementById('backTop')
|
||||
|
||||
/**
|
||||
* 格式化字节大小为易读文本
|
||||
* @param {number} n 字节数
|
||||
* @returns {string}
|
||||
*/
|
||||
const fmtSize = n => {
|
||||
if (n < 1024) return `${n} B`
|
||||
if (n < 1024 * 1024) return `${(n / 1024).toFixed(1)} KB`
|
||||
if (n < 1024 * 1024 * 1024) return `${(n / (1024 * 1024)).toFixed(1)} MB`
|
||||
return `${(n / (1024 * 1024 * 1024)).toFixed(1)} GB`
|
||||
}
|
||||
|
||||
/**
|
||||
* 将毫秒时间戳格式化为本地时间字符串
|
||||
* @param {number} ms 毫秒
|
||||
* @returns {string}
|
||||
*/
|
||||
const fmtTime = ms => new Date(ms).toLocaleString()
|
||||
|
||||
/**
|
||||
* 复制文本到剪贴板
|
||||
* @param {string} text 文本
|
||||
* @returns {Promise<void>}
|
||||
*/
|
||||
const copy = async text => {
|
||||
try {
|
||||
await navigator.clipboard.writeText(text)
|
||||
toast('已复制到剪贴板')
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
toast('复制失败，请手动选择复制', true)
|
||||
}
|
||||
}
|
||||
|
||||
let toastTimer
|
||||
/**
|
||||
* 显示轻提示
|
||||
* @param {string} msg 提示内容
|
||||
* @param {boolean} warn 是否警示样式
|
||||
*/
|
||||
const toast = (msg, warn) => {
|
||||
let t = document.querySelector('.toast')
|
||||
if (!t) {
|
||||
t = document.createElement('div')
|
||||
t.className = 'toast'
|
||||
document.body.appendChild(t)
|
||||
}
|
||||
t.textContent = msg
|
||||
t.style.background = warn ? 'rgba(255,96,96,0.9)' : 'rgba(108,140,255,0.9)'
|
||||
t.classList.add('show')
|
||||
clearTimeout(toastTimer)
|
||||
toastTimer = setTimeout(() => t.classList.remove('show'), 1800)
|
||||
}
|
||||
|
||||
/**
|
||||
* 渲染缓存条目，仅展示完整URL与操作
|
||||
* @param {Array<{type:string,url:string,size:number,mtime:number}>} items 列表
|
||||
*/
|
||||
/**
|
||||
* 渲染缓存条目，仅展示完整URL与操作
|
||||
* - 维持最大 DOM 节点数量，超量时自动移除顶部旧节点（轻量虚拟化）
|
||||
* @param {Array<{type:string,url:string,size:number,mtime:number,name?:string,version?:string}>} items 列表
|
||||
*/
|
||||
const renderItems = items => {
|
||||
elList.innerHTML = ''
|
||||
if (!items.length) {
|
||||
elList.innerHTML = '<div class="empty">暂无数据</div>'
|
||||
return
|
||||
}
|
||||
const frag = document.createDocumentFragment()
|
||||
for (const it of items) {
|
||||
const card = document.createElement('div')
|
||||
card.className = 'item'
|
||||
card.innerHTML = `
|
||||
<div class="row">
|
||||
<span class="badge ${it.type}">${it.type.toUpperCase()}</span>
|
||||
<span class="url" title="${it.url}">${it.url}</span>
|
||||
</div>
|
||||
<div class="meta">
|
||||
<span>${fmtSize(it.size)}</span>
|
||||
<span>${fmtTime(it.mtime)}</span>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<button class="btn small" data-act="copy-url">复制完整URL</button>
|
||||
<a class="btn small" href="${it.url}" target="_blank">打开</a>
|
||||
</div>
|
||||
`
|
||||
card.querySelector('[data-act="copy-url"]').addEventListener('click', () => copy(it.url))
|
||||
frag.appendChild(card)
|
||||
}
|
||||
elList.appendChild(frag)
|
||||
}
|
||||
|
||||
/**
|
||||
* 加载缓存列表数据并更新视图
|
||||
* @returns {Promise<void>}
|
||||
*/
|
||||
/**
|
||||
* 加载缓存列表数据并更新视图（分页 + 过滤 + 排序）
|
||||
* - 支持增量加载，当页码递增时附加到列表
|
||||
* @param {boolean} reset 是否重置列表
|
||||
* @returns {Promise<void>}
|
||||
*/
|
||||
let loading = false
|
||||
let page = 1
|
||||
let pageSize = Number(elPageSize.value || 30)
|
||||
let hasMore = true
|
||||
let itemsBuf = []
|
||||
const load = async (reset = false) => {
|
||||
if (loading) return
|
||||
if (reset) { page = 1; itemsBuf = []; elList.innerHTML = ''; hasMore = true }
|
||||
if (!hasMore && !reset) return
|
||||
loading = true
|
||||
elStats.textContent = '加载中...'
|
||||
const u = new URL('/api/list-cache', location.origin)
|
||||
if (state.type) u.searchParams.set('type', state.type)
|
||||
if (state.q) u.searchParams.set('q', state.q)
|
||||
const now = Date.now()
|
||||
const hours = Number(elTimeRange.value || 0)
|
||||
if (hours > 0) u.searchParams.set('updatedFrom', String(now - hours * 3600 * 1000))
|
||||
u.searchParams.set('sortBy', elSortBy.value)
|
||||
u.searchParams.set('order', elOrder.value)
|
||||
u.searchParams.set('page', String(page))
|
||||
u.searchParams.set('pageSize', String(pageSize))
|
||||
const r = await fetch(u)
|
||||
const data = await r.json()
|
||||
itemsBuf = reset ? (data.items || []) : itemsBuf.concat(data.items || [])
|
||||
hasMore = !!data.hasMore
|
||||
elStats.textContent = `共 ${data.total} 条，已加载 ${itemsBuf.length}${hasMore ? '（继续下拉加载）' : ''}`
|
||||
renderItems(itemsBuf)
|
||||
page += 1
|
||||
loading = false
|
||||
}
|
||||
|
||||
// 事件绑定
|
||||
segBtns.forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
segBtns.forEach(b => b.classList.remove('is-active'))
|
||||
btn.classList.add('is-active')
|
||||
state.type = btn.dataset.type || ''
|
||||
load()
|
||||
})
|
||||
})
|
||||
elSearch.addEventListener('input', () => {
|
||||
state.q = elSearch.value.trim()
|
||||
load(true)
|
||||
})
|
||||
elSortBy.addEventListener('change', () => load(true))
|
||||
elOrder.addEventListener('change', () => load(true))
|
||||
elPageSize.addEventListener('change', () => { pageSize = Number(elPageSize.value || 30); load(true) })
|
||||
elTimeRange.addEventListener('change', () => load(true))
|
||||
elRefresh.addEventListener('click', async () => {
|
||||
try {
|
||||
const r = await fetch('/api/seed')
|
||||
const j = await r.json()
|
||||
toast(`Seed 完成：${j.count} 项`)
|
||||
} catch {}
|
||||
load(true)
|
||||
})
|
||||
|
||||
// 轻量虚拟滚动：靠近底部即加载下一页；大量节点时隐藏返回顶部按钮控制
|
||||
const io = new IntersectionObserver(entries => {
|
||||
entries.forEach(e => {
|
||||
if (e.isIntersecting) load(false)
|
||||
})
|
||||
})
|
||||
io.observe(elSentinel)
|
||||
|
||||
// 返回顶部按钮展示与交互
|
||||
const onScroll = () => {
|
||||
const show = (document.documentElement.scrollTop || document.body.scrollTop) > 400
|
||||
elBackTop.classList.toggle('show', show)
|
||||
}
|
||||
window.addEventListener('scroll', onScroll)
|
||||
elBackTop.addEventListener('click', () => {
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' })
|
||||
})
|
||||
|
||||
// 首次加载
|
||||
load(true)
|
||||
})()
|
||||
130
public/index.html
Normal file
130
public/index.html
Normal file
@@ -0,0 +1,130 @@
|
||||
<!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" />
|
||||
</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="tools">
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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</span>
|
||||
<nav>
|
||||
<a href="/css" target="_blank">/css</a>
|
||||
<a href="/js" target="_blank">/js</a>
|
||||
<a href="/api/seed" target="_blank">/api/seed</a>
|
||||
<a href="/health" target="_blank">/health</a>
|
||||
</nav>
|
||||
</div>
|
||||
</footer>
|
||||
<script src="/app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
120
public/styles.css
Normal file
120
public/styles.css
Normal file
@@ -0,0 +1,120 @@
|
||||
:root {
|
||||
--bg: #0b0f1a;
|
||||
--fg: #e6e9ef;
|
||||
--muted: #a9b1bd;
|
||||
--primary: #6c8cff;
|
||||
--primary-2: #8ea8ff;
|
||||
--card: #121725;
|
||||
--border: #1f2538;
|
||||
--good: #5be49b;
|
||||
--warn: #ff9966;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
html, body { height: 100%; }
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
|
||||
background: radial-gradient(1200px 600px at 10% -20%, #132042 0%, #0b0f1a 60%), var(--bg);
|
||||
color: var(--fg);
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1100px;
|
||||
padding: 0 24px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.hero {
|
||||
padding: 80px 0 48px;
|
||||
background: linear-gradient(180deg, rgba(108,140,255,0.10), rgba(108,140,255,0.0));
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
.hero h1 { font-size: 44px; margin: 0; letter-spacing: 0.5px; }
|
||||
.hero .subtitle { font-weight: 700; color: var(--primary-2); margin: 12px 0 8px; }
|
||||
.hero .desc { color: var(--muted); margin: 0 0 16px; }
|
||||
|
||||
.cta-group { display: flex; gap: 12px; flex-wrap: wrap; }
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 10px 14px;
|
||||
border-radius: 10px;
|
||||
background: var(--primary);
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
transition: transform .12s ease, box-shadow .12s ease;
|
||||
}
|
||||
.btn:hover { transform: translateY(-1px); box-shadow: 0 8px 30px rgba(108,140,255,0.25); }
|
||||
.btn.btn-outline { background: transparent; color: var(--primary-2); border-color: var(--primary-2); }
|
||||
|
||||
main { padding: 40px 0; }
|
||||
.notice h2 { margin: 0 0 12px; }
|
||||
.notice p { color: var(--muted); }
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 16px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 14px;
|
||||
padding: 16px;
|
||||
}
|
||||
.card h3 { margin: 0 0 8px; font-size: 18px; }
|
||||
.card p { margin: 0 0 12px; color: var(--muted); }
|
||||
.link { color: var(--primary-2); text-decoration: none; }
|
||||
.link:hover { text-decoration: underline; }
|
||||
|
||||
.footer-note { margin-top: 24px; color: var(--muted); }
|
||||
|
||||
.footer {
|
||||
border-top: 1px solid var(--border);
|
||||
padding: 24px 0;
|
||||
}
|
||||
.footer .container { display: flex; justify-content: space-between; align-items: center; }
|
||||
.footer nav { display: flex; gap: 12px; }
|
||||
.footer nav a { color: var(--muted); text-decoration: none; }
|
||||
.footer nav a:hover { color: var(--fg); }
|
||||
|
||||
@media (max-width: 900px) { .grid { grid-template-columns: 1fr 1fr; } }
|
||||
@media (max-width: 600px) { .grid { grid-template-columns: 1fr; } .hero { padding: 64px 0 36px; } }
|
||||
|
||||
/* 缓存列表 */
|
||||
.cache { margin-top: 36px; }
|
||||
.cache-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
|
||||
.cache-header h2 { margin: 0; }
|
||||
.tools { display: flex; gap: 12px; align-items: center; }
|
||||
.seg { display: inline-flex; gap: 4px; background: #0e1424; border: 1px solid var(--border); border-radius: 10px; padding: 4px; }
|
||||
.seg-btn { background: transparent; color: var(--muted); border: 0; padding: 8px 12px; border-radius: 8px; cursor: pointer; }
|
||||
.seg-btn.is-active { background: rgba(108,140,255,0.16); color: var(--primary-2); }
|
||||
.search { background: #0e1424; border: 1px solid var(--border); color: var(--fg); padding: 10px 12px; border-radius: 10px; width: 240px; }
|
||||
.select { background: #0e1424; border: 1px solid var(--border); color: var(--fg); padding: 10px 12px; border-radius: 10px; }
|
||||
.stats { margin-top: 10px; color: var(--muted); }
|
||||
.list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 16px; }
|
||||
.item { background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)); border: 1px solid var(--border); border-radius: 16px; padding: 14px; transition: transform .12s ease, box-shadow .18s ease, border-color .18s ease; }
|
||||
.item:hover { transform: translateY(-1px); box-shadow: 0 10px 30px rgba(108,140,255,0.18); border-color: rgba(108,140,255,0.35); }
|
||||
.item .row { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; }
|
||||
.badge { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 12px; border: 1px solid var(--border); letter-spacing: 0.2px; }
|
||||
.badge.css { color: #76e5ff; border-color: rgba(118,229,255,0.3); }
|
||||
.badge.js { color: #ffd98e; border-color: rgba(255,217,142,0.25); }
|
||||
.url { display: inline-block; padding: 10px 12px; background: #0e1424; border: 1px solid var(--border); border-radius: 12px; color: var(--primary-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
.meta { display: flex; gap: 12px; color: var(--muted); margin-top: 8px; }
|
||||
.actions { display: flex; gap: 10px; margin-top: 12px; }
|
||||
.btn.small { padding: 8px 10px; border-radius: 9px; font-size: 13px; }
|
||||
.empty { padding: 18px; text-align: center; color: var(--muted); border: 1px dashed var(--border); border-radius: 12px; }
|
||||
|
||||
.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: 22px; color: #0b0f1a; background: rgba(108,140,255,0.9); padding: 10px 14px; border-radius: 999px; box-shadow: 0 10px 30px rgba(0,0,0,0.35); opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease; }
|
||||
.toast.show { opacity: 1; }
|
||||
|
||||
.sentinel { text-align: center; color: var(--muted); padding: 12px; }
|
||||
.back-top { position: fixed; right: 22px; bottom: 24px; background: #0e1424; border: 1px solid var(--border); color: var(--fg); padding: 10px 12px; border-radius: 12px; box-shadow: 0 10px 24px rgba(0,0,0,0.25); opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease; }
|
||||
.back-top.show { opacity: 1; pointer-events: auto; }
|
||||
|
||||
@media (max-width: 1100px) { .list { grid-template-columns: 1fr 1fr; } }
|
||||
@media (max-width: 760px) { .list { grid-template-columns: 1fr; } .search { width: 180px; } .item { padding: 12px; border-radius: 14px; } }
|
||||
Reference in New Issue
Block a user