108 lines
4.3 KiB
TypeScript
108 lines
4.3 KiB
TypeScript
import { useState, useEffect, useCallback } from 'react'
|
|
|
|
export interface FilterState {
|
|
searchKeyword: string
|
|
selectedCategory: string
|
|
selectedScene: string
|
|
selectedMaterialType: string
|
|
selectedPlatform: string
|
|
selectedProductCategory: string
|
|
selectedMonth: string
|
|
sortBy: string
|
|
sortOrder: 'asc' | 'desc'
|
|
}
|
|
|
|
export function useMaterialFilters(initialMaterialType = '') {
|
|
const [searchKeyword, setSearchKeyword] = useState('')
|
|
const [selectedCategory, setSelectedCategory] = useState('')
|
|
const [selectedScene, setSelectedScene] = useState('')
|
|
const [selectedMaterialType, setSelectedMaterialType] = useState(initialMaterialType)
|
|
const [selectedPlatform, setSelectedPlatform] = useState('')
|
|
const [selectedProductCategory, setSelectedProductCategory] = useState('')
|
|
const [selectedMonth, setSelectedMonth] = useState('')
|
|
const [sortBy, setSortBy] = useState('createdAt')
|
|
const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>('desc')
|
|
|
|
// 从URL参数恢复筛选状态
|
|
useEffect(() => {
|
|
if (typeof window === 'undefined') return
|
|
|
|
const params = new URLSearchParams(window.location.search)
|
|
const materialType = params.get('materialType')
|
|
const category = params.get('category')
|
|
const scene = params.get('scene')
|
|
const platform = params.get('platform')
|
|
const productCategory = params.get('productCategory')
|
|
const month = params.get('month')
|
|
const search = params.get('search')
|
|
const sort = params.get('sortBy')
|
|
const sortOrderParam = params.get('sortOrder')
|
|
|
|
if (materialType) setSelectedMaterialType(materialType)
|
|
if (category) setSelectedCategory(category)
|
|
if (scene) setSelectedScene(scene)
|
|
if (platform) setSelectedPlatform(platform)
|
|
if (productCategory) setSelectedProductCategory(productCategory)
|
|
if (month) setSelectedMonth(month)
|
|
if (search) setSearchKeyword(search)
|
|
if (sort) setSortBy(sort)
|
|
if (sortOrderParam === 'asc' || sortOrderParam === 'desc') setSortOrder(sortOrderParam)
|
|
}, [])
|
|
|
|
// 同步筛选状态到URL参数
|
|
useEffect(() => {
|
|
if (typeof window === 'undefined') return
|
|
|
|
const params = new URLSearchParams()
|
|
if (searchKeyword) params.set('search', searchKeyword)
|
|
if (selectedMaterialType) params.set('materialType', selectedMaterialType)
|
|
if (selectedCategory) params.set('category', selectedCategory)
|
|
if (selectedScene) params.set('scene', selectedScene)
|
|
if (selectedPlatform) params.set('platform', selectedPlatform)
|
|
if (selectedProductCategory) params.set('productCategory', selectedProductCategory)
|
|
if (selectedMonth) params.set('month', selectedMonth)
|
|
if (sortBy && sortBy !== 'createdAt') params.set('sortBy', sortBy)
|
|
if (sortOrder && sortOrder !== 'desc') params.set('sortOrder', sortOrder)
|
|
|
|
const newUrl = params.toString() ? `${window.location.pathname}?${params.toString()}` : window.location.pathname
|
|
window.history.replaceState({}, '', newUrl)
|
|
}, [searchKeyword, selectedMaterialType, selectedCategory, selectedScene, selectedPlatform, selectedProductCategory, selectedMonth, sortBy, sortOrder])
|
|
|
|
const buildQueryParams = useCallback(() => {
|
|
const params = new URLSearchParams()
|
|
if (searchKeyword) params.append('search', searchKeyword)
|
|
if (selectedCategory) params.append('category', selectedCategory)
|
|
if (selectedScene) params.append('scene', selectedScene)
|
|
if (selectedMaterialType) params.append('materialType', selectedMaterialType)
|
|
if (selectedPlatform) params.append('platform', selectedPlatform)
|
|
if (selectedProductCategory) params.append('productCategory', selectedProductCategory)
|
|
if (selectedMonth) params.append('month', selectedMonth)
|
|
if (sortBy) params.append('sortBy', sortBy)
|
|
if (sortOrder) params.append('sortOrder', sortOrder)
|
|
return params
|
|
}, [searchKeyword, selectedCategory, selectedScene, selectedMaterialType, selectedPlatform, selectedProductCategory, selectedMonth, sortBy, sortOrder])
|
|
|
|
return {
|
|
searchKeyword,
|
|
setSearchKeyword,
|
|
selectedCategory,
|
|
setSelectedCategory,
|
|
selectedScene,
|
|
setSelectedScene,
|
|
selectedMaterialType,
|
|
setSelectedMaterialType,
|
|
selectedPlatform,
|
|
setSelectedPlatform,
|
|
selectedProductCategory,
|
|
setSelectedProductCategory,
|
|
selectedMonth,
|
|
setSelectedMonth,
|
|
sortBy,
|
|
setSortBy,
|
|
sortOrder,
|
|
setSortOrder,
|
|
buildQueryParams,
|
|
}
|
|
}
|
|
|