优化卡片内容高度和标题显示

This commit is contained in:
developer
2025-04-23 00:53:23 +08:00
parent 47baa47699
commit e242bd93ec
2 changed files with 13 additions and 37 deletions

View File

@@ -47,44 +47,18 @@ button, .card-hover {
/* 确保卡片内容区域高度一致性 */
.card-hover .flex-grow {
height: 90px; /* 固定高度替代最小高度 */
min-height: 90px;
display: flex;
flex-direction: column;
justify-content: space-between; /* 均匀分布内容 */
}
/* 针对不同长度的标题优化显示 */
.card-hover h3 {
height: 3rem; /* 固定高度替代最小高度 */
min-height: 3rem;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
-webkit-line-clamp: 2; /* 限制两行 */
word-break: break-word; /* 支持长单词换行 */
text-align: center;
transition: all 0.3s ease;
position: relative;
}
/* 添加悬停提示效果 */
.card-hover h3:hover::after {
content: attr(title);
position: absolute;
left: 0;
top: -40px;
background: rgba(0, 0, 0, 0.9);
color: white;
border-radius: 4px;
padding: 6px 8px;
font-size: 0.8rem;
white-space: normal;
max-width: 200px;
z-index: 10;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
pointer-events: none;
opacity: 0;
transform: translateY(5px);
animation: fadeIn 0.2s forwards 0.3s;
-webkit-line-clamp: 2;
}
.card-hover::before {

View File

@@ -634,24 +634,26 @@ async function search() {
const data = await response.json();
if (!data || !data.list || !Array.isArray(data.list)) {
if (!data || !data.list || !Array.isArray(data.list) || data.list.length === 0) {
return [];
}
// 为每个搜索结果添加源信息和API URL
return data.list.map(item => ({
// 添加源信息到每个结果
const results = data.list.map(item => ({
...item,
source_name: apiName,
source_code: apiId,
api_url: apiUrl
api_url: apiId.startsWith('custom_') ? getCustomApiInfo(apiId.replace('custom_', ''))?.url : undefined
}));
return results;
} catch (error) {
console.error(`API ${apiId} 搜索错误:`, error);
console.warn(`API ${apiId} 搜索失败:`, error);
return [];
}
});
// 并行处理所有API搜索
// 等待所有搜索请求完成
const resultsArray = await Promise.all(searchPromises);
// 合并所有结果
@@ -705,7 +707,7 @@ async function search() {
return !banned.some(keyword => typeName.includes(keyword));
});
}
// 添加XSS保护使用textContent和属性转义
resultsDiv.innerHTML = allResults.map(item => {
const safeId = item.vod_id ? item.vod_id.toString().replace(/[^\w-]/g, '') : '';
@@ -739,7 +741,7 @@ async function search() {
<div class="p-2 flex flex-col flex-grow">
<div class="flex-grow">
<h3 class="text-sm font-semibold mb-1 break-words text-center" title="${safeName}">${safeName}</h3>
<h3 class="text-sm font-semibold mb-1 break-words line-clamp-2 text-center" title="${safeName}">${safeName}</h3>
<div class="flex flex-wrap justify-center gap-1 mb-1">
${(item.type_name || '').toString().replace(/</g, '&lt;') ?