diff --git a/apps/web/src/components/InquiryPage.tsx b/apps/web/src/components/InquiryPage.tsx index eca3a70..3c41193 100644 --- a/apps/web/src/components/InquiryPage.tsx +++ b/apps/web/src/components/InquiryPage.tsx @@ -1,6 +1,6 @@ 'use client' -import { useEffect, useState, useCallback } from 'react' +import { useEffect, useState, useCallback, useRef, useMemo } from 'react' import { API_BASE } from '@/lib/apiBase' interface Lead { @@ -115,6 +115,30 @@ export default function InquiryPage({ onLeadDetail }: { onLeadDetail?: (id: stri const [fLevel, setFLevel] = useState('全部级别') const [fCat, setFCat] = useState('全部品类') const [catOptions, setCatOptions] = useState(['全部品类']) + const [catInput, setCatInput] = useState('') + const [catOpen, setCatOpen] = useState(false) + const [catHighlightIdx, setCatHighlightIdx] = useState(0) + const catRef = useRef(null) + const filteredCatOptions = useMemo(() => { + const q = catInput.trim().toLowerCase() + if (!q) return catOptions + return catOptions.filter((c) => c.toLowerCase().includes(q)) + }, [catInput, catOptions]) + useEffect(() => { + if (!catOpen) return + const handler = (e: MouseEvent) => { + if (catRef.current && !catRef.current.contains(e.target as Node)) setCatOpen(false) + } + document.addEventListener('mousedown', handler) + return () => document.removeEventListener('mousedown', handler) + }, [catOpen]) + useEffect(() => { setCatHighlightIdx(0) }, [catInput, catOpen]) + const selectCat = (cat: string) => { + setFCat(cat) + setCatInput('') + setCatOpen(false) + setCatHighlightIdx(0) + } const [fSource, setFSource] = useState('全部来源') const [fPerson, setFPerson] = useState('全部人员') @@ -402,7 +426,6 @@ export default function InquiryPage({ onLeadDetail }: { onLeadDetail?: (id: stri { label: '公告日期', value: fTime, set: setFTime, opts: ['全部日期', '今天', '昨天', '本周', '本月'] }, { label: '星级', value: fStar, set: setFStar, opts: ['全部星级', '5星', '4星', '3星', '2星及以下'] }, { label: '甲方级别', value: fLevel, set: setFLevel, opts: LEVEL_OPTIONS }, - { label: '品类', value: fCat, set: setFCat, opts: catOptions }, { label: '来源平台', value: fSource, set: setFSource, opts: SOURCE_OPTIONS }, { label: '负责人', value: fPerson, set: setFPerson, opts: PERSON_OPTIONS }, ].map(f => ( @@ -413,6 +436,54 @@ export default function InquiryPage({ onLeadDetail }: { onLeadDetail?: (id: stri ))} +
+ 品类 +
+ setCatOpen(true)} + onChange={e => { setCatInput(e.target.value); setCatOpen(true) }} + onKeyDown={e => { + if (e.key === 'ArrowDown') { e.preventDefault(); setCatHighlightIdx(i => Math.min(filteredCatOptions.length - 1, i + 1)) } + else if (e.key === 'ArrowUp') { e.preventDefault(); setCatHighlightIdx(i => Math.max(0, i - 1)) } + else if (e.key === 'Enter') { e.preventDefault(); if (filteredCatOptions[catHighlightIdx]) selectCat(filteredCatOptions[catHighlightIdx]) } + else if (e.key === 'Escape') { setCatOpen(false); setCatInput('') } + else if (e.key === 'Backspace' && !catInput && fCat !== '全部品类') { e.preventDefault(); selectCat('全部品类') } + }} + className="bg-surface-container-low border border-border-subtle rounded pl-2 pr-6 py-1 text-xs w-32 focus:ring-secondary outline-none placeholder:text-slate-400" + /> + {fCat !== '全部品类' && ( + + )} +
+ {catOpen && ( +
+ {filteredCatOptions.length === 0 ? ( +
无匹配品类
+ ) : ( + filteredCatOptions.map((c, idx) => ( + + )) + )} +
+ )} +
批量操作: