From bc5dcef26dcadeffffd5bd82139eec8a686ebb63 Mon Sep 17 00:00:00 2001 From: py3m9oq7i <1345562447@qq.com> Date: Fri, 11 Oct 2024 08:25:53 +0800 Subject: [PATCH] ADD file via upload --- 首页.tsx | 764 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 764 insertions(+) create mode 100644 首页.tsx diff --git a/首页.tsx b/首页.tsx new file mode 100644 index 0000000..595dd67 --- /dev/null +++ b/首页.tsx @@ -0,0 +1,764 @@ +'use client' + +import React, { useState, useEffect } from 'react' +import { Search, User, MapPin, Calendar, Gift, Heart, MessageCircle, Share2, Bell, Settings, TrendingUp, Users, Compass, Camera, Menu, ChevronDown, Loader2, DollarSign, Mail, Phone, Globe, Instagram, Cake, Briefcase, Languages, Plane, X, Link } from 'lucide-react' +import { Button } from "@/components/ui/button" +import { Input } from "@/components/ui/input" +import { Card, CardContent, CardFooter, CardHeader } from "@/components/ui/card" +import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" +import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" +import { Badge } from "@/components/ui/badge" +import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog" +import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" +import { Progress } from "@/components/ui/progress" +import { Textarea } from "@/components/ui/textarea" +import { User as UserType } from '@/lib/userDatabase' +import { userDatabase } from '@/lib/userDatabase' +import { CarouselSection } from '@/components/CarouselSection' +import { calculateSimilarity } from '@/lib/matchingAlgorithm'; + +import { 个人资料 } from '@/components/个人资料' + + +export function 首页() { + // 定义一个渐变背景样式 + const gradientBackground = ` + // 从左上角到右下角的渐变,颜色从浅靛蓝过渡到浅紫,最后到浅粉 + bg-gradient-to-br from-indigo-200 via-purple-200 to-pink-200 + // 从右下角到左上角的渐变,颜色从浅黄过渡到浅红,最后到浅粉 + // bg-blend-overlay 使这个渐变与前一个渐变混合 + bg-gradient-to-tl from-yellow-100 via-red-100 to-pink-100 bg-blend-overlay + // 将背景不透明度设置为50%,使其半透明 + bg-opacity-50 + // 应用一个动画效果,可能是使渐变在水平方向上移动 + animate-gradient-x + // 确保背景至少占满整个屏幕高度 + min-h-screen + // 设置文本颜色为深灰色 + text-gray-800 +`; + const [目的地, set目的地] = useState('') + const [出行日期, set出行日期] = useState('') + const [预算, set预算] = useState('') + const [isMatching, setIsMatching] = useState(false) + const [matchResult, setMatchResult] = useState(null) + const [matchingProgress, setMatchingProgress] = useState(0) + const [users, setUsers] = useState([]) + const [selectedEvent, setSelectedEvent] = useState(null) + const [selectedInspirationIndex, setSelectedInspirationIndex] = useState(null) + const [showProfile, setShowProfile] = useState(false) + + const [posts, setPosts] = useState([ + { + id: 1, + user: '小明', + avatar: 'https://images.unsplash.com/photo-1599566150163-29194dcaad36?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80', + location: '巴黎', + image: 'https://images.unsplash.com/photo-1499856871958-5b9627545d1a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80', + content: '巴黎的魅力无处不在！从埃菲尔铁塔到卢浮宫，每一步都是艺术的洗礼。分享我在这座浪漫之都的精彩瞬间！ #巴黎梦 #艺术之旅', + likes: 328, + comments: [], + isLiked: false + }, + { + id: 2, + user: '小红', + avatar: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80', + location: '东京', + image: 'https://images.unsplash.com/photo-1503899036084-c55cdd92da26?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80', + content: '东京，一座永不入睡的城市！从繁华的涉谷到宁静的浅草寺，感受这里的无限活力。分享我在东京的精彩旅程！ #东京探险 #日本文化', + likes: 256, + comments: [], + isLiked: false + }, + { + id: 3, + user: '小李', + avatar: 'https://images.unsplash.com/photo-1552058544-f2b08422138a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80', + location: '纽约', + image: 'https://images.unsplash.com/photo-1496442226666-8d4d0e62e6e9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80', + content: '纽约，梦想之城！从中央公园到百老汇，每一刻都充满可能。在这里，平凡人也能创造非凡故事。分享我的纽约冒险！ #纽约生活 #追梦人生', + likes: 412, + comments: [], + isLiked: false + }, + { + id: 4, + user: '小张', + avatar: 'https://images.unsplash.com/photo-1554151228-14d9def656e4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80', + location: '伦敦', + image: 'https://images.unsplash.com/photo-1513635269975-59663e0ac1ad?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80', + content: '伦敦，历史与现代的完美融合！从大本钟到泰特现代美术馆，每一步都是文化的碰撞。分享我在伦敦的奇妙时光！ #伦敦印象 #英伦风情', + likes: 189, + comments: [], + isLiked: false + }, + { + id: 5, + user: '小王', + avatar: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80', + location: '悉尼', + image: 'https://images.unsplash.com/photo-1506973035872-a4ec16b8e8d9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80', + content: '悉尼，阳光与海滩的天堂！从歌剧院到邦迪海滩，处处洋溢着欢乐。分享我在这里的阳光假期！ #悉尼生活 #澳洲之美', + likes: 275, + comments: [], + isLiked: false + }, + { + id: 6, + user: '小陈', + avatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80', + location: '罗马', + image: 'https://images.unsplash.com/photo-1552832230-c0197dd311b5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80', + content: '罗马，永恒之城！从斗兽场到梵蒂冈，每一处都是历史的见证。分享我在这座古城的深度探索！ #罗马假日 #意大利风情', + likes: 301, + comments: [], + isLiked: false + }, + { + id: 7, + user: '小林', + avatar: 'https://images.unsplash.com/photo-1547425260-76bcadfb4f2c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80', + location: '巴塞罗那', + image: 'https://images.unsplash.com/photo-1583422409516-2895a77efded?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80', + content: '巴塞罗那，一座充满激情的城市！高迪的建筑让人惊叹，地中海的阳光温暖人心。分享我在这里的精彩冒险！ #巴塞罗那风情 #建筑奇迹', + likes: 233, + comments: [], + isLiked: false + }, + ]) +// 创建一个状态来存储新评论 +const [newComment, setNewComment] = useState('') + +// 组件挂载时,从userDatabase加载用户数据 +useEffect(() => { + setUsers(userDatabase); +}, []); + +// 处理盲盒匹配的函数 +const 处理盲盒匹配 = () => { + console.log('开始盲盒匹配'); + // 设置匹配状态为true,开始匹配进度为0 + setIsMatching(true); + setMatchingProgress(0); + + // 创建一个定时器,每200毫秒增加10%的进度,直到100% + const intervalId = setInterval(() => { + setMatchingProgress(prev => { + if (prev >= 100) { + clearInterval(intervalId); + return 100; + } + return prev + 10; + }); + }, 200); + + // 2秒后执行实际的匹配逻辑 + setTimeout(() => { + // 构造当前用户对象 + const currentUser = { + budget: Number(预算), + destination: 目的地, + travelDate: new Date(出行日期), + interests: ['旅行', '摄影', '美食'], // 这里应该从用户资料中获取 + }; + console.log('当前用户:', currentUser); + + // 对所有用户进行匹配计算 + const matchedUsers = users.map(user => { + const matchUser = { + ...user, + budget: Number(user.budget), + destination: user.location, + travelDate: new Date(user.travelDate), + interests: user.interests || [] + }; + console.log('匹配用户:', matchUser); + // 计算相似度 + const similarity = calculateSimilarity(currentUser, matchUser); + console.log('相似度分数:', similarity); + return { ...user, similarity }; + }).sort((a, b) => b.similarity - a.similarity); // 按相似度降序排序 + + console.log('匹配结果:', matchedUsers); + + // 设置匹配结果 + if (matchedUsers.length > 0) { + setMatchResult(matchedUsers[0]); + } else { + setMatchResult(null); + } + + // 结束匹配过程 + setIsMatching(false); + clearInterval(intervalId); + setMatchingProgress(100); + }, 2000); +}; + +// 处理点赞功能的函数 +const handleLike = (postId: number) => { + setPosts(posts.map(post => { + if (post.id === postId) { + return { + ...post, + // 如果已经点赞,则减少点赞数;否则增加点赞数 + likes: post.isLiked ? post.likes - 1 : post.likes + 1, + // 切换点赞状态 + isLiked: !post.isLiked + } + } + return post + })) +} + +// 处理评论功能的函数 +const handleComment = (postId: number) => { + // 检查新评论是否为空(去掉首尾空格后) + if (newComment.trim()) { + // 更新帖子列表 + setPosts(posts.map(post => { + // 找到要评论的帖子 + if (post.id === postId) { + return { + ...post, + // 将新评论添加到评论列表中 + comments: [...post.comments, newComment] + } + } + // 其他帖子保持不变 + return post + })) + // 清空评论输入框 + setNewComment('') + } +} + +// 处理分享功能的函数 +const handleShare = (postId: number) => { + // 构造帖子的URL + const url = `https://yourtravelwebsite.com/post/${postId}` + // 将URL复制到剪贴板 + navigator.clipboard.writeText(url).then(() => { + // 复制成功后显示提示 + alert('链接已复制到剪贴板！') + }) +} + + const events = [ + { + title: '徒步长城', + description: '体验中国最著名的古代建筑，欣赏壮丽的风景，结识志同道合的徒步爱好者。', + date: '2023年10月15日', + duration: '1天', + difficulty: '中等', + included: ['专业导游', '午餐', '往返交通'], + image: 'https://images.unsplash.com/photo-1508804185872-d7badad00f7d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80' + }, + { + title: '樱花季摄影', + description: '在美丽的樱花季节，和其他摄影爱好者一起捕捉最美的樱花景象，提升您的摄影技巧。', + date: '2024年3月20日', + duration: '半天', + difficulty: '简单', + included: ['摄影指导', '下午茶', '照片后期工作坊'], + image: 'https://images.unsplash.com/photo-1522383225653-ed111181a951?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2076&q=80' + }, + { + title: '威尼斯狂欢节', + description: '参加世界闻名的威尼斯狂欢节，体验独特的面具文化和浪漫的水城氛围。', + date: '2024年2月10日', + duration: '3天', + difficulty: '简单', + included: ['面具工作坊', '狂欢节游行门票', '威尼斯特色美食品尝'], + image: 'https://images.unsplash.com/photo-1518730518541-d0f4ea9dfab9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80' + }, + { + title: '亚马逊丛林探险', + description: '深入世界最大的热带雨林，探索丰富的生物多样性，体验原始部落文化。', + date: '2023年11月5日', + duration: '5天', + difficulty: '高', + included: ['专业向导', '丛林住宿', '野生动物观察', '部落文化体验'], + image: 'https://images.unsplash.com/photo-1516426122078-c23e76319801?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80' + }, + { + title: '北极光观测之旅', + description: '前往芬兰拉普兰，在极地玻璃屋中观赏神奇的北极光，体验独特的萨米文化。', + date: '2024年1月15日', + duration: '4天', + difficulty: '中等', + included: ['极光观测', '哈士奇雪橇', '冰钓体验', '萨米文化之夜'], + image: 'https://images.unsplash.com/photo-1531366936337-7c912a4589a7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80' + }, + { + title: '日本寿司制作课程', + description: '在东京学习正宗的寿司制作技巧，深入了解日本饮食文化，品尝自己亲手制作的寿司。', + date: '2023年9月25日', + duration: '1天', + difficulty: '中等', + included: ['专业寿司师指导', '所有食材和工具', '寿司午餐', '参观筑地市场'], + image: 'https://images.unsplash.com/photo-1553621042-f6e147245754?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80' + }, + { + title: '马丘比丘徒步之旅', + description: '沿着古老的印加小道徒步，探索神秘的马丘比丘遗址，感受安第斯山脉的壮美。', + date: '2024年4月10日', + duration: '4天', + difficulty: '高', + included: ['专业向导', '露营装备', '餐食', '马丘比丘门票'], + image: 'https://images.unsplash.com/photo-1526392060635-9d6019884377?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80' + }, + ] + + const inspirations = [ + { + title: '原始森林探索', + description: '深入地球上最古老的原始森林，探索生物多样性的奇迹。在茂密的树冠下徒步，观察珍稀动植物，感受大自然的神奇力量。', + activities: ['丛林徒步', '野生动物观察', '生态摄影', '夜间探险'], + destinations: ['亚马逊雨林', '刚果盆地', '大兴安岭', '婆罗洲'], + image: 'https://images.unsplash.com/photo-1511497584788-876760111969?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1920&q=80' + }, + { + title: '极地冰川探险', + description: '前往地球的极端地带，探索壮观的冰川世界。体验极昼或极夜，观察北极熊和企鹅，感受冰雪世界的震撼美景。', + activities: ['冰川徒步', '北极光观测', '冰上皮划艇', '极地野生动物观察'], + destinations: ['南极半岛', '格陵兰', '斯瓦尔巴群岛', '巴塔哥尼亚冰原'], + image: 'https://images.unsplash.com/photo-1494564605686-2e931f77a8e2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80' + }, + { + title: '火山地质探索', + description: '探索地球上最活跃的火山地带，感受大自然的原始力量。观察独特的火山地貌，体验地热温泉，了解火山对生态系统的影响。', + activities: ['火山徒步', '温泉浸泡', '地质考察', '熔岩洞穴探索'], + destinations: ['夏威夷火山国家公园', '冰岛', '印度尼西亚默拉皮火山', '意大利埃特纳火山'], + image: 'https://images.unsplash.com/photo-1462332420958-a05d1e002413?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80' + }, + { + title: '沙漠探险之旅', + description: '在广袤的沙漠中体验极致的宁静与壮美。欣赏绚丽的日出日落，探索神秘的绿洲，感受沙漠文化的独特魅力。', + activities: ['沙漠徒步', '骆驼骑行', '沙丘冲浪', '星空观测'], + destinations: ['撒哈拉沙漠', '纳米比亚沙漠', '戈壁沙漠', '澳大利亚辛普森沙漠'], + image: 'https://images.unsplash.com/photo-1682686580391-615b1e32be1d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80' + }, + { + title: '海底世界探索', + description: '潜入神秘的海底世界，探索丰富多彩的海洋生态系统。观察五彩斑斓的珊瑚礁，与海洋生物亲密接触，感受海洋的魅力与重要性。', + activities: ['深潜', '浮潜', '珊瑚礁观察', '海洋生物研究'], + destinations: ['大堡礁', '帕劳', '马尔代夫', '加拉帕戈斯群岛'], + image: 'https://images.unsplash.com/photo-1682687982501-1e58ab814714?ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80' + }, + { + title: '高山探险挑战', + description: '挑战世界上最高的山峰，体验登山的刺激与成就感。欣赏壮丽的高山景色，了解高山生态系统，感受大自然的宏伟。', + activities: ['高山攀登', '冰川徒步', '高山摄影', '野外生存训练'], + destinations: ['珠穆朗玛峰', '乞力马扎罗山', '阿空加瓜山', '勃朗峰'], + image: 'https://images.unsplash.com/photo-1464278533981-50106e6176b1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2074&q=80' + }, + { + title: '国家公园探索', + description: '探索世界著名的国家公园，感受大自然的鬼斧神工。观察多样的野生动物，徒步壮丽的山川，体验自然保护的重要性。', + activities: ['野生动物观察', '徒步旅行', '露营', '风景摄影'], + destinations: ['黄石国家公园', '塞伦盖蒂国家公园', '托斯卡纳群岛国家公园', '吉尔吉斯斯坦天山国家公园'], + image: 'https://images.unsplash.com/photo-1472396961693-142e6e269027?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2106&q=80' + } + ] + + return ( +
+
+ {showProfile && <个人资料 onClose={() => setShowProfile(false)} />} +
+
+

旅游交友网

+ +
+
+ + + + + + + + setShowProfile(true)}>个人资料 + 我的行程 + 设置 + 退出登录 + + + +
+
+ +
+ +
+
+ 背景图片 +
+

探索世界，结识好友

+

使用我们的旅行交友盲盒，开启你的下一次冒险！

+
+ set目的地(e.target.value)} + className="bg-white text-black" + icon={} + /> + set出行日期(e.target.value)} + className="bg-white text-black" + icon={} + /> + set预算(e.target.value)} + className="bg-white text-black" + icon={} + /> + + + + + + + 旅行交友盲盒 + + {isMatching ? "正在为你匹配志同道合的旅伴，请稍候..." : "准备好开始新的冒险了吗？"} + + +
+ {isMatching ? ( +
+ + +

正在寻找最佳匹配...

+
+ ) : matchResult ? ( +
+
+ + + {matchResult.name[0]} + +

{matchResult.name}, {matchResult.age}

+

+ + {matchResult.location} +

+

+ + 预算: {matchResult.budget}元 +

+
+ {matchResult.interests.map((interest, index) => ( + {interest} + ))} +
+
+
+
+

个人简介

+

{matchResult.bio}

+

职业与旅行风格

+

+ + {matchResult.occupation} +

+

+ + {matchResult.travelStyle} +

+

语言

+

+ + {matchResult.languages.join(', ')} +

+
+
+

联系方式

+

+ + {matchResult.email} +

+

+ + {matchResult.phone} +

+

+ + {matchResult.socialMedia.instagram} +

+

+ + {matchResult.socialMedia.website} +

+

最近旅行

+
+ {matchResult.recentTrips.map((trip, index) => ( + {trip} + ))} +
+

即将出发

+
+ {matchResult.upcomingTrips.map((trip, index) => ( + {trip} + ))} +
+
+
+
+

旅伴评价

+ {matchResult.reviews.map((review, index) => ( +
+

{review.author} {'★'.repeat(review.rating)}

+

{review.content}

+
+ ))} +
+
+ ) : ( + + )} +
+ {!isMatching && ( + + )} + + +
+
+
+ + ( + + +
+ + + {post.user[0]} + +
+

{post.user}

+

3小时前

+
+
+ + +

{post.content}

+ 旅行照片 +
+ {post.content.split('#').slice(1).map((tag, index) => ( + #{tag.trim()} + ))} +
+ + + + + + + + + + 评论 + +
+ {post.comments.map((comment, index) => ( +
+

{comment}

+
+ ))} +
+
+