[V0_FILE]typescriptreact:file="app/page.tsx" import Link from "next/link" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Card, CardContent } from "@/components/ui/card" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Calendar } from "@/components/ui/calendar" import { HotelCard } from "@/components/hotel-card" import { MapPin, Search, Star, UserRound } from "lucide-react" import { Header } from "@/components/header" import { Footer } from "@/components/footer" export default function Home() { return (

{/* Hero Section */}

寻找您完美的住宿体验

探索高品质民宿，享受宾至如归的温馨感受，轻松预订您的理想房间。

浏览房间了解更多

搜索房间地图查看

入住日期

退房日期

地图功能将在这里显示

{/* Featured Rooms Section */}

精选房间

探索我们的热门房间，享受舒适住宿体验

查看全部房间

{/* Features Section */}

我们的特色服务

我们提供全方位的服务，确保您的住宿体验舒适无忧

积分奖励

通过分享和预订获取积分，兑换专属优惠券

位置服务

查看民宿准确位置和周边设施，提供便捷导航

个性化推荐

根据您的偏好和历史记录提供个性化房间推荐

{/* Testimonials */}

用户评价

看看其他用户对我们服务的评价

{[1, 2, 3].map((i) => (

{Array(5) .fill(null) .map((_, j) => ( ))}

"服务非常周到，房间干净整洁，地理位置优越，周边设施齐全，下次还会选择这里。"

张先生

入住于2023年8月

))}

{/* Newsletter */}

订阅我们的优惠信息

及时获取最新优惠信息和专属折扣

) } [V0_FILE]typescriptreact:file="app/loading.tsx" isFixed="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="components/header.tsx" "use client" import Link from "next/link" import { useState } from "react" import { Button } from "@/components/ui/button" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Heart, Home, LogIn, MapPin, Menu, Search, ShoppingBag, User } from "lucide-react" export function Header() { const [isLoggedIn, setIsLoggedIn] = useState(false) return (

酒店预订网站探索优质住宿，轻松预订民宿预订

{isLoggedIn ? ( 我的账户个人信息我的订单我的收藏 setIsLoggedIn(false)}>退出登录 ) : ( )}

) } [V0_FILE]typescriptreact:file="components/footer.tsx" import Link from "next/link" export function Footer() { return ( ) } [V0_FILE]typescriptreact:file="components/hotel-card.tsx" import Image from "next/image" import Link from "next/link" import { Card, CardContent, CardFooter } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Heart, MapPin, Star } from "lucide-react" interface HotelCardProps { title: string description: string price: number rating: number image: string location: string tags?: string[] } export function HotelCard({ title, description, price, rating, image, location, tags }: HotelCardProps) { return (

{tags && tags.length > 0 && (

{tags.map((tag) => ( {tag} ))}

)}

{title}

{rating}

{location}

{description}

¥{price} /晚

查看详情 ) } [V0_FILE]typescriptreact:file="app/login/page.tsx" "use client" import type React from "react" import { useState } from "react" import Link from "next/link" import { useRouter } from "next/navigation" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Header } from "@/components/header" import { Footer } from "@/components/footer" export default function LoginPage() { const router = useRouter() const [activeTab, setActiveTab] = useState("login") const handleSubmit = (e: React.FormEvent) => { e.preventDefault() // 模拟登录/注册成功 router.push("/") } return (

{activeTab === "login" ? "账户登录" : "注册账户"} {activeTab === "login" ? "登录以访问您的账户和订单" : "创建一个账户以开始使用我们的服务"} 登录注册

) } [V0_FILE]typescriptreact:file="app/rooms/page.tsx" import { Card, CardContent } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Button } from "@/components/ui/button" import { Checkbox } from "@/components/ui/checkbox" import { Label } from "@/components/ui/label" import { Slider } from "@/components/ui/slider" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { HotelCard } from "@/components/hotel-card" import { Header } from "@/components/header" import { Footer } from "@/components/footer" import { Search } from "lucide-react" // 模拟房间数据 const rooms = [ { id: 1, title: "豪华海景套房", description: "享受壮丽的海景和豪华的设施，为您的假期增添难忘的体验。", price: 698, rating: 4.9, image: "/placeholder.svg?height=400&width=600", location: "三亚·海棠湾", }, { id: 2, title: "现代都市公寓", description: "位于市中心的现代化公寓，紧邻购物和娱乐区。", price: 458, rating: 4.7, image: "/placeholder.svg?height=400&width=600", location: "上海·静安区", }, { id: 3, title: "古典庭院民宿", description: "体验传统文化与现代便利设施完美结合的庭院式民宿。", price: 528, rating: 4.8, image: "/placeholder.svg?height=400&width=600", location: "丽江·古城区", }, { id: 4, title: "山景度假别墅", description: "被青山环绕的度假别墅，享受宁静的自然环境和舒适的住宿体验。", price: 888, rating: 4.9, image: "/placeholder.svg?height=400&width=600", location: "杭州·西湖区", }, { id: 5, title: "工业风格单身公寓", description: "现代工业风格的单身公寓，时尚简约，适合商务旅行。", price: 358, rating: 4.6, image: "/placeholder.svg?height=400&width=600", location: "北京·朝阳区", }, { id: 6, title: "日式简约民宿", description: "简约日式风格，提供安静舒适的住宿环境，适合休闲度假。", price: 428, rating: 4.7, image: "/placeholder.svg?height=400&width=600", location: "苏州·姑苏区", }, ] export default function RoomsPage() { return (

浏览房间

{/* 筛选侧边栏 */}

搜索

价格范围

¥0 ¥500 ¥2000+

房间类型

{["单人间", "双人间", "家庭套房", "豪华套房"].map((type) => (

{type}

))}

设施

{["无线网络", "空调", "电视", "冰箱", "洗衣机", "厨房", "停车位"].map((facility) => (

{facility}

))}

{/* 房间列表 */}

共找到 {rooms.length} 个房间

网格视图列表视图

{rooms.map((room) => ( ))}

{rooms.map((room) => (

{room.title}

¥{room.price}/晚

{room.location}

{room.description}

))}

) } [V0_FILE]typescriptreact:file="app/rooms/loading.tsx" isFixed="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/rooms/[id]/page.tsx" import Link from "next/link" import Image from "next/image" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Calendar } from "@/components/ui/calendar" import { Header } from "@/components/header" import { Footer } from "@/components/footer" import { CalendarCheck, Heart, MapPin, Share2, Star, Wifi } from "lucide-react" export default function RoomDetailPage({ params }: { params: { id: string } }) { // 这里可以根据 ID 获取房间详情，这里使用模拟数据 const roomDetails = { id: params.id, title: "豪华海景套房", description: "享受壮丽的海景和豪华的设施，为您的假期增添难忘的体验。我们的豪华海景套房位于顶层，提供180度无遮挡海景视野，每天都能欣赏到日出和日落的美景。套房内配备高档家具和设施，包括特大号床垫、豪华卫浴用品、私人阳台和休息区。", price: 698, rating: 4.9, reviews: 128, location: "三亚·海棠湾", host: "张主人", hostAvatar: "/placeholder.svg?height=50&width=50", images: [ "/placeholder.svg?height=600&width=800", "/placeholder.svg?height=600&width=800", "/placeholder.svg?height=600&width=800", "/placeholder.svg?height=600&width=800", ], amenities: [ { name: "无线网络", icon: Wifi }, { name: "空调", icon: Wifi }, { name: "电视", icon: Wifi }, { name: "冰箱", icon: Wifi }, { name: "洗衣机", icon: Wifi }, { name: "厨房", icon: Wifi }, { name: "停车位", icon: Wifi }, { name: "泳池", icon: Wifi }, ], } return (

{roomDetails.title}

{roomDetails.rating} ({roomDetails.reviews} 条评价)

•

{roomDetails.location}

{/* 房间图片 */}

{roomDetails.images.slice(1).map((image, index) => (

))}

{/* 房间描述 */}

房间描述

{roomDetails.description}

{/* 设施 */}

设施与服务

{roomDetails.amenities.map((amenity, index) => (

{amenity.name}

))}

{/* 评价 */}

用户评价

查看全部 {roomDetails.reviews} 条评价

{Array(4) .fill(null) .map((_, index) => (

用户{index + 1}

2023年10月

{Array(5) .fill(null) .map((_, i) => ( ))}

房间很干净，设施齐全，位置很好，周边的环境也不错，非常推荐入住。

))}

{/* 位置 */}

位置

地图将在这里显示

确切地址会在预订确认后提供。

{/* 预订卡片 */}

¥{roomDetails.price}

每晚

日历详情

¥{roomDetails.price} x 2晚 ¥{roomDetails.price * 2}

清洁费 ¥100

服务费 ¥50

总计 ¥{roomDetails.price * 2 + 150}

您暂不会被收费，预订确认后才会扣款

) } [V0_FILE]typescriptreact:file="app/profile/page.tsx" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Header } from "@/components/header" import { Footer } from "@/components/footer" import { Heart, Package, Settings, Star, Tag, User } from "lucide-react" export default function ProfilePage() { const [userData, setUserData] = useState({ name: "张三", phone: "13800138000", email: "zhangsan@example.com", avatar: "/placeholder.svg", points: 320, }) return (

{/* 侧边栏 */} {/* 主要内容区 */}

个人信息查看和编辑您的个人信息

{userData.name.slice(0, 2)}

{userData.name}

更新您的头像和个人信息

用户名

手机号

邮箱

我的订单查看您的所有订单全部待支付已完成已取消 {[1, 2, 3].map((order) => (

豪华海景套房

已完成

订单号: ORD12345678{order}

入住: 2023-10-0{order} 至 2023-10-0{order + 2}

))}

暂无待支付订单

暂无已完成订单

暂无已取消订单

我的收藏查看您收藏的房间

{[1, 2, 3].map((item) => (

日式简约民宿 {item}

苏州·姑苏区

¥428/晚

))}

我的优惠券查看和兑换优惠券

我的积分: {userData.points}

通过分享房间和完成订单可获取更多积分

{[1, 2].map((coupon) => (

¥{coupon * 50}元优惠券

满{coupon * 200}元可用

有效期至: 2023-12-31

))}

账户设置管理您的账户和安全设置

修改密码

当前密码

新密码

确认新密码

账户安全

绑定手机

{userData.phone}

绑定邮箱

{userData.email}

) } [V0_FILE]typescriptreact:file="app/coupons/page.tsx" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Header } from "@/components/header" import { Footer } from "@/components/footer" import { Coins, Tag } from "lucide-react" // 模拟优惠券数据 const availableCoupons = [ { id: 1, amount: 50, minAmount: 200, points: 100, validUntil: "2023-12-31" }, { id: 2, amount: 100, minAmount: 400, points: 200, validUntil: "2023-12-31" }, { id: 3, amount: 150, minAmount: 600, points: 300, validUntil: "2023-12-31" }, { id: 4, amount: 200, minAmount: 800, points: 400, validUntil: "2023-12-31" }, { id: 5, amount: 300, minAmount: 1000, points: 500, validUntil: "2023-12-31" }, ] // 模拟用户数据 const user = { points: 320, } export default function CouponsPage() { return (

优惠券中心

用积分兑换优惠券，在订单支付时使用

可兑换的优惠券使用积分兑换以下优惠券

{availableCoupons.map((coupon) => (

¥{coupon.amount}元优惠券

满{coupon.minAmount}元可用

有效期至: {coupon.validUntil}

{coupon.points}积分

))}

我的积分查看和使用您的积分

{user.points}

如何获取积分？

1
分享房间：每次分享获得10积分
2
完成订单：消费金额的1%转为积分
3
评价订单：每次评价获得20积分

我的优惠券可用已使用

¥50元优惠券

满200元可用

有效期至: 2023-12-31

暂无已使用的优惠券

) } [V0_FILE]typescriptreact:file="app/map/page.tsx" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Header } from "@/components/header" import { Footer } from "@/components/footer" import { MapPin, Navigation, Search, Star } from "lucide-react" export default function MapPage() { return (

房间位置

查看各民宿位置，了解周边环境和交通情况

搜索位置

附近民宿

{[1, 2, 3, 4, 5].map((item) => (

豪华海景套房 {item}

4.9 ({item * 10}条评价)

距离您{item * 0.5}公里

¥{item * 100 + 98}

))}

地图卫星

地图将在这里显示

(在实际应用中将集成地图服务，如高德地图、百度地图等)

卫星图将在这里显示

(在实际应用中将集成地图服务，如高德地图、百度地图等)

) } [V0_FILE]typescriptreact:file="app/map/loading.tsx" isFixed="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="lib/tailwind.config.js" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx,vue}", "./components/**/*.{ts,tsx,vue}", "./app/**/*.{ts,tsx,vue}", "./src/**/*.{ts,tsx,vue}", ], theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, // 酒店预订网站特定颜色 hotel: { 50: "hsl(var(--hotel-50))", 100: "hsl(var(--hotel-100))", 200: "hsl(var(--hotel-200))", 300: "hsl(var(--hotel-300))", 400: "hsl(var(--hotel-400))", 500: "hsl(var(--hotel-500))", 600: "hsl(var(--hotel-600))", 700: "hsl(var(--hotel-700))", 800: "hsl(var(--hotel-800))", 900: "hsl(var(--hotel-900))", 950: "hsl(var(--hotel-950))", }, }, borderRadius: { lg: "var(--radius-lg)", md: "var(--radius-md)", sm: "var(--radius-sm)", }, boxShadow: { "hotel-sm": "var(--shadow-hotel-sm)", "hotel-md": "var(--shadow-hotel-md)", "hotel-lg": "var(--shadow-hotel-lg)", }, keyframes: { "accordion-down": { from: { height: 0 }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: 0 }, }, "fade-in": { from: { opacity: 0 }, to: { opacity: 1 }, }, "fade-out": { from: { opacity: 1 }, to: { opacity: 0 }, }, "slide-in-right": { from: { transform: "translateX(100%)" }, to: { transform: "translateX(0)" }, }, "slide-out-right": { from: { transform: "translateX(0)" }, to: { transform: "translateX(100%)" }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", "fade-in": "fade-in 0.3s ease-out", "fade-out": "fade-out 0.3s ease-out", "slide-in-right": "slide-in-right 0.3s ease-out", "slide-out-right": "slide-out-right 0.3s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } [V0_FILE]typescriptreact:file="lib/globals.css" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { /* 基础颜色 */ --background: 0 0% 100%; --foreground: 142 10% 15%; /* 卡片 */ --card: 0 0% 100%; --card-foreground: 142 10% 15%; /* 弹出层 */ --popover: 0 0% 100%; --popover-foreground: 142 10% 15%; /* 主色调 - 绿色 */ --primary: 142 70% 35%; --primary-foreground: 0 0% 100%; /* 次要色调 */ --secondary: 142 20% 95%; --secondary-foreground: 142 50% 25%; /* 静音色调 */ --muted: 142 10% 95%; --muted-foreground: 142 5% 45%; /* 强调色 */ --accent: 142 30% 92%; --accent-foreground: 142 60% 25%; /* 危险色 */ --destructive: 0 84% 60%; --destructive-foreground: 0 0% 100%; /* 边框和输入框 */ --border: 142 10% 90%; --input: 142 10% 90%; --ring: 142 70% 35%; /* 酒店预订网站特定颜色 - 绿色系列 */ --hotel-50: 142 80% 97%; --hotel-100: 142 75% 94%; --hotel-200: 142 70% 87%; --hotel-300: 142 65% 75%; --hotel-400: 142 60% 60%; --hotel-500: 142 55% 45%; --hotel-600: 142 60% 35%; --hotel-700: 142 65% 25%; --hotel-800: 142 70% 20%; --hotel-900: 142 75% 15%; --hotel-950: 142 80% 10%; /* 圆角 */ --radius-sm: 0.3rem; --radius-md: 0.5rem; --radius-lg: 0.8rem; /* 阴影 */ --shadow-hotel-sm: 0 2px 8px rgba(0, 0, 0, 0.05); --shadow-hotel-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-hotel-lg: 0 8px 24px rgba(0, 0, 0, 0.12); } .dark { /* 基础颜色 */ --background: 142 25% 10%; --foreground: 142 5% 95%; /* 卡片 */ --card: 142 30% 12%; --card-foreground: 142 5% 95%; /* 弹出层 */ --popover: 142 35% 12%; --popover-foreground: 142 5% 95%; /* 主色调 - 绿色 */ --primary: 142 60% 40%; --primary-foreground: 0 0% 100%; /* 次要色调 */ --secondary: 142 20% 20%; --secondary-foreground: 142 5% 95%; /* 静音色调 */ --muted: 142 15% 18%; --muted-foreground: 142 5% 65%; /* 强调色 */ --accent: 142 25% 25%; --accent-foreground: 142 5% 95%; /* 危险色 */ --destructive: 0 70% 50%; --destructive-foreground: 0 0% 100%; /* 边框和输入框 */ --border: 142 15% 25%; --input: 142 15% 25%; --ring: 142 60% 40%; /* 酒店预订网站特定颜色 - 绿色系列 (暗色模式) */ --hotel-50: 142 20% 20%; --hotel-100: 142 25% 25%; --hotel-200: 142 30% 30%; --hotel-300: 142 35% 35%; --hotel-400: 142 40% 40%; --hotel-500: 142 45% 45%; --hotel-600: 142 50% 50%; --hotel-700: 142 55% 55%; --hotel-800: 142 60% 60%; --hotel-900: 142 65% 65%; --hotel-950: 142 70% 70%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; font-feature-settings: "rlig" 1, "calt" 1; } /* 自定义滚动条 */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: hsl(var(--muted)); border-radius: 4px; } ::-webkit-scrollbar-thumb { background: hsl(var(--hotel-300)); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: hsl(var(--hotel-400)); } } /* 自定义组件样式 */ @layer components { /* 酒店卡片悬停效果 */ .hotel-card-hover { @apply transition-all duration-300 hover:-translate-y-1; &:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); } } /* 渐变背景 */ .hotel-gradient-bg { @apply bg-gradient-to-r from-hotel-50 to-hotel-100; } /* 主按钮样式 */ .hotel-btn-primary { @apply bg-primary text-primary-foreground hover:bg-hotel-700 transition-colors; } /* 次要按钮样式 */ .hotel-btn-secondary { @apply bg-secondary text-secondary-foreground hover:bg-hotel-200 transition-colors; } /* 标题样式 */ .hotel-heading { @apply text-hotel-800 font-bold; } /* 价格标签 */ .hotel-price-tag { @apply text-hotel-700 font-bold; } } /* 动画效果 */ @layer utilities { .animate-hover-lift { @apply transition-transform duration-300 hover:-translate-y-1; } .animate-hover-scale { @apply transition-transform duration-300 hover:scale-105; } .animate-hover-shadow { transition: box-shadow 0.3s ease; &:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); } } } [V0_FILE]typescriptreact:file="app/favorites/page.tsx" import Link from "next/link" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Header } from "@/components/header" import { Footer } from "@/components/footer" import { Heart, MapPin, Star } from "lucide-react" // 模拟收藏数据 const favorites = [ { id: 1, title: "豪华海景套房", description: "享受壮丽的海景和豪华的设施，为您的假期增添难忘的体验。", price: 698, rating: 4.9, image: "/placeholder.svg?height=400&width=600", location: "三亚·海棠湾", date: "2023-10-15", }, { id: 2, title: "现代都市公寓", description: "位于市中心的现代化公寓，紧邻购物和娱乐区。", price: 458, rating: 4.7, image: "/placeholder.svg?height=400&width=600", location: "上海·静安区", date: "2023-10-10", }, { id: 3, title: "古典庭院民宿", description: "体验传统文化与现代便利设施完美结合的庭院式民宿。", price: 528, rating: 4.8, image: "/placeholder.svg?height=400&width=600", location: "丽江·古城区", date: "2023-09-28", }, { id: 4, title: "山景度假别墅", description: "被青山环绕的度假别墅，享受宁静的自然环境和舒适的住宿体验。", price: 888, rating: 4.9, image: "/placeholder.svg?height=400&width=600", location: "杭州·西湖区", date: "2023-09-20", }, { id: 5, title: "日式简约民宿", description: "简约日式风格，提供安静舒适的住宿环境，适合休闲度假。", price: 428, rating: 4.7, image: "/placeholder.svg?height=400&width=600", location: "苏州·姑苏区", date: "2023-09-15", }, ] export default function FavoritesPage() { return (

我的收藏

管理您收藏的房间，随时查看并预订

共 {favorites.length} 个收藏

网格视图列表视图

{favorites.length > 0 ? (

{favorites.map((room) => (

{room.title}

{room.rating}

{room.location}

{room.description}

¥{room.price} /晚

))}

) : (

暂无收藏

浏览房间并添加到您的收藏夹

)} {favorites.length > 0 ? (

{favorites.map((room) => (

{room.title}

{room.rating}

{room.location}

{room.description}

收藏于: {room.date}

¥{room.price}/晚

))}

) : (

暂无收藏

浏览房间并添加到您的收藏夹

)}

) } [V0_FILE]typescriptreact:file="app/favorites/loading.tsx" isFixed="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/orders/page.tsx" import Link from "next/link" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Badge } from "@/components/ui/badge" import { Header } from "@/components/header" import { Footer } from "@/components/footer" import { Calendar, ChevronRight, Clock, Download, MapPin, Star, Trash2 } from "lucide-react" // 模拟订单数据 const orders = [ { id: "ORD20231001", roomTitle: "豪华海景套房", roomImage: "/placeholder.svg?height=400&width=600", location: "三亚·海棠湾", checkIn: "2023-10-15", checkOut: "2023-10-18", price: 698, totalPrice: 2094, status: "completed", createTime: "2023-09-30 14:30", payTime: "2023-09-30 14:35", isRated: true, rating: 5, comment: "房间很干净，设施齐全，服务也很好，风景绝佳，下次还会选择这里。", }, { id: "ORD20230925", roomTitle: "现代都市公寓", roomImage: "/placeholder.svg?height=400&width=600", location: "上海·静安区", checkIn: "2023-10-05", checkOut: "2023-10-07", price: 458, totalPrice: 916, status: "completed", createTime: "2023-09-25 10:15", payTime: "2023-09-25 10:20", isRated: false, }, { id: "ORD20231010", roomTitle: "古典庭院民宿", roomImage: "/placeholder.svg?height=400&width=600", location: "丽江·古城区", checkIn: "2023-10-25", checkOut: "2023-10-28", price: 528, totalPrice: 1584, status: "paid", createTime: "2023-10-10 16:45", payTime: "2023-10-10 16:50", }, { id: "ORD20231012", roomTitle: "山景度假别墅", roomImage: "/placeholder.svg?height=400&width=600", location: "杭州·西湖区", checkIn: "2023-11-05", checkOut: "2023-11-08", price: 888, totalPrice: 2664, status: "pending", createTime: "2023-10-12 09:20", }, { id: "ORD20230918", roomTitle: "日式简约民宿", roomImage: "/placeholder.svg?height=400&width=600", location: "苏州·姑苏区", checkIn: "2023-09-20", checkOut: "2023-09-22", price: 428, totalPrice: 856, status: "canceled", createTime: "2023-09-18 11:30", cancelTime: "2023-09-18 15:45", }, ] // 状态映射 const statusMap = { pending: { label: "待支付", color: "bg-yellow-100 text-yellow-800" }, paid: { label: "已支付", color: "bg-blue-100 text-blue-800" }, completed: { label: "已完成", color: "bg-green-100 text-green-800" }, canceled: { label: "已取消", color: "bg-gray-100 text-gray-800" }, } export default function OrdersPage() { return (

我的订单

查看和管理您的所有订单

全部订单待支付已支付已完成已取消 {orders.length > 0 ? ( orders.map((order) => ) ) : ( )} {orders.filter((order) => order.status === "pending").length > 0 ? ( orders .filter((order) => order.status === "pending") .map((order) => ) ) : ( )} {orders.filter((order) => order.status === "paid").length > 0 ? ( orders .filter((order) => order.status === "paid") .map((order) => ) ) : ( )} {orders.filter((order) => order.status === "completed").length > 0 ? ( orders .filter((order) => order.status === "completed") .map((order) => ) ) : ( )} {orders.filter((order) => order.status === "canceled").length > 0 ? ( orders .filter((order) => order.status === "canceled") .map((order) => ) ) : ( )}

) } function OrderCard({ order }) { return (

{order.id} {statusMap[order.status].label}

下单时间: {order.createTime}

{order.status === "pending" && ( )} {order.status === "completed" && !order.isRated && ( )} {order.status === "pending" && ( )}

{order.roomTitle}

{order.location}

{order.checkIn} 至 {order.checkOut}

共 {(new Date(order.checkOut) - new Date(order.checkIn)) / (1000 * 60 * 60 * 24)} 晚

房间单价

¥{order.price}/晚

订单总价

¥{order.totalPrice}

{order.isRated && (

我的评价

{Array(5) .fill(null) .map((_, i) => ( ))}

{order.comment}

)} {order.status === "completed" && (

)}

) } function EmptyOrderState({ status }) { const messages = { pending: "暂无待支付订单", paid: "暂无已支付订单", completed: "暂无已完成订单", canceled: "暂无已取消订单", default: "暂无订单", } const message = status ? messages[status] : messages.default return (

{message}

浏览房间并创建新的订单

) } [V0_FILE]typescriptreact:file="app/orders/loading.tsx" isFixed="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/orders/[id]/page.tsx" import Link from "next/link" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Separator } from "@/components/ui/separator" import { Header } from "@/components/header" import { Footer } from "@/components/footer" import { ArrowLeft, Calendar, Clock, Download, MapPin, Star } from "lucide-react" export default function OrderDetailPage({ params }: { params: { id: string } }) { // 模拟订单详情数据 const order = { id: params.id, roomTitle: "豪华海景套房", roomImage: "/placeholder.svg?height=400&width=600", location: "三亚·海棠湾", checkIn: "2023-10-15", checkOut: "2023-10-18", price: 698, totalPrice: 2094, status: "completed", createTime: "2023-09-30 14:30", payTime: "2023-09-30 14:35", isRated: true, rating: 5, comment: "房间很干净，设施齐全，服务也很好，风景绝佳，下次还会选择这里。", roomDetails: { area: "45平方米", bedType: "大床 2m×2m", maxGuests: 2, breakfast: "含双早", wifi: true, smoking: false, }, contactInfo: { name: "张三", phone: "138****8888", email: "zhang***@example.com", }, paymentInfo: { method: "微信支付", transactionId: "WX20230930143512345", coupon: "满200减50", couponAmount: 50, originalPrice: 2144, }, } // 状态映射 const statusMap = { pending: { label: "待支付", color: "bg-yellow-100 text-yellow-800" }, paid: { label: "已支付", color: "bg-blue-100 text-blue-800" }, completed: { label: "已完成", color: "bg-green-100 text-green-800" }, canceled: { label: "已取消", color: "bg-gray-100 text-gray-800" }, } return (

返回订单列表

订单详情

{statusMap[order.status].label}

订单号: {order.id}

{order.status === "completed" && ( )}

{/* 房间信息 */} 房间信息

{order.roomTitle}

{order.location}

{order.checkIn} 至 {order.checkOut}

共 {(new Date(order.checkOut) - new Date(order.checkIn)) / (1000 * 60 * 60 * 24)} 晚

房间面积: {order.roomDetails.area}

床型: {order.roomDetails.bedType}

最多入住: {order.roomDetails.maxGuests}人

早餐: {order.roomDetails.breakfast}

{/* 订单时间线 */} 订单状态

订单创建

{order.createTime}

订单支付

{order.payTime}

支付方式: {order.paymentInfo.method}

交易号: {order.paymentInfo.transactionId}

入住完成

{order.checkOut}

{/* 评价信息 */} {order.isRated && ( 我的评价

{Array(5) .fill(null) .map((_, i) => ( ))}

评分: {order.rating}/5

{order.comment}

)}

{/* 价格详情 */} 价格详情

房费 ¥{order.price} × {(new Date(order.checkOut) - new Date(order.checkIn)) / (1000 * 60 * 60 * 24)} 晚

{order.paymentInfo.coupon && (

优惠券 -¥{order.paymentInfo.couponAmount}

)}

清洁费 ¥50

服务费 ¥ {order.paymentInfo.originalPrice - order.price * ((new Date(order.checkOut) - new Date(order.checkIn)) / (1000 * 60 * 60 * 24)) - 50}

原价总计 ¥{order.paymentInfo.originalPrice}

{order.paymentInfo.coupon && (

优惠后总价 ¥{order.totalPrice}

)}

{/* 联系信息 */} 联系信息

姓名 {order.contactInfo.name}

手机号 {order.contactInfo.phone}

邮箱 {order.contactInfo.email}

{/* 帮助与支持 */} 帮助与支持

) } [V0_FILE]typescriptreact:file="components/ui/button.tsx" import * as React from "react" import { Slot } from "@radix-ui/react-slot" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const buttonVariants = cva( "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", { variants: { variant: { default: "bg-primary text-primary-foreground hover:bg-primary/90", destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90", outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground", secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80", ghost: "hover:bg-accent hover:text-accent-foreground", link: "text-primary underline-offset-4 hover:underline", // 新增酒店主题特定按钮样式 hotel: "bg-hotel-600 text-white hover:bg-hotel-700 shadow-sm", "hotel-outline": "border border-hotel-300 text-hotel-700 bg-white hover:bg-hotel-50", "hotel-ghost": "text-hotel-700 hover:bg-hotel-50", "hotel-link": "text-hotel-600 underline-offset-4 hover:underline", }, size: { default: "h-10 px-4 py-2", sm: "h-9 rounded-md px-3", lg: "h-11 rounded-md px-8", icon: "h-10 w-10", // 新增酒店主题特定按钮尺寸 "hotel-sm": "h-8 text-xs rounded-md px-3", "hotel-lg": "h-12 text-base rounded-md px-8", }, }, defaultVariants: { variant: "default", size: "default", }, }, ) export interface ButtonProps extends React.ButtonHTMLAttributes, VariantProps { asChild?: boolean } const Button = React.forwardRef( ({ className, variant, size, asChild = false, ...props }, ref) => { const Comp = asChild ? Slot : "button" return }, ) Button.displayName = "Button" export { Button, buttonVariants } [V0_FILE]typescriptreact:file="components/ui/card.tsx" import * as React from "react" import { cn } from "@/lib/utils" const Card = React.forwardRef< HTMLDivElement, React.HTMLAttributes & { variant?: "default" | "hotel" | "hotel-accent" } >(({ className, variant = "default", ...props }, ref) => { const variantClasses = { default: "bg-card text-card-foreground", hotel: "bg-white border-hotel-100 shadow-hotel-sm", "hotel-accent": "bg-gradient-to-r from-hotel-50 to-hotel-100 border-hotel-200", } return

}) Card.displayName = "Card" const CardHeader = React.forwardRef>( ({ className, ...props }, ref) => (

), ) CardHeader.displayName = "CardHeader" const CardTitle = React.forwardRef>( ({ className, ...props }, ref) => (

), ) CardTitle.displayName = "CardTitle" const CardDescription = React.forwardRef>( ({ className, ...props }, ref) => (
), ) CardDescription.displayName = "CardDescription" const CardContent = React.forwardRef>( ({ className, ...props }, ref) =>
, ) CardContent.displayName = "CardContent" const CardFooter = React.forwardRef>( ({ className, ...props }, ref) => (
), ) CardFooter.displayName = "CardFooter" export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent } [V0_FILE]typescriptreact:file="components/ui/badge.tsx" import type * as React from "react" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const badgeVariants = cva( "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", { variants: { variant: { default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80", secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80", destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80", outline: "text-foreground", // 酒店主题特定徽章样式 "hotel-success": "border-transparent bg-hotel-100 text-hotel-800 hover:bg-hotel-200", "hotel-pending": "border-transparent bg-yellow-100 text-yellow-800 hover:bg-yellow-200", "hotel-info": "border-transparent bg-blue-100 text-blue-800 hover:bg-blue-200", "hotel-danger": "border-transparent bg-red-100 text-red-800 hover:bg-red-200", "hotel-outline": "border-hotel-300 text-hotel-700 hover:bg-hotel-50", }, }, defaultVariants: { variant: "default", }, }, ) export interface BadgeProps extends React.HTMLAttributes, VariantProps {} function Badge({ className, variant, ...props }: BadgeProps) { return
} export { Badge, badgeVariants } [V0_FILE]typescriptreact:file="components/theme-provider.tsx" "use client" import { ThemeProvider as NextThemesProvider } from "next-themes" import type { ThemeProviderProps } from "next-themes" export function ThemeProvider({ children, ...props }: ThemeProviderProps) { return {children} } [V0_FILE]typescriptreact:file="components/theme-toggle.tsx" "use client" import { Moon, Sun } from "lucide-react" import { useTheme } from "next-themes" import { Button } from "@/components/ui/button" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" export function ThemeToggle() { const { setTheme } = useTheme() return ( setTheme("light")}>浅色 setTheme("dark")}>深色 setTheme("system")}>系统 ) } [V0_FILE]typescriptreact:file="app/layout.tsx" import type React from "react" import { Mona_Sans as FontSans } from "next/font/google" import { cn } from "@/lib/utils" import "@/lib/globals.css" import { ThemeProvider } from "@/components/theme-provider" const fontSans = FontSans({ subsets: ["latin"], variable: "--font-sans", }) export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) }

{title}

{room.title}

{userData.name}

豪华海景套房

日式简约民宿 {item}

¥{coupon * 50}元优惠券

修改密码

账户安全

¥{coupon.amount}元优惠券

如何获取积分？

¥50元优惠券

热门城市

附近民宿

豪华海景套房 {item}

{room.title}

{room.title}

{order.roomTitle}

我的评价

{message}

{order.roomTitle}

订单创建

订单支付

入住完成

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This