diff --git a/src/app/panic/page.tsx b/src/app/panic/page.tsx index e7241c0..7d9dcac 100644 --- a/src/app/panic/page.tsx +++ b/src/app/panic/page.tsx @@ -39,7 +39,8 @@ export default function PanicPage() { const [fetchingSuggestions, setFetchingSuggestions] = useState(false); const [radius, setRadius] = useState(3000); const [priceRange, setPriceRange] = useState("any"); - const [cuisine, setCuisine] = useState(""); + const [cuisines, setCuisines] = useState([]); + const [cuisineInput, setCuisineInput] = useState(""); const suggestRef = useRef(null); const debounceRef = useRef>(null); @@ -50,14 +51,15 @@ export default function PanicPage() { useEffect(() => { const prefs = getCachedPreferences(); - if (prefs.cuisine) setCuisine(prefs.cuisine); + if (prefs.cuisines) setCuisines(prefs.cuisines); + else if (prefs.cuisine) setCuisines([prefs.cuisine]); if (prefs.priceRange) setPriceRange(prefs.priceRange); if (prefs.radius) setRadius(prefs.radius); }, []); const handleSceneChange = useCallback((s: SceneType) => { setScene(s); - setCuisine(""); + setCuisines([]); setPriceRange("any"); }, []); @@ -142,7 +144,7 @@ export default function PanicPage() { const res = await fetch("/api/room/create", { method: "POST", headers: { "Content-Type": "application/json" }, - body: JSON.stringify({ ...coords, radius, priceRange, cuisine, userId: getUserId(), scene }), + body: JSON.stringify({ ...coords, radius, priceRange, cuisine: cuisines.join("|"), userId: getUserId(), scene }), }); const data = await res.json(); @@ -395,16 +397,27 @@ export default function PanicPage() {
setCuisine(e.target.value)} + placeholder={cuisines.length === 0 ? sceneConfig.tagPlaceholder : "继续添加..."} + value={cuisineInput} + onChange={(e) => setCuisineInput(e.target.value)} + onKeyDown={(e) => { + if (e.key === "Enter") { + e.preventDefault(); + const val = cuisineInput.trim(); + if (val && !cuisines.includes(val)) { + setCuisines((prev) => [...prev, val]); + } + setCuisineInput(""); + } + }} disabled={loading} className="h-7 w-full rounded-full border-none bg-elevated pl-3 pr-7 text-xs text-foreground outline-none ring-1 ring-subtle transition-colors placeholder:text-dim focus:ring-2 focus:ring-orange-500/50 disabled:opacity-50" /> - {cuisine && !loading && ( + {cuisineInput && !loading && (
-
- -
+
+ +
- {sceneConfig.hotTags.map((tag) => ( + {sceneConfig.hotTags.map((tag) => { + const selected = cuisines.includes(tag); + return ( + + ); + })} + {cuisines.filter((t) => !sceneConfig.hotTags.includes(t)).map((tag) => ( ))} + {cuisines.length > 0 && !loading && ( + + )}
diff --git a/src/types/index.ts b/src/types/index.ts index 76a6b20..afeb8a2 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -49,6 +49,7 @@ export interface UserProfile { export interface UserPreferences { cuisine?: string; + cuisines?: string[]; priceRange?: string; radius?: number; }