402 lines
24 KiB
TypeScript
402 lines
24 KiB
TypeScript
'use client'
|
||
|
||
import { memo, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'
|
||
import { createPortal } from 'react-dom'
|
||
import { ChevronDown, SlidersHorizontal } from 'lucide-react'
|
||
import CertificateDatePicker from '@/components/upload/CertificateDatePicker'
|
||
import { useAnchoredPopover } from '@/components/ui/useAnchoredPopover'
|
||
|
||
const filterChoice = 'inline-flex min-h-9 items-center gap-2 rounded-[8px] border px-3 py-1.5 text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#1677ff] focus-visible:ring-offset-2'
|
||
const filterSelected = 'border-[#1a1c1d] bg-[#1a1c1d] font-medium text-white'
|
||
const filterIdle = 'border-transparent bg-[#f3f4f5] text-[#52565b] hover:border-[#cfd8e3] hover:bg-white hover:text-[#1a1c1d]'
|
||
|
||
function FacetRow({ label, items, selected, onChange, total, loading }: { label: string; items: CategoryItem[]; selected: string; onChange: (value: string) => void; total: number; loading: boolean }) {
|
||
const [expanded, setExpanded] = useState(false)
|
||
const visible = expanded ? items : items.filter((item, index) => index < 10 || item.name === selected)
|
||
const count = (value: number) => loading ? '…' : value.toLocaleString('zh-CN')
|
||
return (
|
||
<div className="grid gap-2.5 border-b border-[#e7e8ea] py-3.5 last:border-b-0 sm:grid-cols-[88px_minmax(0,1fr)] sm:gap-4">
|
||
<h2 className="pt-1.5 text-sm font-medium text-[#52565b]">{label}</h2>
|
||
<div role="group" aria-label={label} aria-busy={loading} className="flex min-w-0 flex-wrap items-center gap-2">
|
||
<button type="button" aria-pressed={!selected} onClick={() => onChange('')} className={`${filterChoice} ${!selected ? filterSelected : filterIdle}`}>全部<span className="text-xs tabular-nums">{count(total)}</span></button>
|
||
{visible.map((item) => <button type="button" key={item.id} aria-pressed={selected === item.name} onClick={() => onChange(selected === item.name ? '' : item.name)} className={`${filterChoice} ${selected === item.name ? filterSelected : filterIdle}`}>{item.name}<span className="text-xs tabular-nums">{count(item.count)}</span></button>)}
|
||
{items.length > 10 && <button type="button" aria-expanded={expanded} onClick={() => setExpanded(!expanded)} className="inline-flex min-h-9 items-center gap-1 rounded-lg px-2 text-sm text-[#52565b] hover:text-[#1a1c1d] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#1677ff]">{expanded ? '收起' : `更多 ${items.length - visible.length}`}<ChevronDown aria-hidden="true" className={`h-3.5 w-3.5 ${expanded ? 'rotate-180' : ''}`} /></button>}
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export interface CategoryItem {
|
||
id: string
|
||
name: string
|
||
count: number
|
||
}
|
||
|
||
export interface MonthItem {
|
||
value: string
|
||
label: string
|
||
count: number
|
||
}
|
||
|
||
export interface FacetTotals {
|
||
materialType: number
|
||
category: number
|
||
scene: number
|
||
platform: number
|
||
productCategory: number
|
||
month: number
|
||
}
|
||
|
||
interface FilterPanelProps {
|
||
selectedMaterialType: string
|
||
setSelectedMaterialType: (value: string) => void
|
||
selectedCategory: string
|
||
setSelectedCategory: (value: string) => void
|
||
selectedScene: string
|
||
setSelectedScene: (value: string) => void
|
||
selectedPlatform: string
|
||
setSelectedPlatform: (value: string) => void
|
||
selectedLivePlatform?: string
|
||
setSelectedLivePlatform?: (value: string) => void
|
||
liveDateFrom?: string
|
||
setLiveDateFrom?: (value: string) => void
|
||
liveDateTo?: string
|
||
setLiveDateTo?: (value: string) => void
|
||
selectedProductCategory: string
|
||
setSelectedProductCategory: (value: string) => void
|
||
selectedMonth: string
|
||
setSelectedMonth: (value: string) => void
|
||
sortBy: string
|
||
setSortBy: (value: string) => void
|
||
sortOrder: 'desc' | 'asc'
|
||
setSortOrder: (value: 'desc' | 'asc') => void
|
||
materialTypes: { value: string; label: string; count?: number }[]
|
||
categories: CategoryItem[]
|
||
scenes: CategoryItem[]
|
||
platforms: CategoryItem[]
|
||
productCategories: CategoryItem[]
|
||
months: MonthItem[]
|
||
totalMaterialsCount: number
|
||
materialsCount: number
|
||
facetTotals?: FacetTotals
|
||
isFilterCollapsed: boolean
|
||
setIsFilterCollapsed: (value: boolean) => void
|
||
themeColor: string
|
||
facetsLoading?: boolean
|
||
}
|
||
|
||
function FilterPanel(props: FilterPanelProps) {
|
||
const {
|
||
selectedMaterialType, setSelectedMaterialType,
|
||
selectedCategory, setSelectedCategory,
|
||
selectedScene, setSelectedScene,
|
||
selectedPlatform, setSelectedPlatform,
|
||
selectedLivePlatform = '', setSelectedLivePlatform,
|
||
liveDateFrom = '', setLiveDateFrom,
|
||
liveDateTo = '', setLiveDateTo,
|
||
selectedProductCategory, setSelectedProductCategory,
|
||
selectedMonth, setSelectedMonth,
|
||
sortBy, setSortBy, sortOrder, setSortOrder,
|
||
materialTypes, categories, scenes, platforms, productCategories, months,
|
||
totalMaterialsCount, materialsCount, facetTotals,
|
||
isFilterCollapsed, setIsFilterCollapsed,
|
||
facetsLoading = false,
|
||
} = props
|
||
|
||
const handleSortChange = useCallback((newSortBy: string) => {
|
||
if (sortBy === newSortBy) {
|
||
setSortOrder(sortOrder === 'desc' ? 'asc' : 'desc')
|
||
} else {
|
||
setSortBy(newSortBy)
|
||
setSortOrder('desc')
|
||
}
|
||
}, [sortBy, sortOrder, setSortBy, setSortOrder])
|
||
|
||
const totals = {
|
||
materialType: facetTotals?.materialType ?? totalMaterialsCount,
|
||
category: facetTotals?.category ?? totalMaterialsCount,
|
||
scene: facetTotals?.scene ?? totalMaterialsCount,
|
||
platform: facetTotals?.platform ?? totalMaterialsCount,
|
||
productCategory: facetTotals?.productCategory ?? totalMaterialsCount,
|
||
month: facetTotals?.month ?? totalMaterialsCount,
|
||
}
|
||
const activeFilterCount = [selectedMaterialType, selectedCategory, selectedScene, selectedPlatform, selectedProductCategory, selectedMonth, selectedLivePlatform, liveDateFrom || liveDateTo].filter(Boolean).length
|
||
const tabBase = 'relative shrink-0 whitespace-nowrap pb-3 text-[15px] tracking-[-0.02em] transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#1a1c1d]/70 focus-visible:ring-offset-2 rounded-sm'
|
||
const tabActive = 'text-[#1a1c1d]'
|
||
const tabInactive = 'text-[#6b7075] hover:text-[#1a1c1d]'
|
||
const countClass = 'font-en text-[12px] font-medium tabular-nums tracking-[0.08em] text-[#66758b]'
|
||
const countText = (value: number) => (facetsLoading ? '…' : value.toLocaleString('zh-CN'))
|
||
const rankedTypes = useMemo(() => {
|
||
const hasCounts = materialTypes.some((type) => (type.count || 0) > 0)
|
||
if (!hasCounts) return materialTypes
|
||
return [...materialTypes].sort((left, right) => (right.count || 0) - (left.count || 0))
|
||
}, [materialTypes])
|
||
const rankByCount = useCallback(<T extends { count: number }>(items: T[]) => {
|
||
if (!items.some((item) => (item.count || 0) > 0)) return items
|
||
return [...items].sort((left, right) => (right.count || 0) - (left.count || 0))
|
||
}, [])
|
||
const rankedCategories = useMemo(() => rankByCount(categories), [categories, rankByCount])
|
||
const rankedScenes = useMemo(() => rankByCount(scenes), [scenes, rankByCount])
|
||
const rankedPlatforms = useMemo(() => rankByCount(platforms), [platforms, rankByCount])
|
||
const rankedProductCategories = useMemo(() => rankByCount(productCategories), [productCategories, rankByCount])
|
||
const yearFacets = useMemo(() => {
|
||
const yearMap = new Map<string, number>()
|
||
for (const item of months) {
|
||
const year = item.value.slice(0, 4)
|
||
if (!/^\d{4}$/.test(year)) continue
|
||
yearMap.set(year, (yearMap.get(year) || 0) + item.count)
|
||
}
|
||
return Array.from(yearMap.entries())
|
||
.map(([year, count]) => ({ year, count }))
|
||
.sort((left, right) => right.year.localeCompare(left.year))
|
||
}, [months])
|
||
const focusedYear = selectedMonth.slice(0, 4) || yearFacets[0]?.year || ''
|
||
const monthsInFocusedYear = useMemo(
|
||
() => months.filter((item) => item.value.startsWith(`${focusedYear}-`)).sort((left, right) => right.value.localeCompare(left.value)),
|
||
[months, focusedYear],
|
||
)
|
||
const rowRef = useRef<HTMLDivElement>(null)
|
||
const measureRef = useRef<HTMLDivElement>(null)
|
||
const moreWrapRef = useRef<HTMLDivElement>(null)
|
||
const moreTriggerRef = useRef<HTMLButtonElement>(null)
|
||
const moreMenuRef = useRef<HTMLDivElement>(null)
|
||
const [fitCount, setFitCount] = useState<number | null>(null)
|
||
const [moreOpen, setMoreOpen] = useState(false)
|
||
const morePosition = useAnchoredPopover(moreOpen, moreTriggerRef, 264)
|
||
|
||
const measureFit = useCallback(() => {
|
||
const row = rowRef.current
|
||
const measure = measureRef.current
|
||
if (!row || !measure) return
|
||
const available = row.clientWidth
|
||
if (available < 8) {
|
||
setFitCount(null)
|
||
return
|
||
}
|
||
const kids = Array.from(measure.children) as HTMLElement[]
|
||
if (kids.length < 2) {
|
||
setFitCount(rankedTypes.length)
|
||
return
|
||
}
|
||
const moreWidth = kids[kids.length - 1].offsetWidth
|
||
const typeEls = kids.slice(1, -1)
|
||
const gap = 32
|
||
let used = kids[0].offsetWidth
|
||
let count = 0
|
||
for (let index = 0; index < typeEls.length; index += 1) {
|
||
const remaining = typeEls.length - (index + 1)
|
||
const extra = remaining > 0 ? gap + moreWidth : 0
|
||
if (used + gap + typeEls[index].offsetWidth + extra <= available) {
|
||
used += gap + typeEls[index].offsetWidth
|
||
count += 1
|
||
} else {
|
||
break
|
||
}
|
||
}
|
||
setFitCount(count)
|
||
}, [rankedTypes.length])
|
||
|
||
useLayoutEffect(() => {
|
||
measureFit()
|
||
const row = rowRef.current
|
||
if (!row || typeof ResizeObserver === 'undefined') return
|
||
const observer = new ResizeObserver(() => measureFit())
|
||
observer.observe(row)
|
||
return () => observer.disconnect()
|
||
}, [measureFit, rankedTypes, totals.materialType, facetsLoading])
|
||
|
||
const { visibleTypes, overflowTypes } = useMemo(() => {
|
||
if (fitCount === null || fitCount >= rankedTypes.length) {
|
||
return { visibleTypes: rankedTypes, overflowTypes: [] as typeof rankedTypes }
|
||
}
|
||
let visible = rankedTypes.slice(0, fitCount)
|
||
let overflow = rankedTypes.slice(fitCount)
|
||
if (selectedMaterialType) {
|
||
const hiddenSelected = overflow.find((type) => type.value === selectedMaterialType)
|
||
if (hiddenSelected && visible.length > 0) {
|
||
const displaced = visible[visible.length - 1]
|
||
visible = [...visible.slice(0, -1), hiddenSelected]
|
||
overflow = [displaced, ...overflow.filter((type) => type.value !== selectedMaterialType)]
|
||
}
|
||
}
|
||
return { visibleTypes: visible, overflowTypes: overflow }
|
||
}, [fitCount, rankedTypes, selectedMaterialType])
|
||
|
||
useEffect(() => {
|
||
if (!moreOpen) return
|
||
moreMenuRef.current?.querySelector<HTMLButtonElement>('[aria-selected="true"], button')?.focus()
|
||
const onPointer = (event: MouseEvent) => {
|
||
if (!moreWrapRef.current?.contains(event.target as Node) && !moreMenuRef.current?.contains(event.target as Node)) setMoreOpen(false)
|
||
}
|
||
const onKey = (event: KeyboardEvent) => {
|
||
if (event.key === 'Escape') { setMoreOpen(false); moreTriggerRef.current?.focus() }
|
||
}
|
||
document.addEventListener('mousedown', onPointer)
|
||
document.addEventListener('keydown', onKey)
|
||
return () => {
|
||
document.removeEventListener('mousedown', onPointer)
|
||
document.removeEventListener('keydown', onKey)
|
||
}
|
||
}, [moreOpen])
|
||
|
||
useEffect(() => {
|
||
setMoreOpen(false)
|
||
}, [selectedMaterialType])
|
||
|
||
const renderTypeTab = (label: string, count: number, active: boolean, onClick: () => void) => (
|
||
<button type="button" aria-pressed={active} onClick={onClick} className={`${tabBase} ${active ? tabActive : tabInactive}`}>
|
||
{label}
|
||
<span className={`ml-2 ${countClass}`}>{countText(count)}</span>
|
||
{active && <span aria-hidden="true" className="absolute inset-x-0 -bottom-px h-px bg-[#1a1c1d]" />}
|
||
</button>
|
||
)
|
||
|
||
const moreActive = overflowTypes.some((type) => type.value === selectedMaterialType)
|
||
|
||
return (
|
||
<>
|
||
<div className="relative z-10 mb-4">
|
||
<div className="border-b border-[#e7e8ea]">
|
||
<div ref={rowRef} className="relative min-w-0">
|
||
<div className="flex items-end gap-x-8" aria-busy={facetsLoading}>
|
||
{renderTypeTab('全部', totals.materialType, selectedMaterialType === '', () => setSelectedMaterialType(''))}
|
||
{visibleTypes.map((type) => (
|
||
<span key={type.value}>
|
||
{renderTypeTab(type.label, type.count || 0, selectedMaterialType === type.value, () => setSelectedMaterialType(type.value === selectedMaterialType ? '' : type.value))}
|
||
</span>
|
||
))}
|
||
{overflowTypes.length > 0 && (
|
||
<div ref={moreWrapRef} className="relative shrink-0">
|
||
<button
|
||
ref={moreTriggerRef}
|
||
type="button"
|
||
onClick={() => setMoreOpen((open) => !open)}
|
||
aria-expanded={moreOpen}
|
||
aria-haspopup="listbox"
|
||
onKeyDown={(event) => { if (event.key === 'ArrowDown') { event.preventDefault(); setMoreOpen(true); moreMenuRef.current?.querySelector<HTMLButtonElement>('button')?.focus() } }}
|
||
className={`${tabBase} ${moreActive || moreOpen ? tabActive : tabInactive}`}
|
||
>
|
||
更多
|
||
<span className={`ml-2 ${countClass}`}>{overflowTypes.length}</span>
|
||
{(moreActive || moreOpen) && <span aria-hidden="true" className="absolute inset-x-0 -bottom-px h-px bg-[#1a1c1d]" />}
|
||
</button>
|
||
{moreOpen && createPortal(
|
||
<div ref={moreMenuRef} role="listbox" aria-label="更多素材类型" style={morePosition} onKeyDown={(event) => {
|
||
if (event.key === 'Tab') setMoreOpen(false)
|
||
if (event.key === 'Escape') { event.stopPropagation(); setMoreOpen(false); moreTriggerRef.current?.focus() }
|
||
const buttons = Array.from(moreMenuRef.current?.querySelectorAll<HTMLButtonElement>('button') || [])
|
||
const index = buttons.indexOf(event.target as HTMLButtonElement)
|
||
if (event.key === 'ArrowDown' || event.key === 'ArrowUp') { event.preventDefault(); buttons[(index + (event.key === 'ArrowDown' ? 1 : -1) + buttons.length) % buttons.length]?.focus() }
|
||
}} className="z-[500] overflow-y-auto overscroll-contain rounded-[12px] bg-white p-1.5 shadow-[0_12px_32px_rgba(16,24,40,0.18)] ring-1 ring-[#e2e8f0]">
|
||
{overflowTypes.map((type) => {
|
||
const active = selectedMaterialType === type.value
|
||
return (
|
||
<button
|
||
type="button"
|
||
key={type.value}
|
||
role="option"
|
||
aria-selected={active}
|
||
onClick={() => { setSelectedMaterialType(active ? '' : type.value); setMoreOpen(false); moreTriggerRef.current?.focus() }}
|
||
className={`flex min-h-11 w-full items-baseline justify-between gap-4 rounded-lg px-3 py-2.5 text-left text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#1677ff] ${active ? 'bg-[#eef2f6] font-medium text-[#1a1c1d]' : 'text-[#52565b] hover:bg-[#f3f4f5] hover:text-[#1a1c1d]'}`}
|
||
>
|
||
<span>{type.label}</span>
|
||
<span className={countClass}>{countText(type.count || 0)}</span>
|
||
</button>
|
||
)
|
||
})}
|
||
</div>, document.body
|
||
)}
|
||
</div>
|
||
)}
|
||
{facetsLoading && materialTypes.length === 0 && [0, 1, 2, 3].map((item) => (
|
||
<span key={item} className="mb-2 h-4 w-16 bg-[#eceef0]" aria-hidden="true" />
|
||
))}
|
||
</div>
|
||
<div aria-hidden="true" className="pointer-events-none absolute left-0 top-0 h-0 w-0 overflow-hidden">
|
||
<div ref={measureRef} className="flex w-max items-end gap-x-8 whitespace-nowrap">
|
||
<span className={tabBase}>全部<span className={`ml-2 ${countClass}`}>{countText(totals.materialType)}</span></span>
|
||
{rankedTypes.map((type) => (
|
||
<span key={type.value} className={tabBase}>{type.label}<span className={`ml-2 ${countClass}`}>{countText(type.count || 0)}</span></span>
|
||
))}
|
||
<span className={tabBase}>更多<span className={`ml-2 ${countClass}`}>00</span></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="mb-4 flex flex-wrap items-center justify-between gap-x-3 gap-y-1">
|
||
<p className="shrink-0 whitespace-nowrap text-[13px] text-[#86898e]">
|
||
共 <span className="font-en text-[15px] font-medium tabular-nums tracking-[0.06em] text-[#1a1c1d]">{facetsLoading ? '…' : materialsCount.toLocaleString('zh-CN')}</span> 条
|
||
{selectedMaterialType && <span className="sr-only">{facetsLoading ? '计数加载中' : `${materialsCount} 个素材`}</span>}
|
||
</p>
|
||
<div className="ml-auto flex flex-wrap items-center justify-end gap-x-2 gap-y-1 sm:gap-x-4">
|
||
<button
|
||
type="button"
|
||
onClick={() => setIsFilterCollapsed(!isFilterCollapsed)}
|
||
aria-label={isFilterCollapsed ? '展开更多筛选' : '收起筛选'}
|
||
aria-expanded={!isFilterCollapsed}
|
||
aria-controls="material-filter-fields"
|
||
className="inline-flex min-h-11 shrink-0 items-center gap-1.5 whitespace-nowrap rounded-lg px-2 text-[13px] text-[#52565b] transition-colors hover:bg-white hover:text-[#1a1c1d] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#1677ff]"
|
||
>
|
||
<SlidersHorizontal className="h-4 w-4" aria-hidden="true" />
|
||
{isFilterCollapsed ? '展开更多筛选' : '收起筛选'}
|
||
{isFilterCollapsed && activeFilterCount > 0 && <span className="ml-1.5 font-en text-[11px] text-[#5a66b8]">{activeFilterCount}</span>}
|
||
</button>
|
||
<div className="flex shrink-0 items-center gap-3 text-[13px] sm:gap-4" role="group" aria-labelledby="materials-sort-label">
|
||
<h2 id="materials-sort-label" className="sr-only">排序方式</h2>
|
||
<button onClick={() => handleSortChange('createdAt')} className={`flex min-h-11 items-center gap-1 whitespace-nowrap transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#1a1c1d]/70 focus-visible:ring-offset-2 rounded-sm ${sortBy === 'createdAt' ? 'text-[#1a1c1d]' : 'text-[#86898e] hover:text-[#1a1c1d]'}`}>
|
||
{sortBy === 'createdAt' && sortOrder === 'asc' ? '最早上传' : '最新上传'}
|
||
{sortBy === 'createdAt' && <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d={sortOrder === 'desc' ? 'M19 9l-7 7-7-7' : 'M5 15l7-7 7 7'} /></svg>}
|
||
</button>
|
||
<button onClick={() => handleSortChange('downloadCount')} className={`flex min-h-11 items-center gap-1 whitespace-nowrap transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#1a1c1d]/70 focus-visible:ring-offset-2 rounded-sm ${sortBy === 'downloadCount' ? 'text-[#1a1c1d]' : 'text-[#86898e] hover:text-[#1a1c1d]'}`}>
|
||
{sortBy === 'downloadCount' && sortOrder === 'asc' ? '下载最少' : '下载最多'}
|
||
{sortBy === 'downloadCount' && <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d={sortOrder === 'desc' ? 'M19 9l-7 7-7-7' : 'M5 15l7-7 7 7'} /></svg>}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{!isFilterCollapsed && (
|
||
<section id="material-filter-fields" aria-label="素材筛选条件" className="mb-5 rounded-[12px] border border-[#e7e8ea] bg-white px-4 py-1 sm:px-5">
|
||
<FacetRow label="使用店铺" items={rankedCategories} selected={selectedCategory} onChange={setSelectedCategory} total={totals.category} loading={facetsLoading} />
|
||
<FacetRow label="场景类别" items={rankedScenes} selected={selectedScene} onChange={setSelectedScene} total={totals.scene} loading={facetsLoading} />
|
||
{(rankedPlatforms.length > 0 || facetsLoading) && <FacetRow label="平台分类" items={rankedPlatforms} selected={selectedPlatform} onChange={setSelectedPlatform} total={totals.platform} loading={facetsLoading} />}
|
||
{setSelectedLivePlatform && (
|
||
<div className="grid gap-2.5 border-b border-[#e7e8ea] py-3.5 sm:grid-cols-[88px_minmax(0,1fr)] sm:gap-4">
|
||
<h2 className="pt-1.5 text-sm font-medium text-[#52565b]">直播平台</h2>
|
||
<div role="group" aria-label="直播平台" className="flex flex-wrap gap-2">
|
||
{['', '抖音', '快手', '视频号', '淘宝直播', 'B站'].map((name) => <button type="button" key={name || 'all'} aria-pressed={selectedLivePlatform === name} onClick={() => setSelectedLivePlatform(name === selectedLivePlatform ? '' : name)} className={`${filterChoice} ${selectedLivePlatform === name ? filterSelected : filterIdle}`}>{name || '全部'}</button>)}
|
||
</div>
|
||
</div>
|
||
)}
|
||
{setLiveDateFrom && setLiveDateTo && (
|
||
<div className="grid gap-2.5 border-b border-[#e7e8ea] py-3.5 sm:grid-cols-[88px_minmax(0,1fr)] sm:gap-4">
|
||
<h2 className="pt-3 text-sm font-medium text-[#52565b]">直播日期</h2>
|
||
<div className="grid min-w-0 grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] items-center gap-2 sm:max-w-lg">
|
||
<CertificateDatePicker id="filter-live-from" label="直播开始日期" value={liveDateFrom} onChange={setLiveDateFrom} max={liveDateTo} placeholder="开始日期" />
|
||
<span className="text-xs text-[#66758b]">至</span>
|
||
<CertificateDatePicker id="filter-live-to" label="直播结束日期" value={liveDateTo} onChange={setLiveDateTo} min={liveDateFrom} placeholder="结束日期" />
|
||
</div>
|
||
</div>
|
||
)}
|
||
{(rankedProductCategories.length > 0 || facetsLoading) && <FacetRow label="产品类别" items={rankedProductCategories} selected={selectedProductCategory} onChange={setSelectedProductCategory} total={totals.productCategory} loading={facetsLoading} />}
|
||
<div className="grid gap-2.5 py-3.5 sm:grid-cols-[88px_minmax(0,1fr)] sm:gap-4">
|
||
<h2 className="pt-1.5 text-sm font-medium text-[#52565b]">上传时间</h2>
|
||
<div className="min-w-0 space-y-2">
|
||
<div role="group" aria-label="上传年份" className="flex flex-wrap gap-2">
|
||
<button type="button" aria-pressed={!selectedMonth} onClick={() => setSelectedMonth('')} className={`${filterChoice} ${!selectedMonth ? filterSelected : filterIdle}`}>全部<span className="text-xs tabular-nums">{countText(totals.month)}</span></button>
|
||
{yearFacets.map((item) => <button type="button" key={item.year} aria-pressed={selectedMonth.startsWith(item.year)} onClick={() => setSelectedMonth(selectedMonth === item.year ? '' : item.year)} className={`${filterChoice} ${selectedMonth.startsWith(item.year) ? filterSelected : filterIdle}`}>{item.year}年<span className="text-xs tabular-nums">{countText(item.count)}</span></button>)}
|
||
</div>
|
||
{monthsInFocusedYear.length > 0 && <div role="group" aria-label={focusedYear + '年上传月份'} className="flex flex-wrap gap-2">
|
||
{monthsInFocusedYear.map((item) => <button type="button" key={item.value} aria-pressed={selectedMonth === item.value} onClick={() => setSelectedMonth(item.value === selectedMonth ? '' : item.value)} className={`${filterChoice} ${selectedMonth === item.value ? filterSelected : filterIdle}`}>{Number.parseInt(item.value.slice(5), 10)}月<span className="text-xs tabular-nums">{countText(item.count)}</span></button>)}
|
||
</div>}
|
||
</div>
|
||
</div>
|
||
<p className="border-t border-[#e7e8ea] py-3 text-xs leading-relaxed text-[#66758b]">数量随筛选条件更新，仅显示仍有结果的选项。</p>
|
||
</section>
|
||
)}
|
||
</>
|
||
)
|
||
}
|
||
|
||
export default memo(FilterPanel)
|