Snowz
911a6a36f8
- 重新设计整体UI布局和样式，采用现代化设计语言 - 添加移动端响应式侧边栏和交互逻辑 - 优化列表加载和搜索功能，增加搜索提示 - 改进按钮样式和交互效果 - 更新.gitignore文件排除设计文档和图片
245 lines
7.8 KiB
JavaScript
245 lines
7.8 KiB
JavaScript
(() => {
|
|
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')
|
|
const elSearchHint = document.getElementById('searchHint')
|
|
const listContainer = document.querySelector('.list-container')
|
|
|
|
// Mobile Sidebar Logic
|
|
const toggleSidebar = document.getElementById('toggleSidebar')
|
|
const sidebar = document.getElementById('sidebar')
|
|
const sidebarOverlay = document.getElementById('sidebarOverlay')
|
|
|
|
if (toggleSidebar && sidebar && sidebarOverlay) {
|
|
const closeSidebar = () => {
|
|
sidebar.classList.remove('open')
|
|
sidebarOverlay.classList.remove('open')
|
|
}
|
|
toggleSidebar.addEventListener('click', () => {
|
|
sidebar.classList.toggle('open')
|
|
sidebarOverlay.classList.toggle('open')
|
|
})
|
|
sidebarOverlay.addEventListener('click', closeSidebar)
|
|
}
|
|
|
|
/**
|
|
* 格式化字节大小为易读文本
|
|
* @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,59,48,0.9)' : 'rgba(0,122,255,0.9)'
|
|
t.classList.add('show')
|
|
clearTimeout(toastTimer)
|
|
toastTimer = setTimeout(() => t.classList.remove('show'), 1800)
|
|
}
|
|
|
|
/**
|
|
* 渲染缓存条目
|
|
* @param {Array<{type:string,url:string,size:number,mtime:number}>} 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 outline" data-act="copy-url">复制链接</button>
|
|
<a class="btn small primary" href="${it.url}" target="_blank">打开</a>
|
|
</div>
|
|
`
|
|
card.querySelector('[data-act="copy-url"]').addEventListener('click', () => copy(it.url))
|
|
frag.appendChild(card)
|
|
}
|
|
elList.appendChild(frag)
|
|
}
|
|
|
|
/**
|
|
* 加载缓存列表数据并更新视图（分页 + 过滤 + 排序）
|
|
*/
|
|
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 = '加载中...'
|
|
|
|
// Manage spinner visibility
|
|
const elSpinner = elSentinel.querySelector('.spinner')
|
|
if (elSpinner) elSpinner.style.display = 'block'
|
|
|
|
try {
|
|
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}`
|
|
renderItems(itemsBuf)
|
|
|
|
// Manage search hint visibility
|
|
if (elSearchHint) {
|
|
// Show hint if there is more data on server (hasMore) or simply if list is not empty (as requested)
|
|
// Requirement: "Add explicit search function hint, guiding user to search to get more content"
|
|
// If hasMore is true, it means we only showed a subset.
|
|
// If itemsBuf.length < data.total, we are showing a subset.
|
|
const isPartial = itemsBuf.length < data.total
|
|
elSearchHint.style.display = (isPartial && !loading) ? 'block' : 'none'
|
|
}
|
|
|
|
page += 1
|
|
} catch (e) {
|
|
console.error(e)
|
|
elStats.textContent = '加载失败'
|
|
toast('加载失败', true)
|
|
} finally {
|
|
loading = false
|
|
if (elSpinner) elSpinner.style.display = 'none'
|
|
}
|
|
}
|
|
|
|
// 事件绑定
|
|
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(true)
|
|
})
|
|
})
|
|
|
|
// 防抖搜索
|
|
let searchTimer
|
|
elSearch.addEventListener('input', () => {
|
|
clearTimeout(searchTimer)
|
|
searchTimer = setTimeout(() => {
|
|
state.q = elSearch.value.trim()
|
|
load(true)
|
|
}, 300)
|
|
})
|
|
|
|
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 {
|
|
toast('刷新列表中...')
|
|
// const r = await fetch('/api/seed')
|
|
// const j = await r.json()
|
|
// toast(`Seed 完成：${j.count} 项`)
|
|
} catch {
|
|
toast('请求失败', true)
|
|
}
|
|
load(true)
|
|
})
|
|
|
|
// 虚拟滚动/无限加载
|
|
const io = new IntersectionObserver(entries => {
|
|
entries.forEach(e => {
|
|
if (e.isIntersecting) load(false)
|
|
})
|
|
}, { root: listContainer, rootMargin: '100px' })
|
|
|
|
io.observe(elSentinel)
|
|
|
|
// 返回顶部按钮展示与交互
|
|
const onScroll = () => {
|
|
const show = listContainer.scrollTop > 400
|
|
elBackTop.classList.toggle('show', show)
|
|
}
|
|
listContainer.addEventListener('scroll', onScroll)
|
|
elBackTop.addEventListener('click', () => {
|
|
listContainer.scrollTo({ top: 0, behavior: 'smooth' })
|
|
})
|
|
|
|
// 首次加载
|
|
load(true)
|
|
})()
|