feat:UI更新

This commit is contained in:
MatrixSeven
2025-09-08 10:45:35 +08:00
parent 1e5d74433b
commit 07409abb3b
4 changed files with 78 additions and 22 deletions

View File

@@ -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

View File

@@ -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;

View File

@@ -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>
);
}

View File

@@ -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>
);
}