update

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;