-
+ ; // 返回取件码
+ onReceiveText?: (code: string) => Promise; // 返回文本内容
+ websocket?: WebSocket | null;
+ isConnected?: boolean;
+ currentRole?: 'sender' | 'receiver';
+ pickupCode?: string;
+}
+
+export default function TextTransfer({
+ onSendText,
+ onReceiveText,
+ websocket,
+ isConnected = false,
+ currentRole,
+ pickupCode
+}: TextTransferProps) {
+ const searchParams = useSearchParams();
+ const router = useRouter();
+ const [mode, setMode] = useState<'send' | 'receive'>('send');
+ const [textContent, setTextContent] = useState('');
+ const [roomCode, setRoomCode] = useState('');
+ const [receivedText, setReceivedText] = useState('');
+ const [isLoading, setIsLoading] = useState(false);
+ const [isRoomCreated, setIsRoomCreated] = useState(false);
+ const [connectedUsers, setConnectedUsers] = useState(0);
+ const [images, setImages] = useState([]);
+ const { showToast } = useToast();
+ const textareaRef = useRef(null);
+ const updateTimeoutRef = useRef(null);
+
+ // 从URL参数中获取初始模式
+ useEffect(() => {
+ const urlMode = searchParams.get('mode') as 'send' | 'receive';
+ const type = searchParams.get('type');
+
+ if (type === 'text' && urlMode && ['send', 'receive'].includes(urlMode)) {
+ setMode(urlMode);
+ }
+ }, [searchParams]);
+
+ // 监听WebSocket消息
+ useEffect(() => {
+ if (!websocket) return;
+
+ const handleMessage = (event: MessageEvent) => {
+ try {
+ const message = JSON.parse(event.data);
+ console.log('TextTransfer收到消息:', message);
+
+ switch (message.type) {
+ case 'text-update':
+ // 实时更新文字内容
+ if (message.payload?.text !== undefined) {
+ setReceivedText(message.payload.text);
+ if (currentRole === 'receiver') {
+ setTextContent(message.payload.text);
+ }
+ }
+ break;
+
+ case 'text-send':
+ // 接收到发送的文字
+ if (message.payload?.text) {
+ setReceivedText(message.payload.text);
+ showToast('收到新的文字内容！', 'success');
+ }
+ break;
+
+ case 'image-send':
+ // 接收到发送的图片
+ if (message.payload?.imageData) {
+ setImages(prev => [...prev, message.payload.imageData]);
+ showToast('收到新的图片！', 'success');
+ }
+ break;
+
+ case 'room-status':
+ // 更新房间状态
+ if (message.payload?.sender_count !== undefined && message.payload?.receiver_count !== undefined) {
+ setConnectedUsers(message.payload.sender_count + message.payload.receiver_count);
+ }
+ break;
+ }
+ } catch (error) {
+ console.error('解析WebSocket消息失败:', error);
+ }
+ };
+
+ websocket.addEventListener('message', handleMessage);
+ return () => websocket.removeEventListener('message', handleMessage);
+ }, [websocket, currentRole, showToast]);
+
+ // 更新URL参数
+ const updateMode = useCallback((newMode: 'send' | 'receive') => {
+ setMode(newMode);
+ const params = new URLSearchParams(searchParams.toString());
+ params.set('type', 'text');
+ params.set('mode', newMode);
+ router.push(`?${params.toString()}`, { scroll: false });
+ }, [searchParams, router]);
+
+ // 发送实时文字更新
+ const sendTextUpdate = useCallback((text: string) => {
+ if (!websocket || !isConnected || !isRoomCreated) return;
+
+ // 清除之前的定时器
+ if (updateTimeoutRef.current) {
+ clearTimeout(updateTimeoutRef.current);
+ }
+
+ // 设置新的定时器，防抖动
+ updateTimeoutRef.current = setTimeout(() => {
+ websocket.send(JSON.stringify({
+ type: 'text-update',
+ payload: { text }
+ }));
+ }, 300); // 300ms防抖
+ }, [websocket, isConnected, isRoomCreated]);
+
+ // 处理文字输入
+ const handleTextChange = useCallback((e: React.ChangeEvent) => {
+ const newText = e.target.value;
+ setTextContent(newText);
+
+ // 如果是发送方且房间已创建，发送实时更新
+ if (currentRole === 'sender' && isRoomCreated) {
+ sendTextUpdate(newText);
+ }
+ }, [currentRole, isRoomCreated, sendTextUpdate]);
+
+ // 创建文字传输房间
+ const handleCreateRoom = useCallback(async () => {
+ if (!textContent.trim()) {
+ showToast('请输入要传输的文字内容', 'error');
+ return;
+ }
+
+ setIsLoading(true);
+ try {
+ if (onSendText) {
+ const code = await onSendText(textContent);
+ setRoomCode(code);
+ setIsRoomCreated(true);
+ showToast('房间创建成功！', 'success');
+ }
+ } catch (error) {
+ console.error('创建房间失败:', error);
+ showToast('创建房间失败，请重试', 'error');
+ } finally {
+ setIsLoading(false);
+ }
+ }, [textContent, onSendText, showToast]);
+
+ // 加入房间
+ const handleJoinRoom = useCallback(async () => {
+ if (!roomCode.trim() || roomCode.length !== 6) {
+ showToast('请输入正确的6位房间码', 'error');
+ return;
+ }
+
+ setIsLoading(true);
+ try {
+ if (onReceiveText) {
+ const text = await onReceiveText(roomCode);
+ setReceivedText(text);
+ showToast('成功加入房间！', 'success');
+ }
+ } catch (error) {
+ console.error('加入房间失败:', error);
+ showToast('加入房间失败，请检查房间码', 'error');
+ } finally {
+ setIsLoading(false);
+ }
+ }, [roomCode, onReceiveText, showToast]);
+
+ // 发送文字
+ const handleSendText = useCallback(() => {
+ if (!websocket || !isConnected || !textContent.trim()) return;
+
+ websocket.send(JSON.stringify({
+ type: 'text-send',
+ payload: { text: textContent }
+ }));
+
+ showToast('文字已发送！', 'success');
+ }, [websocket, isConnected, textContent, showToast]);
+
+ // 处理图片粘贴
+ const handlePaste = useCallback((e: React.ClipboardEvent) => {
+ const items = e.clipboardData?.items;
+ if (!items) return;
+
+ for (let i = 0; i < items.length; i++) {
+ const item = items[i];
+ if (item.type.indexOf('image') !== -1) {
+ const file = item.getAsFile();
+ if (file) {
+ const reader = new FileReader();
+ reader.onload = (event) => {
+ const imageData = event.target?.result as string;
+ setImages(prev => [...prev, imageData]);
+
+ // 发送图片给其他用户
+ if (websocket && isConnected) {
+ websocket.send(JSON.stringify({
+ type: 'image-send',
+ payload: { imageData }
+ }));
+ showToast('图片已发送！', 'success');
+ }
+ };
+ reader.readAsDataURL(file);
+ }
+ }
+ }
+ }, [websocket, isConnected, showToast]);
+
+ const copyToClipboard = useCallback(async (text: string) => {
+ try {
+ await navigator.clipboard.writeText(text);
+ showToast('已复制到剪贴板！', 'success');
+ } catch (err) {
+ showToast('复制失败', 'error');
+ }
+ }, [showToast]);
+
+ return (
+ ; // 返回取件码
onReceiveText?: (code: string) => Promise; // 返回文本内容
+ websocket?: WebSocket | null;
+ isConnected?: boolean;
+ currentRole?: 'sender' | 'receiver';
+ pickupCode?: string;
+ onCreateWebSocket?: (code: string, role: 'sender' | 'receiver') => void; // 创建WebSocket连接
}
-export default function TextTransfer({ onSendText, onReceiveText }: TextTransferProps) {
+export default function TextTransfer({
+ onSendText,
+ onReceiveText,
+ websocket,
+ isConnected = false,
+ currentRole,
+ pickupCode,
+ onCreateWebSocket
+}: TextTransferProps) {
const searchParams = useSearchParams();
const router = useRouter();
const [mode, setMode] = useState<'send' | 'receive'>('send');
const [textContent, setTextContent] = useState('');
- const [pickupCode, setPickupCode] = useState('');
+ const [roomCode, setRoomCode] = useState('');
const [receivedText, setReceivedText] = useState('');
const [isLoading, setIsLoading] = useState(false);
+ const [isRoomCreated, setIsRoomCreated] = useState(false);
+ const [connectedUsers, setConnectedUsers] = useState(0);
+ const [images, setImages] = useState([]);
const { showToast } = useToast();
+ const textareaRef = useRef(null);
+ const updateTimeoutRef = useRef(null);
- // 从URL参数中获取初始模式
+ // 从URL参数中获取初始模式和房间码
useEffect(() => {
const urlMode = searchParams.get('mode') as 'send' | 'receive';
const type = searchParams.get('type');
+ const urlCode = searchParams.get('code');
if (type === 'text' && urlMode && ['send', 'receive'].includes(urlMode)) {
setMode(urlMode);
+
+ // 如果URL中有房间码且是接收模式，自动填入房间码
+ if (urlMode === 'receive' && urlCode && urlCode.length === 6) {
+ setRoomCode(urlCode.toUpperCase());
+ // 自动尝试加入房间
+ setTimeout(() => {
+ if (onReceiveText) {
+ handleJoinRoomWithCode(urlCode.toUpperCase());
+ }
+ }, 500); // 延迟500ms确保组件完全初始化
+ }
}
}, [searchParams]);
+ // 处理通过URL参数自动加入房间
+ const handleJoinRoomWithCode = useCallback(async (code: string) => {
+ if (!code || code.length !== 6) return;
+
+ setIsLoading(true);
+ try {
+ if (onReceiveText) {
+ const text = await onReceiveText(code);
+ if (text) {
+ setReceivedText(text);
+ showToast('自动加入房间成功！', 'success');
+
+ // 创建WebSocket连接用于实时同步
+ if (onCreateWebSocket) {
+ onCreateWebSocket(code, 'receiver');
+ }
+ }
+ }
+ } catch (error) {
+ console.error('自动加入房间失败:', error);
+ // 错误信息已经在HomePage中处理了
+ } finally {
+ setIsLoading(false);
+ }
+ }, [onReceiveText, onCreateWebSocket, showToast]);
+
+ // 监听WebSocket消息
+ useEffect(() => {
+ if (!websocket) return;
+
+ const handleMessage = (event: MessageEvent) => {
+ try {
+ const message = JSON.parse(event.data);
+ console.log('TextTransfer收到消息:', message);
+
+ switch (message.type) {
+ case 'text-update':
+ // 实时更新文字内容
+ if (message.payload?.text !== undefined) {
+ setReceivedText(message.payload.text);
+ if (currentRole === 'receiver') {
+ setTextContent(message.payload.text);
+ }
+ }
+ break;
+
+ case 'text-send':
+ // 接收到发送的文字
+ if (message.payload?.text) {
+ setReceivedText(message.payload.text);
+ showToast('收到新的文字内容！', 'success');
+ }
+ break;
+
+ case 'image-send':
+ // 接收到发送的图片
+ if (message.payload?.imageData) {
+ setImages(prev => [...prev, message.payload.imageData]);
+ showToast('收到新的图片！', 'success');
+ }
+ break;
+
+ case 'room-status':
+ // 更新房间状态
+ if (message.payload?.sender_count !== undefined && message.payload?.receiver_count !== undefined) {
+ setConnectedUsers(message.payload.sender_count + message.payload.receiver_count);
+ }
+ break;
+ }
+ } catch (error) {
+ console.error('解析WebSocket消息失败:', error);
+ }
+ };
+
+ websocket.addEventListener('message', handleMessage);
+ return () => websocket.removeEventListener('message', handleMessage);
+ }, [websocket, currentRole, showToast]);
+
// 更新URL参数
const updateMode = useCallback((newMode: 'send' | 'receive') => {
setMode(newMode);
@@ -41,37 +149,135 @@ export default function TextTransfer({ onSendText, onReceiveText }: TextTransfer
router.push(`?${params.toString()}`, { scroll: false });
}, [searchParams, router]);
- const handleSendText = useCallback(async () => {
- if (!textContent.trim() || !onSendText) return;
-
- setIsLoading(true);
- try {
- const code = await onSendText(textContent);
- setPickupCode(code);
- showToast('文本已生成取件码！', 'success');
- } catch (error) {
- console.error('发送文本失败:', error);
- showToast('发送失败，请重试', 'error');
- } finally {
- setIsLoading(false);
- }
- }, [textContent, onSendText, showToast]);
+ // 发送实时文字更新
+ const sendTextUpdate = useCallback((text: string) => {
+ if (!websocket || !isConnected || !isRoomCreated) return;
- const handleReceiveText = useCallback(async () => {
- if (!pickupCode.trim() || !onReceiveText) return;
+ // 清除之前的定时器
+ if (updateTimeoutRef.current) {
+ clearTimeout(updateTimeoutRef.current);
+ }
+
+ // 设置新的定时器，防抖动
+ updateTimeoutRef.current = setTimeout(() => {
+ websocket.send(JSON.stringify({
+ type: 'text-update',
+ payload: { text }
+ }));
+ }, 300); // 300ms防抖
+ }, [websocket, isConnected, isRoomCreated]);
+
+ // 处理文字输入
+ const handleTextChange = useCallback((e: React.ChangeEvent) => {
+ const newText = e.target.value;
+ setTextContent(newText);
+ // 如果是发送方且房间已创建，发送实时更新
+ if (currentRole === 'sender' && isRoomCreated) {
+ sendTextUpdate(newText);
+ }
+ }, [currentRole, isRoomCreated, sendTextUpdate]);
+
+ // 创建文字传输房间
+ const handleCreateRoom = useCallback(async () => {
+ if (!textContent.trim()) {
+ showToast('请输入要传输的文字内容', 'error');
+ return;
+ }
+
setIsLoading(true);
try {
- const text = await onReceiveText(pickupCode);
- setReceivedText(text);
- showToast('文本接收成功！', 'success');
+ if (onSendText) {
+ const code = await onSendText(textContent);
+ if (code) { // 只有在成功创建房间时才设置状态和显示成功消息
+ setRoomCode(code);
+ setIsRoomCreated(true);
+ showToast('房间创建成功！', 'success');
+
+ // 创建WebSocket连接用于实时同步
+ if (onCreateWebSocket) {
+ onCreateWebSocket(code, 'sender');
+ }
+ }
+ }
} catch (error) {
- console.error('接收文本失败:', error);
- showToast('接收失败，请检查取件码', 'error');
+ console.error('创建房间失败:', error);
+ // 错误信息已经在HomePage中处理了，这里不再重复显示
} finally {
setIsLoading(false);
}
- }, [pickupCode, onReceiveText, showToast]);
+ }, [textContent, onSendText, onCreateWebSocket, showToast]);
+
+ // 加入房间
+ const handleJoinRoom = useCallback(async () => {
+ if (!roomCode.trim() || roomCode.length !== 6) {
+ showToast('请输入正确的6位房间码', 'error');
+ return;
+ }
+
+ setIsLoading(true);
+ try {
+ if (onReceiveText) {
+ const text = await onReceiveText(roomCode);
+ if (text) { // 只有在成功获取到文字时才设置状态和显示成功消息
+ setReceivedText(text);
+ showToast('成功加入房间！', 'success');
+
+ // 创建WebSocket连接用于实时同步
+ if (onCreateWebSocket) {
+ onCreateWebSocket(roomCode, 'receiver');
+ }
+ }
+ }
+ } catch (error) {
+ console.error('加入房间失败:', error);
+ // 错误信息已经在HomePage中处理了，这里不再重复显示
+ } finally {
+ setIsLoading(false);
+ }
+ }, [roomCode, onReceiveText, onCreateWebSocket, showToast]);
+
+ // 发送文字
+ const handleSendText = useCallback(() => {
+ if (!websocket || !isConnected || !textContent.trim()) return;
+
+ websocket.send(JSON.stringify({
+ type: 'text-send',
+ payload: { text: textContent }
+ }));
+
+ showToast('文字已发送！', 'success');
+ }, [websocket, isConnected, textContent, showToast]);
+
+ // 处理图片粘贴
+ const handlePaste = useCallback((e: React.ClipboardEvent) => {
+ const items = e.clipboardData?.items;
+ if (!items) return;
+
+ for (let i = 0; i < items.length; i++) {
+ const item = items[i];
+ if (item.type.indexOf('image') !== -1) {
+ const file = item.getAsFile();
+ if (file) {
+ const reader = new FileReader();
+ reader.onload = (event) => {
+ const imageData = event.target?.result as string;
+ setImages(prev => [...prev, imageData]);
+
+ // 发送图片给其他用户
+ if (websocket && isConnected) {
+ websocket.send(JSON.stringify({
+ type: 'image-send',
+ payload: { imageData }
+ }));
+ showToast('图片已发送！', 'success');
+ }
+ };
+ reader.readAsDataURL(file);
+ }
+ }
+ }
+ }, [websocket, isConnected, showToast]);
const copyToClipboard = useCallback(async (text: string) => {
try {
@@ -82,6 +288,13 @@ export default function TextTransfer({ onSendText, onReceiveText }: TextTransfer
}
}, [showToast]);
+ // 复制传输链接
+ const copyTransferLink = useCallback(async (code: string) => {
+ const currentUrl = window.location.origin + window.location.pathname;
+ const transferLink = `${currentUrl}?type=text&mode=receive&code=${code}`;
+ await copyToClipboard(transferLink);
+ }, [copyToClipboard]);
+
return (
@@ -113,54 +326,139 @@ export default function TextTransfer({ onSendText, onReceiveText }: TextTransfer
+
diff --git a/chuan-next/src/components/TextTransfer-new.tsx b/chuan-next/src/components/TextTransfer-new.tsx
new file mode 100644
index 0000000..f58c91a
--- /dev/null
+++ b/chuan-next/src/components/TextTransfer-new.tsx
@@ -0,0 +1,468 @@
+"use client";
+
+import React, { useState, useCallback, useEffect, useRef } from 'react';
+import { useSearchParams, useRouter } from 'next/navigation';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { MessageSquare, Copy, Send, Download, Image, Users } from 'lucide-react';
+import { useToast } from '@/components/ui/toast-simple';
+
+interface TextTransferProps {
+ onSendText?: (text: string) => Promise
+ {/* 模式切换 */}
+
+ );
+}
diff --git a/chuan-next/src/components/TextTransfer.tsx b/chuan-next/src/components/TextTransfer.tsx
index 173064f..08033b5 100644
--- a/chuan-next/src/components/TextTransfer.tsx
+++ b/chuan-next/src/components/TextTransfer.tsx
@@ -1,37 +1,145 @@
"use client";
-import React, { useState, useCallback, useEffect } from 'react';
+import React, { useState, useCallback, useEffect, useRef } from 'react';
import { useSearchParams, useRouter } from 'next/navigation';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
-import { MessageSquare, Copy, Send, Download } from 'lucide-react';
+import { MessageSquare, Copy, Send, Download, Image, Users, Link } from 'lucide-react';
import { useToast } from '@/components/ui/toast-simple';
interface TextTransferProps {
onSendText?: (text: string) => Promise
+
+
+ {mode === 'send' ? (
+
+
+
+
+
+
+ ) : (
+
+
+
+
+
+ 传送文字
++ {isRoomCreated ? '实时编辑，对方可以同步看到' : '输入要传输的文本内容'} +
+ {connectedUsers > 1 && ( +
+
+ )}
+
+
+
+
+ {isRoomCreated && (
+
+
+
+
+ )}
+
+
+ 实时同步
+
+
+ {textContent.length} 字符
+ 最大 50,000 字符
+
+
+ {!isRoomCreated ? (
+
+ ) : (
+
+
+ )}
+
+ {/* 图片展示区域 */}
+ {images.length > 0 && (
+
+
+
+
+ 房间码
+{roomCode}
+
+
+
+
+
+
+ )}
+
+
+
+ {images.map((img, index) => (
+
+
+ 
window.open(img, '_blank')}
+ />
+
+
+ ))}
+
+
+ )}
+
+
+
+
+
+ 接收文字
+输入6位房间码来获取文字内容
+
+ setRoomCode(e.target.value.toUpperCase().slice(0, 6))}
+ placeholder="请输入房间码"
+ className="text-center text-2xl sm:text-3xl tracking-[0.3em] sm:tracking-[0.5em] font-mono h-12 sm:h-16 border-2 border-slate-200 rounded-xl focus:border-emerald-500 focus:ring-emerald-500 bg-white/80 backdrop-blur-sm"
+ maxLength={6}
+ disabled={isLoading}
+ />
+
+
+
+ {(receivedText || textContent) && (
+
+
+
+ )}
+
+ {/* 接收到的图片展示 */}
+ {images.length > 0 && (
+
+
+ {currentRole === 'receiver' && isConnected && (
+
+
+
+
+ )}
+
+
+ 实时同步
+
+
+
+
+
+ )}
+
+
+
+ {images.map((img, index) => (
+
+
+ window.open(img, '_blank')}
+ />
+
+
+ ))}
+
{/* 模式切换 */}
@@ -93,7 +306,7 @@ export default function TextTransfer({ onSendText, onReceiveText }: TextTransfer
className="px-6 py-2 rounded-lg"
>
传送文字
-输入要传输的文本内容
++ {isRoomCreated ? '实时编辑，对方可以同步看到' : '输入要传输的文本内容'} +
+ {/* 连接状态显示 */} +
+ {isRoomCreated && (
+
+
+ )}
+
+
+
+ {isConnected ? '实时连接已建立' : '连接断开'}
+
+
+ {connectedUsers > 0 && (
+
+
+ )}
+
-