diff --git a/README.md b/README.md index 61c6492..53b8776 100644 --- a/README.md +++ b/README.md @@ -36,6 +36,14 @@ - 访问路径:`/` - 内容包含:项目简介、健康检查入口、触发 Seed 抓取入口、免责声明与推荐公共 CDN 列表、已缓存资源的可视化列表(仅展示可直接复制的完整 URL) - 目的:为内部用户提供更直观的访问入口与使用指引 + +### 缓存区布局优化说明 + +- 字体与文本:统一行高与字间距,`url` 文本支持多行折行显示并保留省略控制,确保在窄屏下仍具可读性 +- 按钮与控件:增大最小高度与内边距,提升可点击区域;工具栏分为上下两行以避免拥挤 +- 布局优化:工具栏采用两行分组(类型/时间/刷新、搜索/排序/方向/页容量),列表卡片增加间距与对比度 +- 视觉一致性:沿用暗色科技风、玻璃拟态渐变与细边框,悬停有轻微抬升与阴影反馈 +- 响应式适配:≥1100px 两列卡片、<760px 单列;工具栏在小屏纵向排列,输入与选择控件宽度自适应 - 高级功能:分页加载(20–50/页)、按名称/类型/更新时间过滤、按名称/大小/时间排序、懒加载与轻量虚拟滚动、统一暗色科技风视觉与动画 ## 使用声明(免责声明) @@ -161,4 +169,7 @@ - 新增前端首页与公共静态目录(`public/`),主页包含免责声明及推荐公共 CDN 列表 - 新增 `GET /api/list-cache` 接口,支持过滤、限制与前端展示一键复制 - 升级首页缓存区域视觉与交互:统一暗色科技风、移除相对路径展示、仅保留完整 URL 复制与打开、优化响应式布局与过渡动画 - - 增强缓存管理:分页加载(20–50/页)、按名称/类型/更新时间过滤、按名称/大小/时间排序、轻量虚拟滚动与懒加载、元数据解析(库名/版本/扩展名/类别) +- 增强缓存管理:分页加载(20–50/页)、按名称/类型/更新时间过滤、按名称/大小/时间排序、轻量虚拟滚动与懒加载、元数据解析(库名/版本/扩展名/类别) +- 修复分段筛选:切换 `CSS/JS/全部` 时重置分页并重新加载 +- 静态缓存优化:`/` 与 HTML 响应禁用缓存;为首页 CSS/JS 增加版本参数以避免浏览器缓存旧样式与脚本 + - 页面视觉细节:为 `header` 与 `main` 增加间距(≥30px),背景设置 `background-attachment: fixed` 并覆盖视窗(居中、等比、无重复) diff --git a/public/app.js b/public/app.js index 8df00fc..a3c4e30 100644 --- a/public/app.js +++ b/public/app.js @@ -153,7 +153,7 @@ segBtns.forEach(b => b.classList.remove('is-active')) btn.classList.add('is-active') state.type = btn.dataset.type || '' - load() + load(true) }) }) elSearch.addEventListener('input', () => { diff --git a/public/index.html b/public/index.html index cc7072d..02214bd 100644 --- a/public/index.html +++ b/public/index.html @@ -7,7 +7,7 @@ - +
@@ -71,34 +71,38 @@

已缓存资源

-
-
- - - +
+
+
+ + + +
+ + +
+
+ + + +
- - - - - -
加载中...
@@ -116,15 +120,12 @@ - + diff --git a/public/styles.css b/public/styles.css index 0c351d3..1b71bdf 100644 --- a/public/styles.css +++ b/public/styles.css @@ -16,6 +16,10 @@ 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); + background-attachment: fixed; + background-repeat: no-repeat; + background-size: cover; + background-position: center center; color: var(--fg); } @@ -29,6 +33,7 @@ body { 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); + margin-bottom: 36px; } .hero h1 { font-size: 44px; margin: 0; letter-spacing: 0.5px; } .hero .subtitle { font-weight: 700; color: var(--primary-2); margin: 12px 0 8px; } @@ -83,30 +88,31 @@ main { padding: 40px 0; } .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; } } +@media (max-width: 600px) { .grid { grid-template-columns: 1fr; } .hero { padding: 64px 0 36px; margin-bottom: 30px; } } /* 缓存列表 */ .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; } +.cache-header { display: flex; flex-direction: column; gap: 16px; } +.cache-header h2 { margin: 0; font-size: 22px; letter-spacing: 0.3px; } +.toolbar { display: grid; gap: 12px; } +.toolbar-top, .toolbar-bottom { display: flex; flex-wrap: wrap; gap: 10px; 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 { background: transparent; color: var(--muted); border: 0; padding: 10px 14px; border-radius: 10px; cursor: pointer; min-height: 40px; } .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; } +.search { background: #0e1424; border: 1px solid var(--border); color: var(--fg); padding: 12px 14px; border-radius: 12px; width: 320px; min-height: 40px; } +.select { background: #0e1424; border: 1px solid var(--border); color: var(--fg); padding: 12px 14px; border-radius: 12px; min-height: 40px; } .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; } +.list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 18px; } +.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: 16px; 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; } +.item .row { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: flex-start; margin-bottom: 6px; } .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; } +.url { display: block; padding: 12px 14px; background: #0e1424; border: 1px solid var(--border); border-radius: 12px; color: var(--primary-2); line-height: 1.5; letter-spacing: 0.2px; white-space: normal; word-break: break-all; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .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; } +.actions { display: flex; gap: 12px; margin-top: 12px; flex-wrap: wrap; } +.btn.small { padding: 10px 12px; border-radius: 10px; font-size: 14px; min-height: 40px; } .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; } @@ -116,5 +122,17 @@ main { padding: 40px 0; } .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; } } +@media (max-width: 1100px) { + .list { grid-template-columns: 1fr 1fr; } + .search { width: 280px; } +} +@media (max-width: 900px) { + .toolbar-top, .toolbar-bottom { gap: 8px; } + .search { width: 220px; } +} +@media (max-width: 760px) { + .list { grid-template-columns: 1fr; } + .search { width: 100%; } + .item { padding: 14px; border-radius: 14px; } + .toolbar-top, .toolbar-bottom { flex-direction: column; align-items: stretch; } +} diff --git a/server.js b/server.js index 841409d..ba05ab5 100644 --- a/server.js +++ b/server.js @@ -41,8 +41,16 @@ function ensureCacheDirs() { */ function registerPublicHomepage(app) { if (!fs.existsSync(PUBLIC_DIR)) fs.mkdirSync(PUBLIC_DIR) - app.use(express.static(PUBLIC_DIR, { maxAge: '1h' })) + app.use(express.static(PUBLIC_DIR, { + maxAge: '1h', + setHeaders: (res, filePath) => { + if (path.extname(filePath) === '.html') { + res.setHeader('Cache-Control', 'no-cache') + } + } + })) app.get('/', (req, res) => { + res.set('Cache-Control', 'no-cache') res.sendFile(path.join(PUBLIC_DIR, 'index.html')) }) }