Skip to content

Commit 63e6e95

Browse files
MatrixSevenMatrixSeven
committed
feat:webrtc支持检测|房间检测|UI状态优化
1 parent 301434f commit 63e6e95

18 files changed

+1183
-166
lines changed

‎chuan-next/src/app/HomePage.tsx‎

Lines changed: 126 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,30 @@
33
import React, { useEffect, useState } from 'react';
44
import { useSearchParams } from 'next/navigation';
55
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
6-
import { Upload, MessageSquare, Monitor, TestTube } from 'lucide-react';
6+
import { Upload, MessageSquare, Monitor, Users } from 'lucide-react';
77
import Hero from '@/components/Hero';
88
import { WebRTCFileTransfer } from '@/components/WebRTCFileTransfer';
99
import { WebRTCTextImageTransfer } from '@/components/WebRTCTextImageTransfer';
1010
import DesktopShare from '@/components/DesktopShare';
11+
import WeChatGroup from '@/components/WeChatGroup';
12+
import { WebRTCUnsupportedModal } from '@/components/WebRTCUnsupportedModal';
13+
import { useWebRTCSupport } from '@/hooks/useWebRTCSupport';
1114

1215
export default function HomePage() {
1316
const searchParams = useSearchParams();
1417
const [activeTab, setActiveTab] = useState('webrtc');
1518
const [hasInitialized, setHasInitialized] = useState(false);
1619

20+
// WebRTC 支持检测
21+
const {
22+
webrtcSupport,
23+
isSupported,
24+
isChecked,
25+
showUnsupportedModal,
26+
closeUnsupportedModal,
27+
showUnsupportedModalManually,
28+
} = useWebRTCSupport();
29+
1730
// 根据URL参数设置初始标签（仅首次加载时）
1831
useEffect(() => {
1932
if (!hasInitialized) {
@@ -50,56 +63,123 @@ export default function HomePage() {
5063
<Hero />
5164
</div>
5265

53-
{/* Main Content */}
54-
<div className="max-w-4xl mx-auto">
55-
<Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
56-
{/* Tabs Navigation - 横向布局 */}
57-
<div className="mb-6">
58-
<TabsList className="grid w-full grid-cols-3 max-w-xl mx-auto h-auto bg-white/90 backdrop-blur-sm shadow-lg rounded-xl p-2 border border-slate-200">
59-
<TabsTrigger
60-
value="webrtc"
61-
className="flex items-center justify-center space-x-2 px-3 py-3 text-sm font-medium rounded-lg transition-all duration-200 hover:bg-slate-50 data-[state=active]:bg-blue-500 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=active]:hover:bg-blue-600"
62-
>
63-
<Upload className="w-4 h-4" />
64-
<span className="hidden sm:inline">文件传输</span>
65-
<span className="sm:hidden">文件</span>
66-
</TabsTrigger>
67-
<TabsTrigger
68-
value="message"
69-
className="flex items-center justify-center space-x-2 px-3 py-3 text-sm font-medium rounded-lg transition-all duration-200 hover:bg-slate-50 data-[state=active]:bg-emerald-500 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=active]:hover:bg-emerald-600"
70-
>
71-
<MessageSquare className="w-4 h-4" />
72-
<span className="hidden sm:inline">文本消息</span>
73-
<span className="sm:hidden">消息</span>
74-
</TabsTrigger>
75-
<TabsTrigger
76-
value="desktop"
77-
className="flex items-center justify-center space-x-2 px-3 py-3 text-sm font-medium rounded-lg transition-all duration-200 hover:bg-slate-50 data-[state=active]:bg-purple-500 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=active]:hover:bg-purple-600"
78-
>
79-
<Monitor className="w-4 h-4" />
80-
<span className="hidden sm:inline">共享桌面</span>
81-
<span className="sm:hidden">桌面</span>
82-
</TabsTrigger>
83-
</TabsList>
66+
{/* WebRTC 支持检测加载状态 */}
67+
{!isChecked && (
68+
<div className="max-w-4xl mx-auto text-center py-8">
69+
<div className="animate-pulse">
70+
<div className="h-4 bg-gray-200 rounded w-48 mx-auto mb-2"></div>
71+
<div className="h-4 bg-gray-200 rounded w-32 mx-auto"></div>
8472
</div>
73+
<p className="mt-4 text-gray-600">正在检测浏览器支持...</p>
74+
</div>
75+
)}
8576

86-
{/* Tab Content */}
87-
<div>
88-
<TabsContent value="webrtc" className="mt-0 animate-fade-in-up">
89-
<WebRTCFileTransfer />
90-
</TabsContent>
77+
{/* 主要内容 - 只有在检测完成后才显示 */}
78+
{isChecked && (
79+
<div className="max-w-4xl mx-auto">
80+
{/* WebRTC 不支持时的警告横幅 */}
81+
{!isSupported && (
82+
<div className="mb-6 p-4 bg-red-50 border border-red-200 rounded-lg">
83+
<div className="flex items-center justify-between">
84+
<div className="flex items-center gap-2">
85+
<div className="w-2 h-2 bg-red-500 rounded-full animate-pulse"></div>
86+
<span className="text-red-700 font-medium">
87+
当前浏览器不支持 WebRTC，功能可能无法正常使用
88+
</span>
89+
</div>
90+
<button
91+
onClick={showUnsupportedModalManually}
92+
className="text-red-600 hover:text-red-800 text-sm underline"
93+
>
94+
查看详情
95+
</button>
96+
</div>
97+
</div>
98+
)}
9199

92-
<TabsContent value="message" className="mt-0 animate-fade-in-up">
93-
<WebRTCTextImageTransfer />
94-
</TabsContent>
100+
<Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
101+
{/* Tabs Navigation - 横向布局 */}
102+
<div className="mb-6">
103+
<TabsList className="grid w-full grid-cols-4 max-w-2xl mx-auto h-auto bg-white/90 backdrop-blur-sm shadow-lg rounded-xl p-2 border border-slate-200">
104+
<TabsTrigger
105+
value="webrtc"
106+
className="flex items-center justify-center space-x-2 px-3 py-3 text-sm font-medium rounded-lg transition-all duration-200 hover:bg-slate-50 data-[state=active]:bg-blue-500 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=active]:hover:bg-blue-600"
107+
disabled={!isSupported}
108+
>
109+
<Upload className="w-4 h-4" />
110+
<span className="hidden sm:inline">文件传输</span>
111+
<span className="sm:hidden">文件</span>
112+
{!isSupported && <span className="text-xs opacity-60">*</span>}
113+
</TabsTrigger>
114+
<TabsTrigger
115+
value="message"
116+
className="flex items-center justify-center space-x-2 px-3 py-3 text-sm font-medium rounded-lg transition-all duration-200 hover:bg-slate-50 data-[state=active]:bg-emerald-500 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=active]:hover:bg-emerald-600"
117+
disabled={!isSupported}
118+
>
119+
<MessageSquare className="w-4 h-4" />
120+
<span className="hidden sm:inline">文本消息</span>
121+
<span className="sm:hidden">消息</span>
122+
{!isSupported && <span className="text-xs opacity-60">*</span>}
123+
</TabsTrigger>
124+
<TabsTrigger
125+
value="desktop"
126+
className="flex items-center justify-center space-x-2 px-3 py-3 text-sm font-medium rounded-lg transition-all duration-200 hover:bg-slate-50 data-[state=active]:bg-purple-500 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=active]:hover:bg-purple-600"
127+
disabled={!isSupported}
128+
>
129+
<Monitor className="w-4 h-4" />
130+
<span className="hidden sm:inline">共享桌面</span>
131+
<span className="sm:hidden">桌面</span>
132+
{!isSupported && <span className="text-xs opacity-60">*</span>}
133+
</TabsTrigger>
134+
<TabsTrigger
135+
value="wechat"
136+
className="flex items-center justify-center space-x-2 px-3 py-3 text-sm font-medium rounded-lg transition-all duration-200 hover:bg-slate-50 data-[state=active]:bg-green-500 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=active]:hover:bg-green-600"
137+
>
138+
<Users className="w-4 h-4" />
139+
<span className="hidden sm:inline">微信群</span>
140+
<span className="sm:hidden">微信</span>
141+
</TabsTrigger>
142+
</TabsList>
143+
144+
{/* WebRTC 不支持时的提示 */}
145+
{!isSupported && (
146+
<p className="text-center text-xs text-gray-500 mt-2">
147+
* 需要 WebRTC 支持才能使用
148+
</p>
149+
)}
150+
</div>
95151

96-
<TabsContent value="desktop" className="mt-0 animate-fade-in-up">
97-
<DesktopShare />
98-
</TabsContent>
99-
</div>
100-
</Tabs>
101-
</div>
152+
{/* Tab Content */}
153+
<div>
154+
<TabsContent value="webrtc" className="mt-0 animate-fade-in-up">
155+
<WebRTCFileTransfer />
156+
</TabsContent>
157+
158+
<TabsContent value="message" className="mt-0 animate-fade-in-up">
159+
<WebRTCTextImageTransfer />
160+
</TabsContent>
161+
162+
<TabsContent value="desktop" className="mt-0 animate-fade-in-up">
163+
<DesktopShare />
164+
</TabsContent>
165+
166+
<TabsContent value="wechat" className="mt-0 animate-fade-in-up">
167+
<WeChatGroup />
168+
</TabsContent>
169+
</div>
170+
</Tabs>
171+
</div>
172+
)}
102173
</div>
174+
175+
{/* WebRTC 不支持提示模态框 */}
176+
{webrtcSupport && (
177+
<WebRTCUnsupportedModal
178+
isOpen={showUnsupportedModal}
179+
onClose={closeUnsupportedModal}
180+
webrtcSupport={webrtcSupport}
181+
/>
182+
)}
103183
</div>
104184
);
105185
}

‎chuan-next/src/app/api/create-room/route.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,14 @@ export async function POST(request: NextRequest) {
66
try {
77
console.log('API Route: Creating room, proxying to:', `${GO_BACKEND_URL}/api/create-room`);
88

9-
const body = await request.json();
10-
9+
// 不再需要解析和转发请求体，因为后端会忽略它们
1110
const response = await fetch(`${GO_BACKEND_URL}/api/create-room`, {
1211
method: 'POST',
1312
headers: {
1413
'Content-Type': 'application/json',
1514
},
16-
body: JSON.stringify(body),
15+
// 发送空body即可
16+
body: JSON.stringify({}),
1717
});
1818

1919
const data = await response.json();

‎chuan-next/src/components/WeChatGroup.tsx‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
"use client";
2+
3+
import React from 'react';
4+
import { Users } from 'lucide-react';
5+
6+
export default function WeChatGroup() {
7+
return (
8+
<div className="bg-white/80 backdrop-blur-sm rounded-xl shadow-lg p-6 sm:p-8 animate-fade-in-up">
9+
<div className="text-center">
10+
{/* 标题 */}
11+
<div className="mb-6">
12+
<div className="w-12 h-12 bg-gradient-to-br from-green-500 to-emerald-500 rounded-xl flex items-center justify-center mx-auto mb-4">
13+
<Users className="w-6 h-6 text-white" />
14+
</div>
15+
<h2 className="text-2xl font-bold text-slate-800 mb-2">加入微信交流群</h2>
16+
<p className="text-slate-600 text-lg">
17+
佬们有意见/建议/bug反馈或者奇思妙想想来交流，可以扫码加入
18+
</p>
19+
</div>
20+
21+
{/* 二维码区域 */}
22+
<div className="flex justify-center mb-6">
23+
<div className="bg-white rounded-2xl p-6 shadow-lg border border-slate-200">
24+
{/* 微信群二维码 - 请将此区域替换为实际的二维码图片 */}
25+
<div className="relative">
26+
<img
27+
src="https://cdn-img.luxika.cc//i/2025/08/25/68abd75c363a6.png"
28+
alt="微信群二维码"
29+
className="w-64 h-64 rounded-xl"
30+
/>
31+
</div>
32+
</div>
33+
</div>
34+
35+
{/* 说明文字 */}
36+
<div className="bg-green-50 rounded-xl p-6 border border-green-200">
37+
<div className="text-sm text-green-700 space-y-2">
38+
<p className="text-base font-semibold text-green-800 mb-3">🎉 欢迎加入我们的交流群！</p>
39+
40+
<div className="grid grid-cols-1 sm:grid-cols-2 gap-2 text-left">
41+
<div className="flex items-center space-x-2">
42+
<span>💬</span>
43+
<span>分享使用心得和建议</span>
44+
</div>
45+
<div className="flex items-center space-x-2">
46+
<span>🐛</span>
47+
<span>反馈问题和bug</span>
48+
</div>
49+
<div className="flex items-center space-x-2">
50+
<span>💡</span>
51+
<span>提出新功能想法</span>
52+
</div>
53+
<div className="flex items-center space-x-2">
54+
<span>🤝</span>
55+
<span>与其他用户交流技术</span>
56+
</div>
57+
</div>
58+
</div>
59+
</div>
60+
61+
{/* 额外信息 */}
62+
<div className="mt-4 text-xs text-slate-500">
63+
<p>群内禁止广告和无关内容，专注技术交流</p>
64+
</div>
65+
</div>
66+
</div>
67+
);
68+
}

0 commit comments

Comments
 (0)