266 lines
11 KiB
TypeScript
266 lines
11 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 { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
|
||
|
||
export default function TeamsPage() {
|
||
const [activeTab, setActiveTab] = useState("mest")
|
||
|
||
const teams = [
|
||
{
|
||
id: "mest",
|
||
name: "机械架构组",
|
||
code: "MEST",
|
||
icon: "/icons/mest.svg",
|
||
description:
|
||
"机械架构组负责设计和制造机器人的物理结构，包括底盘、武器系统和机械部件。我们的工作是机器人的骨骼和肌肉，确保它们能够承受比赛中的各种挑战。",
|
||
responsibilities: ["3D 建模与 CAD 出图", "CNC 加工制造", "机械结构分析与优化", "结构装配与测试"],
|
||
projects: [
|
||
{
|
||
title: "轻量化底盘设计",
|
||
description: "通过拓扑优化和材料选择，减轻机器人底盘重量30%，同时保持结构强度。",
|
||
image: "/placeholder.svg?height=300&width=400",
|
||
},
|
||
{
|
||
title: "模块化武器系统",
|
||
description: "开发可快速更换的模块化武器系统，适应不同比赛场景和对手特点。",
|
||
image: "/placeholder.svg?height=300&width=400",
|
||
},
|
||
],
|
||
skills: ["SolidWorks", "AutoCAD", "有限元分析", "材料学", "加工工艺", "3D打印"],
|
||
members: [
|
||
{
|
||
name: "彭戈",
|
||
role: "组长",
|
||
photo: "/placeholder.svg?height=100&width=100",
|
||
},
|
||
{
|
||
name: "闫芃森",
|
||
role: "机械工程师",
|
||
photo: "/placeholder.svg?height=100&width=100",
|
||
},
|
||
],
|
||
},
|
||
{
|
||
id: "elct",
|
||
name: "电传测控组",
|
||
code: "ELCT",
|
||
icon: "/icons/elct.svg",
|
||
description:
|
||
"电传测控组开发机器人的配电与控制系统，涵盖电路设计、功率管理和嵌入式开发。我们是机器人的神经系统，使其能够感知环境并执行精确动作。",
|
||
responsibilities: [
|
||
"电路设计与 PCB Layout",
|
||
"功率管理系统设计",
|
||
"电机控制和驱动开发",
|
||
"传感器集成与信号处理",
|
||
"控制理论应用",
|
||
],
|
||
projects: [
|
||
{
|
||
title: "高效功率管理系统",
|
||
description: "设计能够优化电池使用的功率管理系统，延长机器人作战时间20%。",
|
||
image: "/placeholder.svg?height=300&width=400",
|
||
},
|
||
{
|
||
title: "实时控制系统",
|
||
description: "基于STM32的实时控制系统，实现毫秒级响应和精确的运动控制。",
|
||
image: "/placeholder.svg?height=300&width=400",
|
||
},
|
||
],
|
||
skills: ["电路设计", "PCB Layout", "嵌入式编程", "控制理论", "信号处理", "RTOS"],
|
||
members: [
|
||
{
|
||
name: "陈卓文",
|
||
role: "组长",
|
||
photo: "/placeholder.svg?height=100&width=100",
|
||
},
|
||
],
|
||
},
|
||
{
|
||
id: "vsag",
|
||
name: "视觉算法组",
|
||
code: "VSAG",
|
||
icon: "/icons/vsag.svg",
|
||
description:
|
||
"视觉算法组开发计算机视觉和人工智能系统，使机器人能够感知和理解周围环境，实现自主操作。我们是机器人的眼睛和大脑，赋予它智能决策能力。",
|
||
responsibilities: ["计算机视觉算法开发", "对象识别与跟踪", "机器学习模型训练", "实时图像处理优化"],
|
||
projects: [
|
||
{
|
||
title: "实时目标检测系统",
|
||
description: "基于深度学习的目标检测系统，能够在复杂背景下识别和跟踪对手机器人。",
|
||
image: "/placeholder.svg?height=300&width=400",
|
||
},
|
||
{
|
||
title: "自主导航算法",
|
||
description: "结合视觉和传感器数据的自主导航算法，使机器人能够在场地中精确定位和规划路径。",
|
||
image: "/placeholder.svg?height=300&width=400",
|
||
},
|
||
],
|
||
skills: ["Python", "OpenCV", "TensorFlow/PyTorch", "SLAM", "ROS", "C++"],
|
||
members: [
|
||
{
|
||
name: "黄瑞",
|
||
role: "组长",
|
||
photo: "/placeholder.svg?height=100&width=100",
|
||
},
|
||
{
|
||
name: "王靖博",
|
||
role: "视觉工程师",
|
||
photo: "/placeholder.svg?height=100&width=100",
|
||
},
|
||
],
|
||
},
|
||
{
|
||
id: "pram",
|
||
name: "宣传筹划组",
|
||
code: "PRAM",
|
||
icon: "/icons/pram.svg",
|
||
description:
|
||
"宣传筹划组管理团队品牌、文档、社交媒体和外联工作，以宣传我们的团队并获得赞助，并规划赛季任务、维护战队开发环境。我们是团队的声音和桥梁。",
|
||
responsibilities: ["平面与视觉设计", "社交媒体运营", "招商引资", "服务器运维", "摄影摄像"],
|
||
projects: [
|
||
{
|
||
title: "品牌重塑计划",
|
||
description: "重新设计团队视觉识别系统，提升品牌形象和认知度。",
|
||
image: "/placeholder.svg?height=300&width=400",
|
||
},
|
||
{
|
||
title: "赞助合作项目",
|
||
description: "与多家企业建立赞助合作关系，为团队提供资金和技术支持。",
|
||
image: "/placeholder.svg?height=300&width=400",
|
||
},
|
||
],
|
||
skills: ["平面设计", "内容创作", "项目管理", "商务谈判", "社交媒体运营", "活动策划"],
|
||
members: [
|
||
{
|
||
name: "李佳睿",
|
||
role: "组长",
|
||
photo: "/placeholder.svg?height=100&width=100",
|
||
},
|
||
{
|
||
name: "黄皓昱",
|
||
role: "运维工程师",
|
||
photo: "/placeholder.svg?height=100&width=100",
|
||
},
|
||
],
|
||
},
|
||
]
|
||
|
||
const activeTeam = teams.find((team) => team.id === activeTab) || teams[0]
|
||
|
||
return (
|
||
<main className="min-h-screen bg-background">
|
||
<div className="container mx-auto px-4 pt-16 md:pt-24 pb-8">
|
||
<div className="mb-2">
|
||
<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">了解 Simba Robotics 各专业小组的详细信息</p>
|
||
</div>
|
||
|
||
<Tabs defaultValue="mest" value={activeTab} onValueChange={setActiveTab} className="w-full">
|
||
<TabsList className="grid grid-cols-2 md:grid-cols-4 gap-2 bg-transparent mb-4 md:mb-0">
|
||
{teams.map((team) => (
|
||
<TabsTrigger
|
||
key={team.id}
|
||
value={team.id}
|
||
className="data-[state=active]:bg-primary/20 data-[state=active]:text-primary border border-white/10"
|
||
>
|
||
<div className="flex items-center gap-2">
|
||
<Image src={team.icon || "/placeholder.svg"} alt={team.name} width={24} height={24} />
|
||
<span className="hidden md:inline">{team.name}</span>
|
||
<span className="md:hidden">{team.code}</span>
|
||
</div>
|
||
</TabsTrigger>
|
||
))}
|
||
</TabsList>
|
||
|
||
<div className="mt-20 md:mt-8 border border-white/10 p-6 card-hover-effect">
|
||
<div className="flex flex-col md:flex-row gap-6 items-start">
|
||
<div className="md:w-1/3">
|
||
<div className="flex items-center gap-4 mb-6">
|
||
<div className="p-4 bg-primary/10">
|
||
<Image src={activeTeam.icon || "/placeholder.svg"} alt={activeTeam.name} width={48} height={48} />
|
||
</div>
|
||
<div>
|
||
<h2 className="text-2xl font-bold">{activeTeam.name}</h2>
|
||
<p className="text-sm font-mono text-primary">{activeTeam.code}</p>
|
||
</div>
|
||
</div>
|
||
|
||
<p className="text-muted-foreground mb-6 leading-relaxed">{activeTeam.description}</p>
|
||
|
||
<div className="mb-6">
|
||
<h3 className="font-bold mb-2 text-primary">核心职责:</h3>
|
||
<ul className="space-y-1 pl-5 list-disc text-muted-foreground">
|
||
{activeTeam.responsibilities.map((item, idx) => (
|
||
<li key={idx}>{item}</li>
|
||
))}
|
||
</ul>
|
||
</div>
|
||
|
||
<div>
|
||
<h3 className="font-bold mb-2 text-primary">技能要求:</h3>
|
||
<div className="flex flex-wrap gap-2">
|
||
{activeTeam.skills.map((skill, idx) => (
|
||
<span key={idx} className="px-2 py-1 bg-primary/10 text-xs rounded-sm">
|
||
{skill}
|
||
</span>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="md:w-2/3">
|
||
<h3 className="text-xl font-bold mb-4 border-l-4 border-primary pl-4">代表项目</h3>
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-8">
|
||
{activeTeam.projects.map((project, idx) => (
|
||
<div key={idx} className="border border-white/10 overflow-hidden card-hover-effect">
|
||
<Image
|
||
src={project.image || "/placeholder.svg"}
|
||
alt={project.title}
|
||
width={400}
|
||
height={300}
|
||
className="w-full h-48 object-cover"
|
||
/>
|
||
<div className="p-4">
|
||
<h4 className="font-bold mb-2">{project.title}</h4>
|
||
<p className="text-sm text-muted-foreground">{project.description}</p>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
<h3 className="text-xl font-bold mb-4 border-l-4 border-primary pl-4">小组成员</h3>
|
||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||
{activeTeam.members.map((member, idx) => (
|
||
<div key={idx} className="border border-white/10 p-4 text-center card-hover-effect">
|
||
<div className="w-16 h-16 rounded-full overflow-hidden mx-auto mb-2">
|
||
<Image
|
||
src={member.photo || "/placeholder.svg"}
|
||
alt={member.name}
|
||
width={64}
|
||
height={64}
|
||
className="w-full h-full object-cover"
|
||
/>
|
||
</div>
|
||
<h4 className="font-bold">{member.name}</h4>
|
||
<p className="text-xs text-muted-foreground">{member.role}</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</Tabs>
|
||
</div>
|
||
</main>
|
||
)
|
||
}
|