From 70659f02fb7c8a7398a4c4002cad7f682f0a7b4d Mon Sep 17 00:00:00 2001 From: Rick Date: Thu, 15 Jan 2026 18:47:45 +0800 Subject: [PATCH 1/3] feat: add year filter with chip-style UI Add a year filter feature that allows users to filter episodes by year. The filter uses a Material Design-inspired chip style with: - Clickable rounded tags for each available year - Visual distinction between active/inactive states - Smooth hover transitions - Dark mode support Co-Authored-By: Claude --- src/views/index.vue | 97 +++++++++++++++++++++++++++++++++++++++++---- 1 file changed, 89 insertions(+), 8 deletions(-) diff --git a/src/views/index.vue b/src/views/index.vue index 52fbbb6..d983e0a 100644 --- a/src/views/index.vue +++ b/src/views/index.vue @@ -4,24 +4,60 @@ import { getAllEpisode } from '../utils/episode' const rawEpisodes = Object.values(getAllEpisode()) const sort = ref<'asc' | 'desc'>('desc') +const selectedYear = ref(null) + +const availableYears = computed(() => { + const years = new Set(rawEpisodes.map(e => e.date.getFullYear())) + return Array.from(years).sort((a, b) => b - a) +}) + const handleSort = () => { sort.value = sort.value === 'asc' ? 'desc' : 'asc' } +const handleYearFilter = (year: number | null) => { + selectedYear.value = year +} + const episodes = computed(() => - [...rawEpisodes].sort((a, b) => { - if (sort.value === 'asc') { - return a.date.getTime() - b.date.getTime() - } else { - return b.date.getTime() - a.date.getTime() - } - }), + [...rawEpisodes] + .filter(e => selectedYear.value === null || e.date.getFullYear() === selectedYear.value) + .sort((a, b) => { + if (sort.value === 'asc') { + return a.date.getTime() - b.date.getTime() + } else { + return b.date.getTime() - a.date.getTime() + } + }), )