150 lines
3.8 KiB
Vue
150 lines
3.8 KiB
Vue
<template>
|
||
<aside class="top10-panel">
|
||
<div class="panel-head">
|
||
<span class="dot d-blue"></span>
|
||
今日精选 TOP 10
|
||
</div>
|
||
|
||
<div v-if="items.length === 0" class="empty-msg">暂无精选，等待今日抓取...</div>
|
||
|
||
<div
|
||
v-for="(n, i) in items"
|
||
:key="n.id"
|
||
class="top10-item"
|
||
:class="{ active: activeId === n.id }"
|
||
@click="$emit('select', n)"
|
||
>
|
||
<span class="rank">{{ String(i + 1).padStart(2, '0') }}</span>
|
||
<div class="item-body">
|
||
<span class="item-score" :class="badgeClass(n.importance_score)">{{ Math.round(n.importance_score) }}</span>
|
||
<span class="item-title">{{ n.title_zh }}</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="archive-section" v-if="dates.length > 0">
|
||
<div class="archive-head">历史归档</div>
|
||
<div
|
||
v-for="d in dates.slice(1, 8)"
|
||
:key="d.date"
|
||
class="archive-item"
|
||
:class="{ active: selectedDate === d.date }"
|
||
@click="$emit('date-change', d.date)"
|
||
>
|
||
<span class="arc-date">{{ d.date.slice(5) }}</span>
|
||
<span class="arc-count">{{ d.count }}条</span>
|
||
</div>
|
||
</div>
|
||
</aside>
|
||
</template>
|
||
|
||
<script setup>
|
||
defineProps({
|
||
items: { type: Array, default: () => [] },
|
||
dates: { type: Array, default: () => [] },
|
||
activeId: { type: Number, default: null },
|
||
selectedDate: { type: String, default: '' },
|
||
})
|
||
defineEmits(['select', 'date-change'])
|
||
|
||
function badgeClass(score) {
|
||
if (score >= 90) return 'badge-red'
|
||
if (score >= 70) return 'badge-amber'
|
||
return 'badge-blue'
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.top10-panel {
|
||
width: 260px;
|
||
flex-shrink: 0;
|
||
position: sticky;
|
||
top: 120px;
|
||
height: calc(100vh - 140px);
|
||
overflow-y: auto;
|
||
scrollbar-width: none;
|
||
}
|
||
.top10-panel::-webkit-scrollbar { display: none; }
|
||
|
||
.panel-head {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
font-size: 11px;
|
||
font-family: var(--mono);
|
||
letter-spacing: .1em;
|
||
text-transform: uppercase;
|
||
color: var(--t4);
|
||
padding: 0 0 12px;
|
||
}
|
||
.dot { width: 6px; height: 6px; border-radius: 50%; }
|
||
.d-blue { background: var(--blue-2); }
|
||
|
||
.empty-msg { font-size: 12px; color: var(--t4); padding: 8px 0; }
|
||
|
||
.top10-item {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 10px;
|
||
padding: 9px 10px;
|
||
border-radius: var(--r-sm);
|
||
cursor: pointer;
|
||
transition: background .15s;
|
||
margin-bottom: 2px;
|
||
}
|
||
.top10-item:hover { background: var(--bg-hi); }
|
||
.top10-item.active { background: var(--blue-gl); }
|
||
|
||
.rank {
|
||
font-family: var(--mono);
|
||
font-size: 10px;
|
||
color: var(--t4);
|
||
width: 18px;
|
||
flex-shrink: 0;
|
||
padding-top: 3px;
|
||
}
|
||
.item-body { flex: 1; display: flex; flex-direction: column; gap: 4px; }
|
||
.item-score {
|
||
font-family: var(--mono);
|
||
font-size: 10px;
|
||
font-weight: 700;
|
||
padding: 1px 6px;
|
||
border-radius: 4px;
|
||
align-self: flex-start;
|
||
}
|
||
.badge-red { background: rgba(255,77,106,.2); color: var(--red); }
|
||
.badge-amber { background: rgba(255,163,54,.2); color: var(--amber); }
|
||
.badge-blue { background: rgba(46,85,245,.2); color: var(--blue-2); }
|
||
|
||
.item-title {
|
||
font-size: 12px;
|
||
color: var(--t2);
|
||
line-height: 1.4;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 2;
|
||
-webkit-box-orient: vertical;
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* Archive */
|
||
.archive-section { margin-top: 20px; border-top: 1px solid var(--rule); padding-top: 12px; }
|
||
.archive-head {
|
||
font-size: 10px;
|
||
font-family: var(--mono);
|
||
color: var(--t4);
|
||
letter-spacing: .1em;
|
||
text-transform: uppercase;
|
||
margin-bottom: 6px;
|
||
}
|
||
.archive-item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 6px 10px;
|
||
border-radius: var(--r-sm);
|
||
cursor: pointer;
|
||
transition: background .15s;
|
||
}
|
||
.archive-item:hover, .archive-item.active { background: var(--bg-hi); }
|
||
.arc-date { font-size: 12px; color: var(--t2); font-family: var(--mono); }
|
||
.arc-count { font-size: 11px; color: var(--t4); font-family: var(--mono); }
|
||
</style>
|