From 07409abb3b77031798b4f4c5e16538c963dbec27 Mon Sep 17 00:00:00 2001
From: MatrixSeven <hacker.kill07@gmail.com>
Date: Mon, 8 Sep 2025 10:45:35 +0800
Subject: [PATCH] =?UTF-8?q?feat:UI=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 chuan-next/src/app/HomePage.tsx      | 18 +++++---
 chuan-next/src/app/globals.css       |  1 -
 chuan-next/src/components/Footer.tsx | 64 ++++++++++++++++++++++++++++
 chuan-next/src/components/Hero.tsx   | 17 +-------
 4 files changed, 78 insertions(+), 22 deletions(-)
 create mode 100644 chuan-next/src/components/Footer.tsx

diff --git a/chuan-next/src/app/HomePage.tsx b/chuan-next/src/app/HomePage.tsx
index c97e275..6eeed52 100644
--- a/chuan-next/src/app/HomePage.tsx
+++ b/chuan-next/src/app/HomePage.tsx
@@ -4,6 +4,7 @@ import React from 'react';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { Upload, MessageSquare, Monitor, Users, Settings } from 'lucide-react';
 import Hero from '@/components/Hero';
+import Footer from '@/components/Footer';
 import { WebRTCFileTransfer } from '@/components/WebRTCFileTransfer';
 import { WebRTCTextImageTransfer } from '@/components/WebRTCTextImageTransfer';
 import DesktopShare from '@/components/DesktopShare';
@@ -45,12 +46,13 @@ export default function HomePage() {
   };
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-slate-50 to-blue-50">
-      <div className="container mx-auto px-4 py-4 sm:py-6 md:py-8">
-        {/* Hero Section */}
-        <div className="text-center mb-6 sm:mb-8">
-          <Hero />
-        </div>
+    <div className="min-h-screen bg-gradient-to-br from-slate-50 to-blue-50 flex flex-col">
+      <div className="flex-1">
+        <div className="container mx-auto px-4 py-2 sm:py-4 md:py-6">
+          {/* Hero Section */}
+          <div className="text-center mb-4 sm:mb-6">
+            <Hero />
+          </div>
 
         {/* WebRTC 支持检测加载状态 */}
         {!isChecked && (
@@ -171,8 +173,12 @@ export default function HomePage() {
             </Tabs>
           </div>
         )}
+        </div>
       </div>
 
+      {/* 页脚 */}
+      <Footer />
+
       {/* WebRTC 不支持提示模态框 */}
       {webrtcSupport && (
         <WebRTCUnsupportedModal
diff --git a/chuan-next/src/app/globals.css b/chuan-next/src/app/globals.css
index 725d87c..e485100 100644
--- a/chuan-next/src/app/globals.css
+++ b/chuan-next/src/app/globals.css
@@ -86,7 +86,6 @@ body {
   color: hsl(var(--foreground));
   font-family: var(--font-geist-sans), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
   overflow-x: hidden;
-  overflow-y: hidden;
   min-height: 100vh;
   margin: 0;
   padding: 0;
diff --git a/chuan-next/src/components/Footer.tsx b/chuan-next/src/components/Footer.tsx
new file mode 100644
index 0000000..dcea3a6
--- /dev/null
+++ b/chuan-next/src/components/Footer.tsx
@@ -0,0 +1,64 @@
+"use client";
+
+import React from 'react';
+import { Github, HelpCircle, MessageCircle, Bug } from 'lucide-react';
+import Link from 'next/link';
+
+export default function Footer() {
+  return (
+    <footer className="mt-auto py-4 shrink-0">
+      <div className="container mx-auto px-4">
+        {/* 分割线 */}
+        <div className="w-full h-px bg-gradient-to-r from-transparent via-slate-200 to-transparent mb-4"></div>
+        
+        {/* 链接区域 */}
+        <div className="flex flex-wrap items-center justify-center gap-3 sm:gap-4 text-sm">
+          <Link 
+            href="/help"
+            className="text-slate-500 hover:text-blue-500 transition-colors duration-200 flex items-center gap-1"
+          >
+            <HelpCircle className="w-3.5 h-3.5" />
+            帮助
+          </Link>
+          
+          <a 
+            href="https://github.com/MatrixSeven/file-transfer-go" 
+            target="_blank" 
+            rel="noopener noreferrer"
+            className="text-slate-500 hover:text-slate-700 transition-colors duration-200 flex items-center gap-1"
+          >
+            <Github className="w-3.5 h-3.5" />
+            开源地址
+          </a>
+          
+          <a 
+            href="https://x.com/_MatrixSeven" 
+            target="_blank" 
+            rel="noopener noreferrer"
+            className="text-slate-500 hover:text-blue-400 transition-colors duration-200 flex items-center gap-1"
+          >
+            <MessageCircle className="w-3.5 h-3.5" />
+            X
+          </a>
+          
+          <a 
+            href="https://github.com/MatrixSeven/file-transfer-go/issues" 
+            target="_blank" 
+            rel="noopener noreferrer"
+            className="text-slate-500 hover:text-orange-500 transition-colors duration-200 flex items-center gap-1"
+          >
+            <Bug className="w-3.5 h-3.5" />
+            Issue
+          </a>
+        </div>
+        
+        {/* 版权信息 */}
+        <div className="text-center mt-3">
+          <p className="text-xs text-slate-400">
+            基于 WebRTC 的端到端文件传输服务
+          </p>
+        </div>
+      </div>
+    </footer>
+  );
+}
diff --git a/chuan-next/src/components/Hero.tsx b/chuan-next/src/components/Hero.tsx
index e866d05..58c2511 100644
--- a/chuan-next/src/components/Hero.tsx
+++ b/chuan-next/src/components/Hero.tsx
@@ -11,8 +11,6 @@ export default function Hero() {
         文件快传
       </h1>
       <p className="text-sm sm:text-base text-slate-600 max-w-xl mx-auto leading-relaxed px-4 mb-3">
-        安全、快速、简单的传输服务
-        <br />
         <span className="text-xs sm:text-sm text-slate-500">基于WebRTC的端到端服务 - 无需注册，即传即用</span>
       </p>
       
@@ -25,7 +23,7 @@ export default function Hero() {
           className="inline-flex items-center gap-1 px-3 py-1.5 text-xs sm:text-sm text-slate-600 hover:text-slate-800 bg-slate-100 hover:bg-slate-200 rounded-full transition-colors duration-200 border border-slate-200 hover:border-slate-300"
         >
           <Github className="w-3 h-3 sm:w-4 sm:h-4" />
-          <span className="font-medium">开源项目</span>
+          <span className="font-medium">开源地址</span>
         </a>
         
         <Link 
@@ -37,19 +35,8 @@ export default function Hero() {
         </Link>
       </div>
       
-      <div className="flex items-center justify-center">
-        <a 
-          href="https://github.com/MatrixSeven/file-transfer-go"
-          target="_blank" 
-          rel="noopener noreferrer"
-          className="text-xs text-slate-500 hover:text-slate-700 hover:underline transition-colors duration-200"
-        >
-          https://github.com/MatrixSeven/file-transfer-go
-        </a>
-      </div>
-      
       {/* 分割线 */}
-      <div className="w-64 sm:w-80 md:w-96 lg:w-[32rem] xl:w-[40rem] h-0.5 bg-gradient-to-r from-blue-400 via-purple-400 to-indigo-400 mx-auto mt-2 mb-2 opacity-60"></div>
+      <div className="w-full max-w-2xl h-0.5 bg-gradient-to-r from-blue-400 via-purple-400 to-indigo-400 mx-auto mt-2 mb-2 opacity-60"></div>
     </div>
   );
 }