mirror of
https://github.com/MatrixSeven/file-transfer-go.git
synced 2026-02-04 03:25:03 +08:00
feat:UI更新
This commit is contained in:
@@ -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
|
||||
|
||||
@@ -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;
|
||||
|
||||
64
chuan-next/src/components/Footer.tsx
Normal file
64
chuan-next/src/components/Footer.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user