feat: add non filter status
This commit is contained in:
+31
-7
@@ -35,17 +35,17 @@ function SearchPageClient() {
|
|||||||
const [searchResults, setSearchResults] = useState<SearchResult[]>([]);
|
const [searchResults, setSearchResults] = useState<SearchResult[]>([]);
|
||||||
const [showSuggestions, setShowSuggestions] = useState(false);
|
const [showSuggestions, setShowSuggestions] = useState(false);
|
||||||
// 过滤器:非聚合与聚合
|
// 过滤器:非聚合与聚合
|
||||||
const [filterAll, setFilterAll] = useState<{ source: string; title: string; year: string; yearOrder: 'asc' | 'desc' }>({
|
const [filterAll, setFilterAll] = useState<{ source: string; title: string; year: string; yearOrder: 'none' | 'asc' | 'desc' }>({
|
||||||
source: 'all',
|
source: 'all',
|
||||||
title: 'all',
|
title: 'all',
|
||||||
year: 'all',
|
year: 'all',
|
||||||
yearOrder: 'desc',
|
yearOrder: 'none',
|
||||||
});
|
});
|
||||||
const [filterAgg, setFilterAgg] = useState<{ source: string; title: string; year: string; yearOrder: 'asc' | 'desc' }>({
|
const [filterAgg, setFilterAgg] = useState<{ source: string; title: string; year: string; yearOrder: 'none' | 'asc' | 'desc' }>({
|
||||||
source: 'all',
|
source: 'all',
|
||||||
title: 'all',
|
title: 'all',
|
||||||
year: 'all',
|
year: 'all',
|
||||||
yearOrder: 'desc',
|
yearOrder: 'none',
|
||||||
});
|
});
|
||||||
|
|
||||||
// 获取默认聚合设置:只读取用户本地设置,默认为 true
|
// 获取默认聚合设置:只读取用户本地设置,默认为 true
|
||||||
@@ -64,7 +64,10 @@ function SearchPageClient() {
|
|||||||
});
|
});
|
||||||
|
|
||||||
// 简化的年份排序:unknown/空值始终在最后
|
// 简化的年份排序:unknown/空值始终在最后
|
||||||
const compareYear = (aYear: string, bYear: string, order: 'asc' | 'desc') => {
|
const compareYear = (aYear: string, bYear: string, order: 'none' | 'asc' | 'desc') => {
|
||||||
|
// 如果是无排序状态,返回0(保持原顺序)
|
||||||
|
if (order === 'none') return 0;
|
||||||
|
|
||||||
// 处理空值和unknown
|
// 处理空值和unknown
|
||||||
const aIsEmpty = !aYear || aYear === 'unknown';
|
const aIsEmpty = !aYear || aYear === 'unknown';
|
||||||
const bIsEmpty = !bYear || bYear === 'unknown';
|
const bIsEmpty = !bYear || bYear === 'unknown';
|
||||||
@@ -83,16 +86,25 @@ function SearchPageClient() {
|
|||||||
// 聚合后的结果(按标题和年份分组)
|
// 聚合后的结果(按标题和年份分组)
|
||||||
const aggregatedResults = useMemo(() => {
|
const aggregatedResults = useMemo(() => {
|
||||||
const map = new Map<string, SearchResult[]>();
|
const map = new Map<string, SearchResult[]>();
|
||||||
|
const keyOrder: string[] = []; // 记录键出现的顺序
|
||||||
|
|
||||||
searchResults.forEach((item) => {
|
searchResults.forEach((item) => {
|
||||||
// 使用 title + year + type 作为键,year 必然存在,但依然兜底 'unknown'
|
// 使用 title + year + type 作为键,year 必然存在,但依然兜底 'unknown'
|
||||||
const key = `${item.title.replaceAll(' ', '')}-${item.year || 'unknown'
|
const key = `${item.title.replaceAll(' ', '')}-${item.year || 'unknown'
|
||||||
}-${item.episodes.length === 1 ? 'movie' : 'tv'}`;
|
}-${item.episodes.length === 1 ? 'movie' : 'tv'}`;
|
||||||
const arr = map.get(key) || [];
|
const arr = map.get(key) || [];
|
||||||
|
|
||||||
|
// 如果是新的键,记录其顺序
|
||||||
|
if (arr.length === 0) {
|
||||||
|
keyOrder.push(key);
|
||||||
|
}
|
||||||
|
|
||||||
arr.push(item);
|
arr.push(item);
|
||||||
map.set(key, arr);
|
map.set(key, arr);
|
||||||
});
|
});
|
||||||
// 只进行聚合,不进行排序。排序统一在 filteredAggResults 中完成
|
|
||||||
return Array.from(map.entries());
|
// 按出现顺序返回聚合结果
|
||||||
|
return keyOrder.map(key => [key, map.get(key)!] as [string, SearchResult[]]);
|
||||||
}, [searchResults]);
|
}, [searchResults]);
|
||||||
|
|
||||||
// 构建筛选选项
|
// 构建筛选选项
|
||||||
@@ -157,6 +169,12 @@ function SearchPageClient() {
|
|||||||
if (year !== 'all' && item.year !== year) return false;
|
if (year !== 'all' && item.year !== year) return false;
|
||||||
return true;
|
return true;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// 如果是无排序状态,直接返回过滤后的原始顺序
|
||||||
|
if (yearOrder === 'none') {
|
||||||
|
return filtered;
|
||||||
|
}
|
||||||
|
|
||||||
// 简化排序:1. 年份排序,2. 年份相同时精确匹配在前,3. 标题排序
|
// 简化排序:1. 年份排序,2. 年份相同时精确匹配在前,3. 标题排序
|
||||||
return filtered.sort((a, b) => {
|
return filtered.sort((a, b) => {
|
||||||
// 首先按年份排序
|
// 首先按年份排序
|
||||||
@@ -188,6 +206,12 @@ function SearchPageClient() {
|
|||||||
if (year !== 'all' && gYear !== year) return false;
|
if (year !== 'all' && gYear !== year) return false;
|
||||||
return true;
|
return true;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// 如果是无排序状态,保持按关键字+年份+类型出现的原始顺序
|
||||||
|
if (yearOrder === 'none') {
|
||||||
|
return filtered;
|
||||||
|
}
|
||||||
|
|
||||||
// 简化排序:1. 年份排序,2. 年份相同时精确匹配在前,3. 标题排序
|
// 简化排序:1. 年份排序,2. 年份相同时精确匹配在前,3. 标题排序
|
||||||
return filtered.sort((a, b) => {
|
return filtered.sort((a, b) => {
|
||||||
// 首先按年份排序
|
// 首先按年份排序
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
'use client';
|
'use client';
|
||||||
|
|
||||||
import { ArrowDownWideNarrow, ArrowUpNarrowWide } from 'lucide-react';
|
import { ArrowDownWideNarrow, ArrowUpNarrowWide, ArrowUpDown } from 'lucide-react';
|
||||||
import React, { useEffect, useMemo, useRef, useState } from 'react';
|
import React, { useEffect, useMemo, useRef, useState } from 'react';
|
||||||
import { createPortal } from 'react-dom';
|
import { createPortal } from 'react-dom';
|
||||||
|
|
||||||
@@ -27,7 +27,7 @@ const DEFAULTS: Record<SearchFilterKey, string> = {
|
|||||||
source: 'all',
|
source: 'all',
|
||||||
title: 'all',
|
title: 'all',
|
||||||
year: 'all',
|
year: 'all',
|
||||||
yearOrder: 'desc',
|
yearOrder: 'none',
|
||||||
};
|
};
|
||||||
|
|
||||||
const SearchResultFilter: React.FC<SearchResultFilterProps> = ({ categories, values, onChange }) => {
|
const SearchResultFilter: React.FC<SearchResultFilterProps> = ({ categories, values, onChange }) => {
|
||||||
@@ -171,17 +171,32 @@ const SearchResultFilter: React.FC<SearchResultFilterProps> = ({ categories, val
|
|||||||
<div className='relative'>
|
<div className='relative'>
|
||||||
<button
|
<button
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
const next = mergedValues.yearOrder === 'desc' ? 'asc' : 'desc';
|
let next;
|
||||||
|
switch (mergedValues.yearOrder) {
|
||||||
|
case 'none':
|
||||||
|
next = 'desc';
|
||||||
|
break;
|
||||||
|
case 'desc':
|
||||||
|
next = 'asc';
|
||||||
|
break;
|
||||||
|
case 'asc':
|
||||||
|
next = 'none';
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
next = 'desc';
|
||||||
|
}
|
||||||
onChange({ ...mergedValues, yearOrder: next });
|
onChange({ ...mergedValues, yearOrder: next });
|
||||||
}}
|
}}
|
||||||
className={`relative z-10 px-1.5 py-0.5 sm:px-2 sm:py-1 md:px-4 md:py-2 text-xs sm:text-sm font-medium rounded-full transition-all duration-200 whitespace-nowrap ${mergedValues.yearOrder === 'desc'
|
className={`relative z-10 px-1.5 py-0.5 sm:px-2 sm:py-1 md:px-4 md:py-2 text-xs sm:text-sm font-medium rounded-full transition-all duration-200 whitespace-nowrap ${mergedValues.yearOrder === 'none'
|
||||||
? 'text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100 cursor-pointer'
|
? 'text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100 cursor-pointer'
|
||||||
: 'text-green-600 hover:text-green-700 dark:text-green-400 dark:hover:text-green-300 cursor-pointer'
|
: 'text-green-600 hover:text-green-700 dark:text-green-400 dark:hover:text-green-300 cursor-pointer'
|
||||||
}`}
|
}`}
|
||||||
aria-label={`按年份${mergedValues.yearOrder === 'desc' ? '降序' : '升序'}排序`}
|
aria-label={`按年份${mergedValues.yearOrder === 'none' ? '排序' : mergedValues.yearOrder === 'desc' ? '降序' : '升序'}排序`}
|
||||||
>
|
>
|
||||||
<span>年份</span>
|
<span>年份</span>
|
||||||
{mergedValues.yearOrder === 'desc' ? (
|
{mergedValues.yearOrder === 'none' ? (
|
||||||
|
<ArrowUpDown className='inline-block ml-1 w-4 h-4 sm:w-4 sm:h-4' />
|
||||||
|
) : mergedValues.yearOrder === 'desc' ? (
|
||||||
<ArrowDownWideNarrow className='inline-block ml-1 w-4 h-4 sm:w-4 sm:h-4' />
|
<ArrowDownWideNarrow className='inline-block ml-1 w-4 h-4 sm:w-4 sm:h-4' />
|
||||||
) : (
|
) : (
|
||||||
<ArrowUpNarrowWide className='inline-block ml-1 w-4 h-4 sm:w-4 sm:h-4' />
|
<ArrowUpNarrowWide className='inline-block ml-1 w-4 h-4 sm:w-4 sm:h-4' />
|
||||||
|
|||||||
Reference in New Issue
Block a user