265 lines
10 KiB
TypeScript
265 lines
10 KiB
TypeScript
"use client"
|
|
import { useState } from "react"
|
|
import Image from "next/image"
|
|
import Link from "next/link"
|
|
import { ArrowLeft } from "lucide-react"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
|
|
import { robotsByYear } from "@/lib/robot-data"
|
|
|
|
export default function HistoryPage() {
|
|
// 历届队员数据
|
|
const teamMembers = [
|
|
{
|
|
year: "2024-2025",
|
|
captain: "彭戈",
|
|
members: [
|
|
{
|
|
name: "彭戈",
|
|
role: "队长 / 机械组",
|
|
photo: "/placeholder.svg?height=100&width=100",
|
|
destination: "华为 2012 实验室",
|
|
message: "在 Simba Robotics 的经历让我学会了如何将理论知识应用到实际工程中，感谢团队给我的成长机会。",
|
|
},
|
|
{
|
|
name: "陈卓文",
|
|
role: "电控组组长",
|
|
photo: "/placeholder.svg?height=100&width=100",
|
|
destination: "上海交通大学 - 机器人研究所",
|
|
message: "团队合作是最宝贵的财富，希望 Simba Robotics 越来越好！",
|
|
},
|
|
{
|
|
name: "黄瑞",
|
|
role: "视觉组组长",
|
|
photo: "/placeholder.svg?height=100&width=100",
|
|
destination: "腾讯 AI Lab",
|
|
message: "感谢战队给我提供的平台，让我在计算机视觉领域找到了自己的方向。",
|
|
},
|
|
{
|
|
name: "李佳睿",
|
|
role: "宣筹组组长",
|
|
photo: "/placeholder.svg?height=100&width=100",
|
|
destination: "字节跳动 - 产品经理",
|
|
message: "在战队的经历锻炼了我的沟通能力和项目管理能力，这些都是职场中的宝贵财富。",
|
|
},
|
|
{
|
|
name: "韩翔宇",
|
|
role: "视觉工程师",
|
|
photo: "/placeholder.svg?height=100&width=100",
|
|
destination: "清华大学 - 人工智能研究院",
|
|
message: "感谢战队的培养，让我有机会接触前沿技术，为我的学术道路打下基础。",
|
|
},
|
|
{
|
|
name: "闫芃森",
|
|
role: "机械工程师",
|
|
photo: "/placeholder.svg?height=100&width=100",
|
|
destination: "大疆创新 - 机械设计工程师",
|
|
message: "在战队的日日夜夜是我最珍贵的回忆，希望学弟学妹们继续努力！",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
year: "2022-2023",
|
|
captain: "陈志强",
|
|
members: [
|
|
{
|
|
name: "陈志强",
|
|
role: "队长 / 电控组",
|
|
photo: "/placeholder.svg?height=100&width=100",
|
|
destination: "上海微电子装备有限公司",
|
|
message: "战队是我大学时光中最重要的一部分，希望 Simba Robotics 在未来的比赛中取得更好的成绩！",
|
|
},
|
|
{
|
|
name: "林小明",
|
|
role: "机械组组长",
|
|
photo: "/placeholder.svg?height=100&width=100",
|
|
destination: "哈尔滨工业大学 - 机器人研究所",
|
|
message: "感谢战队给我提供的锻炼机会，让我在机械设计方面有了长足的进步。",
|
|
},
|
|
{
|
|
name: "黄海",
|
|
role: "视觉组组长",
|
|
photo: "/placeholder.svg?height=100&width=100",
|
|
destination: "商汤科技 - 计算机视觉工程师",
|
|
message: "在战队的经历是我求职路上的重要资本，感谢团队的每一位成员。",
|
|
},
|
|
{
|
|
name: "张丽",
|
|
role: "宣筹组组长",
|
|
photo: "/placeholder.svg?height=100&width=100",
|
|
destination: "阿里巴巴 - 市场营销",
|
|
message: "战队教会了我如何在有限的资源下实现最大的价值，这是职场中非常重要的能力。",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
year: "2021-2022",
|
|
captain: "王建国",
|
|
members: [
|
|
{
|
|
name: "王建国",
|
|
role: "队长 / 视觉组",
|
|
photo: "/placeholder.svg?height=100&width=100",
|
|
destination: "百度 - 自动驾驶部门",
|
|
message: "创建战队的初衷是为了让更多学生有机会接触机器人技术，看到现在的发展，我感到非常欣慰。",
|
|
},
|
|
{
|
|
name: "李明",
|
|
role: "机械组组长",
|
|
photo: "/placeholder.svg?height=100&width=100",
|
|
destination: "中国科学院 - 自动化研究所",
|
|
message: "希望战队能够继续发扬技术创新的精神，在比赛中取得更好的成绩。",
|
|
},
|
|
{
|
|
name: "张伟",
|
|
role: "电控组组长",
|
|
photo: "/placeholder.svg?height=100&width=100",
|
|
destination: "特斯拉中国 - 电气工程师",
|
|
message: "战队的经历让我明白了团队合作的重要性，这是任何成功项目的基础。",
|
|
},
|
|
],
|
|
},
|
|
]
|
|
|
|
// 使用 useState 来跟踪当前悬停的成员
|
|
const [hoveredMember, setHoveredMember] = useState<number | null>(null)
|
|
|
|
// 成员卡片组件
|
|
const MemberCard = ({ member, index }: { member: any; index: number }) => {
|
|
const isHovered = hoveredMember === index
|
|
|
|
return (
|
|
<div
|
|
className="relative"
|
|
onMouseEnter={() => setHoveredMember(index)}
|
|
onMouseLeave={() => setHoveredMember(null)}
|
|
>
|
|
<div
|
|
className={`border border-white/10 p-4 card-hover-effect text-center cursor-pointer transition-all duration-200 ${isHovered ? "bg-background/80" : ""}`}
|
|
>
|
|
<div className="w-20 h-20 rounded-full overflow-hidden mx-auto mb-3">
|
|
<Image
|
|
src={member.photo || "/placeholder.svg"}
|
|
alt={member.name}
|
|
width={80}
|
|
height={80}
|
|
className="object-cover w-full h-full"
|
|
/>
|
|
</div>
|
|
<h4 className="font-bold">{member.name}</h4>
|
|
<p className="text-xs text-muted-foreground">{member.role}</p>
|
|
</div>
|
|
|
|
{/* 优化的扩展信息部分 - 更自然的动画 */}
|
|
<div
|
|
className={`absolute left-0 right-0 bg-primary/10 backdrop-blur-md border border-primary/30 p-4 transition-all duration-300 ease-out z-20 ${
|
|
isHovered
|
|
? "opacity-100 transform translate-y-0 scale-100"
|
|
: "opacity-0 transform -translate-y-4 scale-95 pointer-events-none"
|
|
}`}
|
|
style={{
|
|
top: "100%",
|
|
transformOrigin: "top center",
|
|
}}
|
|
>
|
|
<div className="space-y-2">
|
|
<h5 className="font-bold text-primary">{member.name} - 现状</h5>
|
|
<p className="text-sm font-medium">{member.destination}</p>
|
|
<div className="pt-2 border-t border-white/10">
|
|
<p className="text-sm italic">"{member.message}"</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<main className="min-h-screen bg-background">
|
|
<div className="container mx-auto px-4 py-16">
|
|
<div className="mb-8">
|
|
<Link href="/">
|
|
<Button variant="ghost" className="button-hover-effect mb-4">
|
|
<ArrowLeft className="mr-2 h-4 w-4" /> 返回首页
|
|
</Button>
|
|
</Link>
|
|
<h1 className="text-4xl font-bold mb-2">英灵殿</h1>
|
|
<p className="text-muted-foreground">探索我们团队的发展历程、历届队员和机器人作品</p>
|
|
</div>
|
|
|
|
{/* 历届队员部分 */}
|
|
<section className="mb-16">
|
|
<h2 className="text-2xl font-bold mb-6 border-l-4 border-primary pl-4">历届队员</h2>
|
|
|
|
{teamMembers.map((team, teamIndex) => (
|
|
<div key={teamIndex} className="mb-12">
|
|
<h3 className="text-xl font-bold mb-4 text-primary">{team.year} 赛季</h3>
|
|
<p className="mb-4">队长: {team.captain}</p>
|
|
|
|
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
|
|
{team.members.map((member, memberIndex) => (
|
|
<MemberCard
|
|
key={memberIndex}
|
|
member={member}
|
|
index={teamIndex * 100 + memberIndex} // 创建唯一索引
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</section>
|
|
|
|
{/* 历届机器人部分 - 使用共享数据 */}
|
|
<section>
|
|
<h2 className="text-2xl font-bold mb-6 border-l-4 border-primary pl-4">历届机器人</h2>
|
|
|
|
{robotsByYear.map((year, index) => (
|
|
<div key={index} className="mb-12">
|
|
<h3 className="text-xl font-bold mb-4 text-primary">{year.year} 赛季机器人</h3>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
{year.models.map((robot) => (
|
|
<Card key={robot.id} className="border-white/10 bg-background/60 backdrop-blur-sm card-hover-effect">
|
|
<CardHeader>
|
|
<CardTitle>{robot.name}</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="mb-4">
|
|
<Image
|
|
src={robot.image || "/placeholder.svg"}
|
|
alt={robot.name}
|
|
width={400}
|
|
height={300}
|
|
className="w-full h-auto object-cover"
|
|
/>
|
|
</div>
|
|
<p className="text-muted-foreground mb-4">{robot.description}</p>
|
|
<div>
|
|
<h5 className="font-bold mb-2">获得荣誉:</h5>
|
|
<ul className="list-disc pl-5">
|
|
{robot.achievements.map((achievement, aidx) => (
|
|
<li key={aidx} className="text-sm text-muted-foreground">
|
|
{achievement}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
<div className="mt-4">
|
|
<Link href={`/robots#${robot.id}`}>
|
|
<Button variant="outline" size="sm" className="w-full border-white/10 button-hover-effect">
|
|
查看详情
|
|
</Button>
|
|
</Link>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</section>
|
|
</div>
|
|
</main>
|
|
)
|
|
}
|