diff --git a/App.jsx b/App.jsx index e7e51c9..ee25b31 100644 --- a/App.jsx +++ b/App.jsx @@ -2096,6 +2096,8 @@ function MainApp({ username, onLogout }) { const [productDraft, setProductDraft] = useState(null); const [productSearch, setProductSearch] = useState(''); const [productCategoryFilter, setProductCategoryFilter] = useState('all'); + const [productTypeFilter, setProductTypeFilter] = useState('all'); + const [productBrandFilter, setProductBrandFilter] = useState('all'); const [aiImportOpen, setAiImportOpen] = useState(false); const [aiImportBusy, setAiImportBusy] = useState(false); const [aiImportError, setAiImportError] = useState(''); @@ -2247,9 +2249,29 @@ function MainApp({ username, onLogout }) { const vipCustomers = useMemo(() => customers.filter(c => c.isVip), [customers]); const normalCustomers = useMemo(() => customers.filter(c => !c.isVip), [customers]); + const productsInCategory = useMemo(() => ( + productCategoryFilter === 'all' ? products : products.filter(p => p.category === productCategoryFilter) + ), [products, productCategoryFilter]); + + // 可选的"类别"(细分品类,比如高频塔式UPS/工频UPS)跟着"大类"筛选联动收窄; + // 可选的"品牌"再跟着"大类+类别"联动收窄,一层层缩小范围 + const availableProductTypes = useMemo(() => { + const set = new Set(productsInCategory.map(p => p.type).filter(Boolean)); + return [...set].sort(); + }, [productsInCategory]); + + const productsInCategoryAndType = useMemo(() => ( + productTypeFilter === 'all' ? productsInCategory : productsInCategory.filter(p => p.type === productTypeFilter) + ), [productsInCategory, productTypeFilter]); + + const availableProductBrands = useMemo(() => { + const set = new Set(productsInCategoryAndType.map(p => p.brand).filter(Boolean)); + return [...set].sort(); + }, [productsInCategoryAndType]); + const filteredProducts = useMemo(() => { - let list = products; - if (productCategoryFilter !== 'all') list = list.filter(p => p.category === productCategoryFilter); + let list = productsInCategoryAndType; + if (productBrandFilter !== 'all') list = list.filter(p => p.brand === productBrandFilter); if (productSearch.trim()) { const q = productSearch.trim().toLowerCase(); list = list.filter(p => @@ -2259,7 +2281,17 @@ function MainApp({ username, onLogout }) { ); } return [...list].sort((a, b) => categoryBreadcrumb(a, productCategories).localeCompare(categoryBreadcrumb(b, productCategories)) || (a.name || '').localeCompare(b.name || '')); - }, [products, productSearch, productCategoryFilter, productCategories]); + }, [productsInCategoryAndType, productBrandFilter, productSearch, productCategories]); + + function handleProductCategoryFilterChange(catId) { + setProductCategoryFilter(catId); + setProductTypeFilter('all'); + setProductBrandFilter('all'); + } + function handleProductTypeFilterChange(type) { + setProductTypeFilter(type); + setProductBrandFilter('all'); + } const filteredSuppliers = useMemo(() => { let list = suppliers; @@ -3463,11 +3495,25 @@ function MainApp({ username, onLogout }) {