feat: 卡片显示两行,第二行显示内容预览

This commit is contained in:
2026-04-13 12:03:21 +08:00
parent a4f7606794
commit 4c8dd35d53

View File

@@ -541,18 +541,21 @@ function renderItems(items) {
container.innerHTML = items.map(item => ` container.innerHTML = items.map(item => `
<div class="card type-${item.type} item-card" style="cursor: pointer;" onclick="showDetail(${item.id})"> <div class="card type-${item.type} item-card" style="cursor: pointer;" onclick="showDetail(${item.id})">
<div class="card-body"> <div class="card-body">
<div class="d-flex justify-content-between align-items-center"> <div class="d-flex justify-content-between align-items-start">
<div style="flex: 1; min-width: 0;"> <div style="flex: 1; min-width: 0;">
<h6 class="card-title text-truncate"> <h6 class="card-title text-truncate mb-1">
${getTypeIcon(item.type)} ${item.title || truncate(item.content || item.url, 30)} ${getTypeIcon(item.type)} ${item.title || truncate(item.content || item.url, 30)}
</h6> </h6>
<p class="card-text text-muted small mb-0 text-truncate" style="font-size:12px;">
${item.url ? truncate(item.url, 50) : item.content ? truncate(item.content, 50) : item.note ? truncate(item.note, 50) : ''}
${item.type === 'todo' ? `${getStatusLabelShort(item.status)} ${getPriorityLabelShort(item.priority)} ${item.due_date ? '📅' + item.due_date : ''}` : ''}
</p>
</div> </div>
<div class="d-flex align-items-center gap-2 flex-wrap" onclick="event.stopPropagation();"> <div class="d-flex align-items-center gap-1 flex-wrap ms-2" onclick="event.stopPropagation();">
${item.tags.slice(0, 3).map(t => `<span class="badge bg-secondary" style="font-size:11px;">${t}</span>`).join('')} ${item.tags.slice(0, 2).map(t => `<span class="badge bg-secondary" style="font-size:10px;">${t}</span>`).join('')}
${item.type === 'todo' ? `<span class="badge status-${item.status}" style="font-size:11px;">${getStatusLabelShort(item.status)}</span>` : ''} <button class="btn btn-sm btn-outline-primary py-0 px-1" onclick="openEditModal(${item.id})" title="编辑"><i class="bi bi-pencil" style="font-size:11px;"></i></button>
<button class="btn btn-sm btn-outline-primary py-0 px-1" onclick="openEditModal(${item.id})" title="编辑"><i class="bi bi-pencil" style="font-size:12px;"></i></button> ${item.type === 'todo' && item.status !== 'completed' ? `<button class="btn btn-sm btn-outline-success py-0 px-1" onclick="completeItem(${item.id})" title="完成"><i class="bi bi-check-lg" style="font-size:11px;"></i></button>` : ''}
${item.type === 'todo' && item.status !== 'completed' ? `<button class="btn btn-sm btn-outline-success py-0 px-1" onclick="completeItem(${item.id})" title="完成"><i class="bi bi-check-lg" style="font-size:12px;"></i></button>` : ''} <button class="btn btn-sm btn-outline-danger py-0 px-1" onclick="deleteItem(${item.id})" title="删除"><i class="bi bi-trash" style="font-size:11px;"></i></button>
<button class="btn btn-sm btn-outline-danger py-0 px-1" onclick="deleteItem(${item.id})" title="删除"><i class="bi bi-trash" style="font-size:12px;"></i></button>
</div> </div>
</div> </div>
</div> </div>
@@ -766,6 +769,11 @@ function getStatusLabelShort(status) {
return labels[status] || status; return labels[status] || status;
} }
function getPriorityLabelShort(priority) {
const labels = { low: '🟢', medium: '🟡', high: '🟠', urgent: '🔴' };
return labels[priority] || '';
}
function getPriorityLabel(priority) { function getPriorityLabel(priority) {
const labels = { low: '🟢 低', medium: '🟡 中', high: '🟠 高', urgent: '🔴 紧急' }; const labels = { low: '🟢 低', medium: '🟡 中', high: '🟠 高', urgent: '🔴 紧急' };
return labels[priority] || priority; return labels[priority] || priority;