115 lines
3.8 KiB
JavaScript
115 lines
3.8 KiB
JavaScript
// 全局变量
|
|
let allAlbums = [];
|
|
|
|
// API基础URL
|
|
const API_BASE = '/api';
|
|
|
|
// 页面加载完成后初始化
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
loadAlbums();
|
|
});
|
|
|
|
// 加载所有相册
|
|
async function loadAlbums() {
|
|
try {
|
|
const response = await fetch(`${API_BASE}/albums`);
|
|
if (!response.ok) {
|
|
throw new Error(`HTTP error! status: ${response.status}`);
|
|
}
|
|
allAlbums = await response.json();
|
|
displayAlbums(allAlbums);
|
|
updateStats(allAlbums);
|
|
} catch (error) {
|
|
console.error('加载相册失败:', error);
|
|
showError('加载相册数据失败，请刷新页面重试');
|
|
}
|
|
}
|
|
|
|
// 搜索相册
|
|
async function searchAlbums() {
|
|
const searchTerm = document.getElementById('search-input').value.toLowerCase().trim();
|
|
|
|
if (searchTerm === '') {
|
|
// 显示所有相册
|
|
displayAlbums(allAlbums);
|
|
updateStats(allAlbums);
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const response = await fetch(`${API_BASE}/search?q=${encodeURIComponent(searchTerm)}`);
|
|
if (!response.ok) {
|
|
throw new Error(`HTTP error! status: ${response.status}`);
|
|
}
|
|
const filteredAlbums = await response.json();
|
|
displayAlbums(filteredAlbums);
|
|
|
|
if (filteredAlbums.length === 0) {
|
|
document.getElementById('stats').innerHTML = `没有找到包含 "${searchTerm}" 的相册`;
|
|
} else {
|
|
document.getElementById('stats').innerHTML = `找到 ${filteredAlbums.length} 个包含 "${searchTerm}" 的相册`;
|
|
}
|
|
} catch (error) {
|
|
console.error('搜索失败:', error);
|
|
showError('搜索失败，请重试');
|
|
}
|
|
}
|
|
|
|
// 显示相册列表
|
|
function displayAlbums(albums) {
|
|
const container = document.getElementById('albums-container');
|
|
|
|
if (albums.length === 0) {
|
|
container.innerHTML = '<div class="no-results"><i class="fas fa-search"></i><br>没有找到匹配的相册</div>';
|
|
return;
|
|
}
|
|
|
|
container.innerHTML = albums.map(album => {
|
|
// 处理封面图片URL
|
|
let coverImageUrl = '/assets/placeholder.svg';
|
|
if (album.cover_image_id) {
|
|
coverImageUrl = `/api/thumbnail/${album.cover_image_id}`;
|
|
}
|
|
|
|
// 格式化日期
|
|
const createdDate = new Date(album.created_at).toLocaleDateString('zh-CN');
|
|
|
|
return `
|
|
<div class="album-card">
|
|
<div class="album-cover">
|
|
<img src="${coverImageUrl}" alt="${album.title}" onerror="this.src='/assets/placeholder.svg'">
|
|
</div>
|
|
<div class="album-info">
|
|
<h3>${album.title}</h3>
|
|
<div class="album-meta">
|
|
<span><i class="fas fa-images"></i> ${album.image_count} 张图片</span>
|
|
<span><i class="fas fa-calendar"></i> ${createdDate}</span>
|
|
</div>
|
|
<a href="/album?id=${album.id}" class="view-button">
|
|
<i class="fas fa-eye"></i> 查看相册
|
|
</a>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}).join('');
|
|
}
|
|
|
|
// 更新统计信息
|
|
function updateStats(albums) {
|
|
const totalImages = albums.reduce((sum, album) => sum + album.image_count, 0);
|
|
document.getElementById('stats').innerHTML = `共发现 ${albums.length} 个相册，包含 ${totalImages} 张图片`;
|
|
}
|
|
|
|
// 显示错误信息
|
|
function showError(message) {
|
|
const container = document.getElementById('albums-container');
|
|
container.innerHTML = `<div class="no-results"><i class="fas fa-exclamation-triangle"></i><br>${message}</div>`;
|
|
document.getElementById('stats').innerHTML = '';
|
|
}
|
|
|
|
// 键盘事件处理
|
|
function handleKeyPress(event) {
|
|
if (event.key === 'Enter') {
|
|
searchAlbums();
|
|
}
|
|
} |