初始提交：AI医疗展示网站，包含回到顶部按钮功能（排除大文件）

2025-06-26 17:47:01 +08:00
commit a6e406539f
78 changed files with 17704 additions and 0 deletions
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -0,0 +1,105 @@
+import React, { useState, useEffect } from 'react';
+import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
+import { motion, AnimatePresence } from 'framer-motion';
+import { ArrowUp } from 'lucide-react';
+import './App.css';
+
+// 组件导入
+import Header from './components/Header';
+import Hero from './components/Hero';
+import CompanyIntro from './components/CompanyIntro';
+import Mission from './components/Mission';
+import ProductMatrix from './components/ProductMatrix';
+import VascularScenarios from './components/VascularScenarios';
+import Architecture from './components/Architecture';
+import FutureVision from './components/FutureVision';
+import Conclusion from './components/Conclusion';
+
+function App() {
+  const [showScrollButton, setShowScrollButton] = useState(false);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      // 获取第一个section（Hero）的高度来判断是否显示按钮
+      const heroSection = document.getElementById('hero');
+      if (heroSection) {
+        const heroHeight = heroSection.offsetHeight;
+        const scrollY = window.scrollY;
+        
+        // 当滚动超过Hero区域的50%时显示按钮（即进入第二页）
+        setShowScrollButton(scrollY > heroHeight * 0.5);
+      }
+    };
+
+    window.addEventListener('scroll', handleScroll);
+    handleScroll(); // 初始检查
+    
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, []);
+
+  const scrollToTop = () => {
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  };
+
+  return (
+    <Router>
+      <div className="min-h-screen bg-background relative">
+        <Header />
+        <main>
+          <Routes>
+            <Route path="/" element={
+              <motion.div
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                transition={{ duration: 0.5 }}
+              >
+                <Hero />
+                <CompanyIntro />
+                <Mission />
+                <ProductMatrix />
+                <VascularScenarios />
+                <Architecture />
+                <FutureVision />
+                <Conclusion />
+              </motion.div>
+            } />
+          </Routes>
+        </main>
+        
+        {/* 全局回到首页按钮 */}
+        <AnimatePresence>
+          {showScrollButton && (
+            <motion.button
+              onClick={scrollToTop}
+              className="fixed bottom-19 right-8 px-2 py-1 rounded-full flex items-center justify-center gap-1 transition-all duration-300 z-50 bg-white border text-gray-400 hover:bg-gray-50 hover:shadow-lg backdrop-blur-sm font-medium text-xs"
+              style={{ 
+                borderColor: '#9ca3af',
+                color: '#9ca3af'
+              }}
+              initial={{ opacity: 0, scale: 0, y: 100 }}
+              animate={{ opacity: 1, scale: 1, y: 0 }}
+              exit={{ opacity: 0, scale: 0, y: 100 }}
+              transition={{ 
+                type: "spring", 
+                stiffness: 300, 
+                damping: 25 
+              }}
+              whileHover={{ 
+                scale: 1.1,
+                transition: { duration: 0.2 }
+              }}
+              whileTap={{ scale: 0.9 }}
+              title="回到顶部"
+            >
+              <ArrowUp className="w-3 h-3" />
+              回到顶部
+            </motion.button>
+          )}
+        </AnimatePresence>
+      </div>
+    </Router>
+  );
+}
+
+export default App;
+