From c6f2acd462f4b471fddfd2555195e6e4e877a76b Mon Sep 17 00:00:00 2001 From: HelixCopex Date: Thu, 17 Apr 2025 19:38:27 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E7=BD=91=E9=A1=B5=E4=BA=A4?= =?UTF-8?q?=E4=BA=92=E9=80=BB=E8=BE=91=E5=92=8C=E6=A1=86=E6=9E=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/history/page.tsx | 150 ++++++++++++++++---- components/about-section.tsx | 36 ++--- components/contact-section.tsx | 40 ++++-- components/header.tsx | 37 ----- components/hero-section.tsx | 23 +++- components/robots-showcase.tsx | 243 ++++++--------------------------- public/logo.svg | 14 +- 7 files changed, 245 insertions(+), 298 deletions(-) diff --git a/app/history/page.tsx b/app/history/page.tsx index c3ba6da..f0f39c5 100644 --- a/app/history/page.tsx +++ b/app/history/page.tsx @@ -1,8 +1,10 @@ +"use client" 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 { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip" export default function HistoryPage() { // 历届队员数据 @@ -11,31 +13,109 @@ export default function HistoryPage() { year: "2024-2025", captain: "彭戈", members: [ - { name: "彭戈", role: "队长 / 机械组", photo: "/placeholder.svg?height=100&width=100" }, - { name: "陈卓文", role: "电控组组长", photo: "/placeholder.svg?height=100&width=100" }, - { name: "黄瑞", role: "视觉组组长", photo: "/placeholder.svg?height=100&width=100" }, - { name: "李佳睿", role: "宣筹组组长", photo: "/placeholder.svg?height=100&width=100" }, - { name: "韩翔宇", role: "视觉工程师", photo: "/placeholder.svg?height=100&width=100" }, - { name: "闫芃森", role: "机械工程师", photo: "/placeholder.svg?height=100&width=100" }, + { + 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" }, - { name: "林小明", role: "机械组组长", photo: "/placeholder.svg?height=100&width=100" }, - { name: "黄海", role: "视觉组组长", photo: "/placeholder.svg?height=100&width=100" }, - { name: "张丽", role: "宣筹组组长", photo: "/placeholder.svg?height=100&width=100" }, + { + 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" }, - { name: "李明", role: "机械组组长", photo: "/placeholder.svg?height=100&width=100" }, - { name: "张伟", role: "电控组组长", photo: "/placeholder.svg?height=100&width=100" }, + { + 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: "战队的经历让我明白了团队合作的重要性，这是任何成功项目的基础。", + }, ], }, ] @@ -113,19 +193,37 @@ export default function HistoryPage() {
{team.members.map((member, idx) => ( -
-
- {member.name} -
-

{member.name}

-

{member.role}

-
+ + + +
+
+ {member.name} +
+

{member.name}

+

{member.role}

+
+ + +
+
{member.name} - 现状
+

{member.destination}

+
+

"{member.message}"

+
+
+ + + ))}
diff --git a/components/about-section.tsx b/components/about-section.tsx index d977938..faffab3 100644 --- a/components/about-section.tsx +++ b/components/about-section.tsx @@ -1,5 +1,5 @@ import Image from "next/image" -import { Shield, Zap, Brain, Users } from "lucide-react" +import { Code, Cpu, Database, Layers } from "lucide-react" export default function AboutSection() { return ( @@ -45,38 +45,42 @@ export default function AboutSection() {
-

创新机械结构

+

技术研究方向

- Simba Robotics - 团队专注于开发先进的机械结构，结合轻量化设计与高强度材料，为我们的机器人提供卓越的性能基础。我们的机械系统采用模块化设计，便于快速维修和升级。 + 在 Simba + Robotics，队员们将有机会接触并深入研究多个前沿技术领域。我们的研发工作涵盖了机器人工程的各个方面，为队员提供全面的技术成长路径。加入我们，你将在以下领域获得实战经验和专业技能：

- +
-
高强度装甲系统
-

采用复合材料制造，提供最佳的防护与重量比

+
机械设计与制造
+

CAD建模、结构分析、3D打印、CNC加工、材料学、机构学

- +
-
高效传动系统
-

定制齿轮箱设计，最大化动力输出与响应速度

+
嵌入式系统开发
+

+ 单片机编程、PCB设计、电机控制、传感器融合、实时操作系统 +

- +
-
智能散热结构
-

创新的热管理系统，确保长时间高负荷运行

+
计算机视觉与AI
+

+ 目标检测、图像处理、深度学习、SLAM定位导航、决策算法 +

- +
-
精密悬挂系统
-

适应各种地形的独立悬挂，提供稳定的平台

+
系统集成与项目管理
+

软硬件协同、版本控制、团队协作、敏捷开发、技术文档

diff --git a/components/contact-section.tsx b/components/contact-section.tsx index 46b80bd..22dea74 100644 --- a/components/contact-section.tsx +++ b/components/contact-section.tsx @@ -1,5 +1,7 @@ +"use client" + import { Card, CardContent } from "@/components/ui/card" -import { Mail, MapPin, Phone, Github, Youtube, Twitter } from "lucide-react" +import { Mail, MapPin, Phone, Github, MessageSquare } from "lucide-react" export default function ContactSection() { const contactInfo = [ @@ -30,14 +32,32 @@ export default function ContactSection() { link: "https://github.com/simbarobotics", }, { - icon: , - name: "YouTube", - link: "https://youtube.com/simbarobotics", + icon: ( + + + + + ), + name: "Bilibili", + link: "https://space.bilibili.com/simbarobotics", }, { - icon: , - name: "Twitter", - link: "https://twitter.com/simbarobotics", + icon: , + name: "微信公众号", + link: "#wechat-qrcode", + onClick: (e) => { + e.preventDefault() + // 这里可以添加显示微信二维码的逻辑，例如打开一个模态框 + alert("扫描二维码关注我们的微信公众号：SimbaRobotics") + }, }, ] @@ -89,6 +109,7 @@ export default function ContactSection() { rel="noopener noreferrer" className="p-3 bg-primary/10 hover:bg-primary/20 transition-colors card-hover-effect" aria-label={social.name} + onClick={social.onClick} > {social.icon} @@ -102,7 +123,8 @@ export default function ContactSection() {

加入我们的队伍

- Simba Robotics 正在寻找充满激情的新成员加入我们的团队。我们欢迎各种学术背景的学生，无论是机械工程、电子工程、计算机科学还是市场营销专业的学生。 + Simba Robotics + 正在寻找充满激情的新成员加入我们的团队。我们欢迎各种学术背景的学生，无论是机械工程、电子工程、计算机科学还是市场营销专业的学生。

如果您对机器人技术充满热情，希望在实际项目中运用自己的技能，并愿意在团队环境中工作，我们非常欢迎您的加入。 @@ -110,7 +132,7 @@ export default function ContactSection() {

请通过上述渠道与我们联系，并附上您的简历和一封简短的介绍信，说明您希望加入 Simba Robotics 的原因。

-

开放招募时间： 每学期的前两周

+

开放招募时间： 每学期的前两周
diff --git a/components/header.tsx b/components/header.tsx index 7ed8658..eb95425 100644 --- a/components/header.tsx +++ b/components/header.tsx @@ -80,43 +80,6 @@ export default function Header() {
- - - - {/* Mobile Menu Button */} - diff --git a/components/robots-showcase.tsx b/components/robots-showcase.tsx index e58a36a..f3574c0 100644 --- a/components/robots-showcase.tsx +++ b/components/robots-showcase.tsx @@ -1,6 +1,6 @@ "use client" -import { useRef, useState } from "react" +import { useRef, useState, useEffect } from "react" import Image from "next/image" import { Card, CardContent } from "@/components/ui/card" import { Button } from "@/components/ui/button" @@ -9,8 +9,6 @@ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/comp export default function RobotsShowcase() { const scrollContainerRef = useRef(null) - const [showLeftArrow, setShowLeftArrow] = useState(false) - const [showRightArrow, setShowRightArrow] = useState(true) const [activeIndex, setActiveIndex] = useState(0) const robots = [ @@ -50,67 +48,41 @@ export default function RobotsShowcase() { }, ] + // 创建一个循环数组，用于无限滚动 + const displayRobots = [...robots] + const scroll = (direction: "left" | "right") => { if (scrollContainerRef.current) { const { current: container } = scrollContainerRef - const scrollAmount = container.clientWidth * 0.8 - const cardWidth = container.querySelector(".card-hover-effect")?.clientWidth || 0 - const gap = 24 // 6 * 4px (gap-6) + const cardWidth = container.querySelector(".robot-card")?.clientWidth || 350 + // 更新活跃索引 if (direction === "left") { - container.scrollBy({ left: -scrollAmount, behavior: "smooth" }) setActiveIndex((prev) => (prev === 0 ? robots.length - 1 : prev - 1)) } else { - container.scrollBy({ left: scrollAmount, behavior: "smooth" }) setActiveIndex((prev) => (prev === robots.length - 1 ? 0 : prev + 1)) } - // 检查是否需要无限滚动 - setTimeout(() => { - if (container) { - // 如果滚动到最左边（克隆的最后一个元素） - if (container.scrollLeft < cardWidth / 2) { - // 无动画地跳到真正的最后一组元素 - container.scrollTo({ - left: container.scrollWidth - cardWidth * 2, - behavior: "auto", - }) - } - // 如果滚动到最右边（克隆的第一个元素） - else if (container.scrollLeft > container.scrollWidth - cardWidth * 1.5) { - // 无动画地跳到真正的第一组元素 - container.scrollTo({ - left: cardWidth, - behavior: "auto", - }) - } - - setShowLeftArrow(container.scrollLeft > 0) - setShowRightArrow(container.scrollLeft < container.scrollWidth - container.clientWidth - 10) - } - }, 500) + // 滚动到新的活跃卡片 + const newScrollPosition = activeIndex * (cardWidth + 24) // 24 是 gap-6 + container.scrollTo({ + left: newScrollPosition, + behavior: "smooth", + }) } } - const handleScroll = () => { + // 使用 useEffect 监听活跃索引变化，滚动到对应位置 + useEffect(() => { if (scrollContainerRef.current) { - const { current: container } = scrollContainerRef - const cardWidth = container.querySelector(".card-hover-effect")?.clientWidth || 0 - const gap = 24 // 6 * 4px (gap-6) - - // 计算当前查看的卡片索引 - const scrollPosition = container.scrollLeft - const itemWidth = cardWidth + gap - const index = Math.round(scrollPosition / itemWidth) - 1 // -1 因为有一个克隆元素在开头 - - if (index >= 0 && index < robots.length) { - setActiveIndex(index) - } - - setShowLeftArrow(container.scrollLeft > 0) - setShowRightArrow(container.scrollLeft < container.scrollWidth - container.clientWidth - 10) + const cardWidth = scrollContainerRef.current.querySelector(".robot-card")?.clientWidth || 350 + const newScrollPosition = activeIndex * (cardWidth + 24) // 24 是 gap-6 + scrollContainerRef.current.scrollTo({ + left: newScrollPosition, + behavior: "smooth", + }) } - } + }, [activeIndex]) return (
@@ -133,84 +105,20 @@ export default function RobotsShowcase() {
- {showLeftArrow && ( - - )} - -
scroll("left")} > - {/* 添加末尾项到开头 */} - - -
- {robots[robots.length -
- {robots[robots.length - 1].category} -
-
-

{`0${robots.length}/0${robots.length}`}

-
-
+ + -
-
-

{robots[robots.length - 1].name}

- - - - - - -
-

Technical Specifications:

-
    - {robots[robots.length - 1].specs.map((spec, index) => ( -
  • {spec}
    • - ))} -
-
- - - -
- -

- {robots[robots.length - 1].description} -

- - -
- - - - {robots.map((robot, index) => ( +
+ {displayRobots.map((robot, index) => ( setActiveIndex(index)} + className="min-w-[300px] md:min-w-[350px] border-white/10 bg-background/60 backdrop-blur-sm flex-shrink-0 card-hover-effect robot-card" >
@@ -243,8 +151,8 @@ export default function RobotsShowcase() {

Technical Specifications:

    - {robot.specs.map((spec, index) => ( -
  • {spec}
    • + {robot.specs.map((spec, specIndex) => ( +
  • {spec}
    • ))}
@@ -262,73 +170,16 @@ export default function RobotsShowcase() { ))} - - {/* 添加开头项到末尾 */} - - -
- {robots[0].name} -
- {robots[0].category} -
-
-

{`01/0${robots.length}`}

-
-
- -
-
-

{robots[0].name}

- - - - - - -
-

技术参数:

-
    - {robots[0].specs.map((spec, index) => ( -
  • {spec}
    • - ))} -
-
- - - -
- -

{robots[0].description}

- - -
- -
- {showRightArrow && ( - - )} + {/* 添加索引指示器 */}
@@ -338,17 +189,7 @@ export default function RobotsShowcase() { className={`w-2 h-2 rounded-full transition-all ${ activeIndex === index ? "bg-primary w-4" : "bg-gray-500" }`} - onClick={() => { - if (scrollContainerRef.current) { - const cardWidth = scrollContainerRef.current.querySelector(".card-hover-effect")?.clientWidth || 0 - const gap = 24 // 6 * 4px (gap-6) - scrollContainerRef.current.scrollTo({ - left: (index + 1) * (cardWidth + gap), // +1 for the cloned element at start - behavior: "smooth", - }) - setActiveIndex(index) - } - }} + onClick={() => setActiveIndex(index)} /> ))}
diff --git a/public/logo.svg b/public/logo.svg index 19dd69e..58c90e7 100644 --- a/public/logo.svg +++ b/public/logo.svg @@ -8,7 +8,7 @@ version="1.1" id="svg1" inkscape:version="1.3.2 (091e20e, 2023-11-25, custom)" - sodipodi:docname="s_icon.svg" + sodipodi:docname="logo.svg" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns="http://www.w3.org/2000/svg" @@ -39,16 +39,16 @@ inkscape:groupmode="layer" id="layer1">