feat: 美食类型改为输入框+热门推荐,移除顶部 logo

- 菜系选择从固定标签改为自由输入框,支持任意关键词搜索
- 输入框下方展示热门推荐标签(火锅、日料、烧烤等),点击自动填入
- 筛选卡片内顺序调整为:美食 > 距离 > 人均
- 移除顶部绿色图标 logo,页面直接从标题开始
This commit is contained in:
2026-02-24 23:03:28 +08:00
parent 801e922bb6
commit a28f4405e9
2 changed files with 56 additions and 28 deletions
+8
View File
@@ -26,3 +26,11 @@ body {
user-select: none;
-webkit-tap-highlight-color: transparent;
}
.scrollbar-none {
-ms-overflow-style: none;
scrollbar-width: none;
}
.scrollbar-none::-webkit-scrollbar {
display: none;
}
+48 -28
View File
@@ -3,7 +3,7 @@
import { useState, useRef, useEffect, useCallback } from "react";
import { useRouter } from "next/navigation";
import { motion, AnimatePresence } from "framer-motion";
import { Plus, LogIn, Utensils, Loader2, MapPin, Navigation, X, Users, Heart, Sparkles, ChevronRight } from "lucide-react";
import { Plus, LogIn, Utensils, Loader2, MapPin, Navigation, X, Users, Heart, Sparkles, ChevronRight, Flame } from "lucide-react";
import { getUserId } from "@/lib/userId";
interface LocationSuggestion {
@@ -30,7 +30,7 @@ const PRICE_OPTIONS = [
{ label: "¥100+", value: "over100" },
] as const;
const CUISINE_OPTIONS = ["不限", "火锅", "日料", "烧烤", "西餐", "川菜", "粤菜", "东南亚"] as const;
const HOT_CUISINES = ["火锅", "日料", "烧烤", "西餐", "川菜", "咖啡甜品", "小吃快餐"] as const;
function getLocation(): Promise<{ lat: number; lng: number }> {
if (process.env.NODE_ENV === "development") {
@@ -66,7 +66,7 @@ export default function LandingPage() {
const [fetchingSuggestions, setFetchingSuggestions] = useState(false);
const [radius, setRadius] = useState(3000);
const [priceRange, setPriceRange] = useState("any");
const [cuisine, setCuisine] = useState("不限");
const [cuisine, setCuisine] = useState("");
const suggestRef = useRef<HTMLDivElement>(null);
const debounceRef = useRef<ReturnType<typeof setTimeout>>(null);
@@ -198,11 +198,7 @@ export default function LandingPage() {
animate={{ y: 0, opacity: 1 }}
transition={{ duration: 0.5 }}
>
<div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-emerald-500 shadow-lg shadow-emerald-200">
<Utensils size={28} className="text-white" />
</div>
<h1 className="mt-5 text-3xl font-black tracking-tight text-zinc-900">
<h1 className="text-3xl font-black tracking-tight text-zinc-900">
NoWhatever
</h1>
<p className="mt-0.5 text-sm font-medium tracking-widest text-zinc-400">
@@ -324,6 +320,50 @@ export default function LandingPage() {
</div>
<div className="flex flex-col gap-2 rounded-xl border border-zinc-100 bg-zinc-50/50 px-3 py-2.5">
<div className="flex items-center gap-3">
<span className="w-8 shrink-0 text-xs font-medium text-zinc-400"></span>
<div className="relative flex flex-1 items-center">
<input
type="text"
placeholder="想吃什么?(留空则不限)"
value={cuisine}
onChange={(e) => setCuisine(e.target.value)}
disabled={loading}
className="h-7 w-full rounded-full border-none bg-white pl-3 pr-7 text-xs text-zinc-700 outline-none ring-1 ring-zinc-200 transition-colors placeholder:text-zinc-300 focus:ring-2 focus:ring-emerald-300 disabled:opacity-50"
/>
{cuisine && !loading && (
<button
onClick={() => setCuisine("")}
className="absolute right-2 flex h-4 w-4 items-center justify-center rounded-full text-zinc-400 hover:text-zinc-600"
>
<X size={12} />
</button>
)}
</div>
</div>
<div className="flex items-center gap-3">
<span className="w-8 shrink-0 text-xs font-medium text-zinc-400"></span>
<div className="flex flex-wrap items-center gap-1.5">
<Flame size={11} className="shrink-0 text-orange-400" />
{HOT_CUISINES.map((tag) => (
<button
key={tag}
type="button"
onClick={() => setCuisine(tag)}
disabled={loading}
className={`h-6 rounded-full px-2.5 text-xs font-medium transition-colors disabled:opacity-50 ${
cuisine === tag
? "bg-emerald-500 text-white shadow-sm"
: "bg-white text-zinc-500 hover:bg-zinc-200"
}`}
>
{tag}
</button>
))}
</div>
</div>
<div className="flex items-center gap-3">
<span className="w-8 shrink-0 text-xs font-medium text-zinc-400"></span>
<div className="flex gap-1.5">
@@ -366,26 +406,6 @@ export default function LandingPage() {
</div>
</div>
<div className="flex items-start gap-3">
<span className="w-8 shrink-0 pt-1.5 text-xs font-medium text-zinc-400"></span>
<div className="flex flex-wrap gap-1.5">
{CUISINE_OPTIONS.map((opt) => (
<button
key={opt}
type="button"
onClick={() => setCuisine(opt)}
disabled={loading}
className={`h-7 rounded-full px-3 text-xs font-medium transition-colors disabled:opacity-50 ${
cuisine === opt
? "bg-emerald-500 text-white shadow-sm"
: "bg-white text-zinc-500 hover:bg-zinc-200"
}`}
>
{opt}
</button>
))}
</div>
</div>
</div>
<button