feat: 美食类型改为输入框+热门推荐,移除顶部 logo
- 菜系选择从固定标签改为自由输入框,支持任意关键词搜索 - 输入框下方展示热门推荐标签(火锅、日料、烧烤等),点击自动填入 - 筛选卡片内顺序调整为:美食 > 距离 > 人均 - 移除顶部绿色图标 logo,页面直接从标题开始
This commit is contained in:
@@ -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
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user