update

frontend/src/api/events.ts

@@ -10,10 +10,11 @@ export function fetchEventById(eventId: number): Promise<UnifiedEvent> {
 export function fetchUnifiedEvents(params?: {
   min_hot?: number
   hours?: number
+  sort_by?: string
   skip?: number
   limit?: number
 }): Promise<PaginatedEvents> {
-  return apiGet<PaginatedEvents>('/events/unified', params as Record<string, number>)
+  return apiGet<PaginatedEvents>('/events/unified', params as Record<string, string | number>)
 }
 
 /** 获取标题修改追踪列表 */

frontend/src/api/preferences.ts

@@ -24,10 +24,10 @@ export function deletePreference(userId: number, preferenceId: number): Promise<
 /** 基于兴趣词获取推荐事件 */
 export function fetchRecommendedEvents(
   userId: number,
-  params?: { min_hot?: number; hours?: number; limit?: number },
+  params?: { min_hot?: number; hours?: number; limit?: number; sort_by?: string },
 ): Promise<RecommendationResponse> {
   return apiGet<RecommendationResponse>(
     `/users/${userId}/recommended-events`,
-    params as Record<string, number>,
+    params as Record<string, string | number>,
   )
 }

frontend/src/types/event.ts

@@ -15,6 +15,7 @@ export interface UnifiedEvent {
   summary: string | null
   hot_score: number
   created_at: string
+  last_active_at: string
   platforms: PlatformTrend[]
   tags: string[]
 }
@@ -34,6 +35,7 @@ export interface HeadlineRevision {
   revised_headline: string
   source_name: string | null
   platform_icon: string | null
+  url: string | null
   created_at: string
 }
 

frontend/src/views/DashboardView.vue

@@ -65,6 +65,11 @@ const THRESHOLD_STORAGE_KEY = 'ir-hot-threshold'
 const savedThreshold = localStorage.getItem(THRESHOLD_STORAGE_KEY)
 const minHot = ref(savedThreshold !== null ? Number(savedThreshold) : 3)
 
+// 增加时间筛选和排序
+const hoursRange = ref(48)
+const sortBy = ref('hot_score')
+const recSortBy = ref('match_score')
+
 // 当前鼠标悬停的平台行标识
 // 使用 "eventId-platformIndex" 作为唯一键，而非 sourceId，
 // 因为同一个平台在同一大事件下可能有多条不同的热搜条目
@@ -76,8 +81,22 @@ const thresholdOptions = [
   { label: '≥ 3', value: 3 },
   { label: '≥ 5', value: 5 },
   { label: '≥ 10', value: 10 },
-  { label: '≥ 20', value: 20 },
-  { label: '≥ 50', value: 50 },
+]
+
+const hoursOptions = [
+  { label: '24小时', value: 24 },
+  { label: '48小时', value: 48 },
+  { label: '7天', value: 168 },
+]
+
+const sortOptions = [
+  { label: '热度排序', value: 'hot_score' },
+  { label: '时间排序', value: 'created_at' },
+]
+
+const recSortOptions = [
+  { label: '匹配度', value: 'match_score' },
+  { label: '最新', value: 'created_at' },
 ]
 
 // ==========================================
@@ -189,7 +208,7 @@ function getRankingChartOptions(history: number[], platformColor: string) {
 
 /**
  * 根据排名历史计算趋势方向。
- * 排名数值越小越好，所以数值下降 = 排名上升（绿色），数值上升 = 排名下滑（红色）。
+ * 排名上升（红色），数值上升 = 排名下滑（绿色）。
  */
 function getRankingTrend(p: { current_ranking: number | null; ranking_history: number[] }) {
   const rank = p.current_ranking
@@ -200,13 +219,14 @@ function getRankingTrend(p: { current_ranking: number | null; ranking_history: n
 
   const prev = h[h.length - 2]
   const curr = h[h.length - 1]
+  if (prev === undefined || curr === undefined) return { icon: 'fa-solid fa-minus', color: '#f97316', text: `TOP ${rank}` }
   const diff = prev - curr
 
   if (diff > 0) {
-    return { icon: 'fa-solid fa-arrow-trend-up', color: '#10b981', text: `TOP ${rank} ↑${diff}` }
+    return { icon: 'fa-solid fa-arrow-trend-up', color: '#ef4444', text: `TOP ${rank} ↑${diff}` }
   }
   if (diff < 0) {
-    return { icon: 'fa-solid fa-arrow-trend-down', color: '#ef4444', text: `TOP ${rank} ↓${Math.abs(diff)}` }
+    return { icon: 'fa-solid fa-arrow-trend-down', color: '#10b981', text: `TOP ${rank} ↓${Math.abs(diff)}` }
   }
   return { icon: 'fa-solid fa-equals', color: '#f97316', text: `TOP ${rank}` }
 }
@@ -235,7 +255,8 @@ async function loadEvents(append = false) {
     const skip = append ? events.value.length : 0
     const result = await fetchUnifiedEvents({
       min_hot: minHot.value,
-      hours: 48,
+      hours: hoursRange.value,
+      sort_by: sortBy.value,
       skip,
       limit: PAGE_SIZE,
     })
@@ -261,7 +282,7 @@ async function loadRecommendations() {
   try {
     const [keywords, recommended] = await Promise.all([
       fetchPreferences(userId.value),
-      fetchRecommendedEvents(userId.value, { min_hot: 1, hours: 72, limit: 8 }),
+      fetchRecommendedEvents(userId.value, { min_hot: 1, hours: 72, limit: 8, sort_by: recSortBy.value }),
     ])
     userKeywords.value = keywords
     recommendedEvents.value = recommended.data
@@ -278,6 +299,21 @@ function onThresholdChange(value: number) {
   loadEvents(false)
 }
 
+function onHoursChange(value: number) {
+  hoursRange.value = value
+  loadEvents(false)
+}
+
+function onSortChange(value: string) {
+  sortBy.value = value
+  loadEvents(false)
+}
+
+function onRecSortChange(value: string) {
+  recSortBy.value = value
+  loadRecommendations()
+}
+
 function loadMore() {
   if (hasMore.value && !loadingMore.value) {
     loadEvents(true)
@@ -341,20 +377,56 @@ watch(() => route.query.event, (newId) => {
             </h2>
             <span class="section-meta">基于语义聚类 · 共 {{ totalEvents }} 条</span>
           </div>
-          <div class="threshold-bar">
-            <span class="threshold-label">
-              <i class="fa-solid fa-sliders"></i> 热度阈值
-            </span>
-            <div class="threshold-tabs">
-              <button
-                v-for="opt in thresholdOptions"
-                :key="opt.value"
-                class="threshold-tab"
-                :class="{ active: minHot === opt.value }"
-                @click="onThresholdChange(opt.value)"
-              >
-                {{ opt.label }}
-              </button>
+          <div class="filters-bar">
+            <div class="filter-group">
+              <span class="filter-label">
+                <i class="fa-solid fa-fire"></i> 最低热度
+              </span>
+              <div class="filter-tabs">
+                <button
+                  v-for="opt in thresholdOptions"
+                  :key="opt.value"
+                  class="filter-tab"
+                  :class="{ active: minHot === opt.value }"
+                  @click="onThresholdChange(opt.value)"
+                >
+                  {{ opt.label }}
+                </button>
+              </div>
+            </div>
+
+            <div class="filter-group">
+              <span class="filter-label">
+                <i class="fa-regular fa-clock"></i> 时间范围
+              </span>
+              <div class="filter-tabs">
+                <button
+                  v-for="opt in hoursOptions"
+                  :key="opt.value"
+                  class="filter-tab"
+                  :class="{ active: hoursRange === opt.value }"
+                  @click="onHoursChange(opt.value)"
+                >
+                  {{ opt.label }}
+                </button>
+              </div>
+            </div>
+
+            <div class="filter-group">
+              <span class="filter-label">
+                <i class="fa-solid fa-arrow-down-wide-short"></i> 排序方式
+              </span>
+              <div class="filter-tabs">
+                <button
+                  v-for="opt in sortOptions"
+                  :key="opt.value"
+                  class="filter-tab"
+                  :class="{ active: sortBy === opt.value }"
+                  @click="onSortChange(opt.value)"
+                >
+                  {{ opt.label }}
+                </button>
+              </div>
             </div>
           </div>
         </div>
@@ -393,7 +465,13 @@ watch(() => route.query.event, (newId) => {
                   </span>
                   <span v-for="tag in spotlightEvent.tags.slice(0, 3)" :key="tag" class="topic-tag">{{ tag }}</span>
                 </div>
-                <span class="card-time">{{ formatRelativeTime(spotlightEvent.created_at) }}</span>
+                <div class="event-time-range" title="左侧为首次发现时间，右侧为最后活跃时间">
+                  <span>{{ formatRelativeTime(spotlightEvent.created_at) }}</span>
+                  <template v-if="formatRelativeTime(spotlightEvent.created_at) !== formatRelativeTime(spotlightEvent.last_active_at)">
+                    <i class="fa-solid fa-arrow-right time-arrow"></i>
+                    <span class="active-time">{{ formatRelativeTime(spotlightEvent.last_active_at) }}</span>
+                  </template>
+                </div>
               </div>
               <h3 class="card-title">{{ spotlightEvent.unified_title }}</h3>
               <div v-if="spotlightEvent.summary" class="ai-summary">
@@ -499,7 +577,13 @@ watch(() => route.query.event, (newId) => {
                 </span>
                 <span v-for="tag in ev.tags.slice(0, 3)" :key="tag" class="topic-tag">{{ tag }}</span>
               </div>
-              <span class="card-time">{{ formatRelativeTime(ev.created_at) }}</span>
+              <div class="event-time-range" title="左侧为首次发现时间，右侧为最后活跃时间">
+                <span>{{ formatRelativeTime(ev.created_at) }}</span>
+                <template v-if="formatRelativeTime(ev.created_at) !== formatRelativeTime(ev.last_active_at)">
+                  <i class="fa-solid fa-arrow-right time-arrow"></i>
+                  <span class="active-time">{{ formatRelativeTime(ev.last_active_at) }}</span>
+                </template>
+              </div>
             </div>
 
             <h3 class="card-title">{{ ev.unified_title }}</h3>
@@ -599,9 +683,22 @@ watch(() => route.query.event, (newId) => {
               <i class="fa-solid fa-wand-magic-sparkles"></i>
               为你推荐
             </h3>
-            <RouterLink to="/topics" class="widget-action-link">
-              <i class="fa-solid fa-gear"></i>
-            </RouterLink>
+            <div class="recommend-actions">
+              <div class="mini-tabs">
+                <button
+                  v-for="opt in recSortOptions"
+                  :key="opt.value"
+                  class="mini-tab"
+                  :class="{ active: recSortBy === opt.value }"
+                  @click="onRecSortChange(opt.value)"
+                >
+                  {{ opt.label }}
+                </button>
+              </div>
+              <RouterLink to="/topics" class="widget-action-link">
+                <i class="fa-solid fa-gear"></i>
+              </RouterLink>
+            </div>
           </div>
           <div class="widget-body">
             <!-- 加载中 -->
@@ -689,9 +786,20 @@ watch(() => route.query.event, (newId) => {
             </div>
             <div v-for="rev in revisions" :key="rev.id" class="revision-item">
               <div class="revision-meta">
-                <span>
+                <span class="platform-info">
                   <i :class="getPlatformIcon(rev.source_name || '')" class="rev-platform-icon"></i>
-                  {{ rev.source_name || '未知平台' }} · {{ formatRelativeTime(rev.created_at) }}
+                  <a
+                    v-if="rev.url"
+                    :href="rev.url"
+                    target="_blank"
+                    rel="noopener"
+                    class="platform-link"
+                  >
+                    {{ rev.source_name || '未知平台' }}
+                  </a>
+                  <span v-else>{{ rev.source_name || '未知平台' }}</span>
+                  <span class="meta-dot">·</span>
+                  <span class="meta-time">{{ formatRelativeTime(rev.created_at) }}</span>
                 </span>
               </div>
               <div class="revision-diff">
@@ -843,11 +951,11 @@ watch(() => route.query.event, (newId) => {
   font-weight: 500;
 }
 
-.threshold-bar {
+.filters-bar {
   display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 8px 12px;
+  flex-wrap: wrap;
+  gap: 16px;
+  padding: 12px 16px;
   background: var(--bg-surface);
   backdrop-filter: var(--backdrop-blur);
   -webkit-backdrop-filter: var(--backdrop-blur);
@@ -856,7 +964,13 @@ watch(() => route.query.event, (newId) => {
   box-shadow: var(--shadow-sm);
 }
 
-.threshold-label {
+.filter-group {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.filter-label {
   font-size: 13px;
   font-weight: 600;
   color: var(--text-secondary);
@@ -864,10 +978,9 @@ watch(() => route.query.event, (newId) => {
   display: flex;
   align-items: center;
   gap: 6px;
-  padding-left: 6px;
 }
 
-.threshold-tabs {
+.filter-tabs {
   display: flex;
   gap: 6px;
   flex-wrap: wrap;
@@ -877,23 +990,24 @@ watch(() => route.query.event, (newId) => {
   border: 1px solid var(--border-subtle);
 }
 
-.threshold-tab {
+.filter-tab {
   padding: 6px 14px;
   font-size: 13px;
   font-weight: 600;
   border-radius: var(--radius-sm);
-  border: none; /* 移除单个按钮的边框，采用内部选项卡组设计 */
+  border: none;
   background: transparent;
   color: var(--text-secondary);
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  cursor: pointer;
 }
 
-.threshold-tab:hover {
+.filter-tab:hover {
   color: var(--text-primary);
   background: var(--bg-hover);
 }
 
-.threshold-tab.active {
+.filter-tab.active {
   background: var(--bg-surface);
   color: var(--brand-primary);
   box-shadow: var(--shadow-sm);
@@ -958,12 +1072,25 @@ watch(() => route.query.event, (newId) => {
   color: var(--text-secondary);
 }
 
-.card-time {
+.event-time-range {
+  display: flex;
+  align-items: center;
+  gap: 6px;
   font-size: 12px;
   color: var(--text-secondary);
   white-space: nowrap;
 }
 
+.time-arrow {
+  font-size: 10px;
+  color: var(--text-placeholder);
+}
+
+.active-time {
+  color: var(--brand-primary);
+  font-weight: 500;
+}
+
 .card-title {
   font-size: 20px;
   font-weight: 700;
@@ -1043,6 +1170,7 @@ watch(() => route.query.event, (newId) => {
   align-items: center;
   gap: 10px;
   min-width: 0;
+  font-size: 14px;
 }
 
 .platform-info i {
@@ -1207,6 +1335,42 @@ watch(() => route.query.event, (newId) => {
   gap: 8px;
 }
 
+.recommend-actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.mini-tabs {
+  display: flex;
+  background: var(--bg-input);
+  padding: 2px;
+  border-radius: var(--radius-md);
+  border: 1px solid var(--border-subtle);
+}
+
+.mini-tab {
+  padding: 2px 8px;
+  font-size: 11px;
+  font-weight: 600;
+  border-radius: var(--radius-sm);
+  border: none;
+  background: transparent;
+  color: var(--text-secondary);
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.mini-tab:hover {
+  color: var(--text-primary);
+}
+
+.mini-tab.active {
+  background: var(--bg-surface);
+  color: var(--brand-primary);
+  box-shadow: var(--shadow-sm);
+}
+
 .widget-action-link {
   color: var(--text-secondary);
   font-size: 14px;
@@ -1451,15 +1615,34 @@ watch(() => route.query.event, (newId) => {
 }
 
 .revision-meta {
-  font-size: 11px;
-  color: var(--text-secondary);
   margin-bottom: 8px;
 }
 
+.platform-info {
+  display: flex;
+  align-items: center;
+  font-size: 13px;
+  color: var(--text-secondary);
+}
+
 .rev-platform-icon {
   margin-right: 4px;
 }
 
+.platform-link {
+  text-decoration: none;
+  color: inherit;
+  transition: color 0.15s;
+}
+
+.platform-link:hover {
+  color: var(--brand-primary);
+}
+
+.meta-dot {
+  margin: 0 4px;
+}
+
 .revision-diff {
   display: flex;
   flex-direction: column;

frontend/src/views/RevisionsView.vue

@@ -15,6 +15,7 @@ interface RevisionChain {
   first_at: string
   last_at: string
   change_count: number
+  url: string | null
 }
 
 const revisions = ref<HeadlineRevision[]>([])
@@ -105,6 +106,7 @@ const revisionChains = computed<RevisionChain[]>(() => {
       first_at: items[0].created_at,
       last_at: items[items.length - 1].created_at,
       change_count: items.length,
+      url: items[0].url,
     })
   }
 
@@ -191,7 +193,16 @@ onMounted(loadRevisions)
         <div class="revision-header">
           <div class="platform-info">
             <i :class="getPlatformIcon(chain.source_name || '')"></i>
-            <span>{{ chain.source_name || '未知平台' }}</span>
+            <a
+              v-if="chain.url"
+              :href="chain.url"
+              target="_blank"
+              rel="noopener"
+              class="platform-link"
+            >
+              {{ chain.source_name || '未知平台' }}
+            </a>
+            <span v-else>{{ chain.source_name || '未知平台' }}</span>
             <span v-if="chain.change_count > 1" class="change-badge">
               {{ chain.change_count }} 次修改
             </span>
@@ -402,6 +413,16 @@ onMounted(loadRevisions)
   font-size: 16px;
 }
 
+.platform-link {
+  text-decoration: none;
+  color: inherit;
+  transition: color 0.15s;
+}
+
+.platform-link:hover {
+  color: var(--brand-primary);
+}
+
 .revision-time-range {
   display: flex;
   align-items: center;

frontend/src/views/TopicsView.vue

@@ -19,6 +19,30 @@ const matchedEvents = ref<MatchedEvent[]>([])
 const loadingMatched = ref(false)
 const matchedError = ref('')
 
+const hoursRange = ref(72)
+const sortBy = ref('match_score')
+
+const hoursOptions = [
+  { label: '24小时', value: 24 },
+  { label: '72小时', value: 72 },
+  { label: '7天', value: 168 },
+]
+
+const sortOptions = [
+  { label: '匹配度', value: 'match_score' },
+  { label: '最新', value: 'created_at' },
+]
+
+function onHoursChange(value: number) {
+  hoursRange.value = value
+  loadMatchedEvents()
+}
+
+function onSortChange(value: string) {
+  sortBy.value = value
+  loadMatchedEvents()
+}
+
 /** 加载用户的兴趣关键词 */
 async function loadPreferences() {
   if (!userId.value) return
@@ -39,7 +63,11 @@ async function loadMatchedEvents() {
   loadingMatched.value = true
   matchedError.value = ''
   try {
-    const result = await fetchRecommendedEvents(userId.value, { limit: 30 })
+    const result = await fetchRecommendedEvents(userId.value, { 
+      limit: 30,
+      hours: hoursRange.value,
+      sort_by: sortBy.value 
+    })
     matchedEvents.value = result.data
   } catch (e) {
     matchedError.value = e instanceof Error ? e.message : '加载失败'
@@ -180,13 +208,52 @@ onMounted(async () => {
 
     <!-- 命中的热点事件 -->
     <div class="matched-section">
-      <h2 class="sub-title">
-        <i class="fa-solid fa-wand-magic-sparkles" style="color: var(--brand-primary)"></i>
-        命中的热点事件
-        <span v-if="!loadingMatched && matchedEvents.length > 0" class="count-badge">
-          {{ matchedEvents.length }}
-        </span>
-      </h2>
+      <div class="section-header">
+        <h2 class="sub-title">
+          <i class="fa-solid fa-wand-magic-sparkles" style="color: var(--brand-primary)"></i>
+          命中的热点事件
+          <span v-if="!loadingMatched && matchedEvents.length > 0" class="count-badge">
+            {{ matchedEvents.length }}
+          </span>
+        </h2>
+
+        <!-- 筛选排序栏 -->
+        <div v-if="preferences.length > 0" class="filters-bar">
+          <div class="filter-group">
+            <span class="filter-label">
+              <i class="fa-regular fa-clock"></i> 时间范围
+            </span>
+            <div class="filter-tabs">
+              <button
+                v-for="opt in hoursOptions"
+                :key="opt.value"
+                class="filter-tab"
+                :class="{ active: hoursRange === opt.value }"
+                @click="onHoursChange(opt.value)"
+              >
+                {{ opt.label }}
+              </button>
+            </div>
+          </div>
+
+          <div class="filter-group">
+            <span class="filter-label">
+              <i class="fa-solid fa-arrow-down-wide-short"></i> 排序方式
+            </span>
+            <div class="filter-tabs">
+              <button
+                v-for="opt in sortOptions"
+                :key="opt.value"
+                class="filter-tab"
+                :class="{ active: sortBy === opt.value }"
+                @click="onSortChange(opt.value)"
+              >
+                {{ opt.label }}
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
 
       <!-- 加载中 -->
       <div v-if="loadingMatched" class="loading-state">
@@ -507,6 +574,77 @@ onMounted(async () => {
   margin-bottom: 32px;
 }
 
+.section-header {
+  margin-bottom: 16px;
+}
+
+.section-header .sub-title {
+  margin-bottom: 12px;
+}
+
+.filters-bar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+  padding: 12px 16px;
+  margin-bottom: 16px;
+  background: var(--bg-surface);
+  backdrop-filter: var(--backdrop-blur);
+  -webkit-backdrop-filter: var(--backdrop-blur);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-sm);
+}
+
+.filter-group {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.filter-label {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-secondary);
+  white-space: nowrap;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.filter-tabs {
+  display: flex;
+  gap: 6px;
+  flex-wrap: wrap;
+  background: var(--bg-input);
+  padding: 4px;
+  border-radius: var(--radius-md);
+  border: 1px solid var(--border-subtle);
+}
+
+.filter-tab {
+  padding: 4px 12px;
+  font-size: 12px;
+  font-weight: 600;
+  border-radius: var(--radius-sm);
+  border: none;
+  background: transparent;
+  color: var(--text-secondary);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  cursor: pointer;
+}
+
+.filter-tab:hover {
+  color: var(--text-primary);
+  background: var(--bg-hover);
+}
+
+.filter-tab.active {
+  background: var(--bg-surface);
+  color: var(--brand-primary);
+  box-shadow: var(--shadow-sm);
+}
+
 .matched-list {
   display: flex;
   flex-direction: column;