diff --git a/assets/css/style.css b/assets/css/style.css index 3ed9141..a377197 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -405,6 +405,31 @@ body { opacity: 1; } +/* 对于触摸设备,添加焦点状态以显示覆盖层 */ +.favorite-card:focus-within .card-overlay { + opacity: 1; +} + +/* 媒体查询:针对触摸设备的特殊处理 */ +@media (hover: none) and (pointer: coarse) { + .favorite-card .card-overlay { + opacity: 0.2; /* 在触摸设备上始终轻微显示覆盖层 */ + } + + .favorite-card:active .card-overlay, + .favorite-card:focus .card-overlay { + opacity: 1; + } +} + +/* 为了兼容性,也为触摸设备上的元素添加焦点样式 */ +@media (hover: hover) and (pointer: fine) { + /* 在非触摸设备上保持原有hover效果 */ + .favorite-card:hover .card-overlay { + opacity: 1; + } +} + .overlay-content { display: flex; gap: 6px; diff --git a/assets/js/app.js b/assets/js/app.js index f020946..ad010c2 100644 --- a/assets/js/app.js +++ b/assets/js/app.js @@ -19,7 +19,7 @@ class ImageLoader { this.cache = new Map(); } - // 加载并解压图片 + // 加载图片 async loadImage(imageId, element) { // 检查缓存 if (this.cache.has(imageId)) { @@ -36,22 +36,10 @@ class ImageLoader { } const contentType = response.headers.get('content-type'); - const contentEncoding = response.headers.get('content-encoding'); - const originalContentType = response.headers.get('x-original-content-type'); - - let imageData; - - if (contentEncoding === 'br') { - // Brotli压缩数据,需要解压 - const compressedData = await response.arrayBuffer(); - imageData = await this.decompressBrotli(compressedData); - } else { - // 未压缩数据 - imageData = await response.blob(); - } + const imageData = await response.blob(); // 创建Blob URL - const mimeType = originalContentType || contentType || 'image/jpeg'; + const mimeType = contentType || 'image/jpeg'; const blob = new Blob([imageData], { type: mimeType }); const blobUrl = URL.createObjectURL(blob); @@ -83,35 +71,6 @@ class ImageLoader { img.src = blobUrl; } - // Brotli解压 - async decompressBrotli(compressedData) { - // 检查浏览器是否支持Brotli解压 - if (window.TextDecoder && window.TextEncoder) { - try { - // 使用浏览器的Brotli解压(如果支持) - if (window.DecompressionStream && 'br' in window) { - const decompressionStream = new DecompressionStream('br'); - const decompressedStream = new Response(compressedData).body.pipeThrough(decompressionStream); - return new Response(decompressedStream).arrayBuffer(); - } - } catch (error) { - console.warn('浏览器Brotli解压失败,使用JavaScript解压:', error); - } - } - - // 使用JavaScript实现的Brotli解压(备用方案) - return await this.decompressBrotliJS(compressedData); - } - - // JavaScript实现的Brotli解压(备用方案) - async decompressBrotliJS(compressedData) { - // 这里可以集成一个轻量级的Brotli解压库 - // 由于Brotli解压比较复杂,这里先返回原始数据 - // 在实际项目中,可以使用第三方库如brotli-wasm - console.warn('Brotli解压未实现,返回原始数据'); - return compressedData; - } - // 清理缓存 clearCache() { // 清理所有Blob URL @@ -890,7 +849,7 @@ function displayFavorites(favoriteImages) { ` : `${favoriteImages.map((fav, index) => ` -