inital

frontend/src/components/TopTenPanel.vue

@@ -0,0 +1,149 @@
+<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)">{{ n.importance_score?.toFixed(1) }}</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 >= 9) return 'badge-red'
+  if (score >= 7) 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>