From a5bda182cbc814f06ddc4c5971cd07579c9f325e Mon Sep 17 00:00:00 2001
From: MatrixSeven <hacker.kill07@gmail.com>
Date: Thu, 7 Aug 2025 14:18:44 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E4=BC=A0=E8=BE=93=E5=9B=BE=E7=89=87?=
 =?UTF-8?q?=E9=A2=84=E8=A7=88=E6=94=AF=E6=8C=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 chuan-next/src/app/HomePage.tsx            |   4 +-
 chuan-next/src/components/TextTransfer.tsx | 108 ++++++++++-----------
 2 files changed, 56 insertions(+), 56 deletions(-)

diff --git a/chuan-next/src/app/HomePage.tsx b/chuan-next/src/app/HomePage.tsx
index f5e160e..9c039e9 100644
--- a/chuan-next/src/app/HomePage.tsx
+++ b/chuan-next/src/app/HomePage.tsx
@@ -10,7 +10,7 @@ import TextTransferWrapper from '@/components/TextTransferWrapper';
 
 export default function HomePage() {
   const searchParams = useSearchParams();
-  const [activeTab, setActiveTab] = useState('message');
+  const [activeTab, setActiveTab] = useState('webrtc');
   const [hasInitialized, setHasInitialized] = useState(false);
   
   // 根据URL参数设置初始标签（仅首次加载时）
@@ -34,7 +34,7 @@ export default function HomePage() {
         console.log('切换到对应标签页:', urlType);
         setActiveTab(urlType);
       } else {
-        console.log('没有有效的type参数，保持默认标签页');
+        console.log('没有有效的type参数，使用默认标签页：webrtc（文件传输）');
       }
       
       setHasInitialized(true);
diff --git a/chuan-next/src/components/TextTransfer.tsx b/chuan-next/src/components/TextTransfer.tsx
index f05fbb7..d5b760c 100644
--- a/chuan-next/src/components/TextTransfer.tsx
+++ b/chuan-next/src/components/TextTransfer.tsx
@@ -752,6 +752,60 @@ export default function TextTransfer({
 
                 {/* 房间信息卡片 - 类似文件传输的布局 */}
                 <div className="space-y-6">
+                  {/* 已发送的图片 - 移到最上面 */}
+                  {mode === 'send' && sentImages.length > 0 && (
+                    <div className="bg-white/80 backdrop-blur-sm rounded-xl p-4 border border-slate-200">
+                      <h3 className="text-lg font-medium text-slate-800 mb-3 flex items-center">
+                        <Image className="w-5 h-5 mr-2" />
+                        已发送的图片 ({sentImages.length})
+                      </h3>
+                      <div className="grid grid-cols-2 sm:grid-cols-3 gap-3">
+                        {sentImages.map((img, index) => (
+                          <div key={index} className="relative group overflow-hidden">
+                            <img 
+                              src={img} 
+                              alt={`图片 ${index + 1}`}
+                              className="w-full h-24 object-cover rounded-lg border-2 border-slate-200 hover:border-blue-400 transition-all duration-200 cursor-pointer bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-50"
+                              onClick={() => setPreviewImage(img)}
+                              onError={(e) => {
+                                console.error('图片加载失败:', img);
+                                e.currentTarget.style.display = 'none';
+                              }}
+                            />                            
+                            {/* 悬浮按钮组 */}
+                            <div className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity flex gap-1">
+                              <button
+                                onClick={(e) => {
+                                  e.stopPropagation();
+                                  setPreviewImage(img);
+                                }}
+                                className="p-1.5 bg-white bg-opacity-90 hover:bg-opacity-100 rounded-md shadow-sm transition-all hover:scale-105"
+                                title="预览图片"
+                              >
+                                <Eye className="w-3.5 h-3.5 text-slate-600" />
+                              </button>
+                              <button
+                                onClick={(e) => {
+                                  e.stopPropagation();
+                                  downloadImage(img, index);
+                                }}
+                                className="p-1.5 bg-white bg-opacity-90 hover:bg-opacity-100 rounded-md shadow-sm transition-all hover:scale-105"
+                                title="下载图片"
+                              >
+                                <Download className="w-3.5 h-3.5 text-slate-600" />
+                              </button>
+                            </div>
+                            
+                            {/* 图片序号 */}
+                            <div className="absolute bottom-1 left-1 bg-black bg-opacity-50 text-white text-xs px-1.5 py-0.5 rounded">
+                              {index + 1}
+                            </div>
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                  )}
+
                   {/* 左上角状态提示 - 类似已选择文件的风格 */}
                   <div className="flex items-center">
                     <div className="flex items-center space-x-3">
@@ -824,60 +878,6 @@ export default function TextTransfer({
                 </div>
               </div>
             )}
-
-            {/* 发送方显示已发送的图片 */}
-            {mode === 'send' && sentImages.length > 0 && (
-              <div className="mt-6">
-                <h3 className="text-lg font-medium text-slate-800 mb-3 flex items-center">
-                  <Image className="w-5 h-5 mr-2" />
-                  已发送的图片 ({sentImages.length})
-                </h3>
-                <div className="grid grid-cols-2 sm:grid-cols-3 gap-3">
-                  {sentImages.map((img, index) => (
-                    <div key={index} className="relative group overflow-hidden">
-                      <img 
-                        src={img} 
-                        alt={`图片 ${index + 1}`}
-                        className="w-full h-24 object-cover rounded-lg border-2 border-slate-200 hover:border-blue-400 transition-all duration-200 cursor-pointer bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-50"
-                        onClick={() => setPreviewImage(img)}
-                        onError={(e) => {
-                          console.error('图片加载失败:', img);
-                          e.currentTarget.style.display = 'none';
-                        }}
-                      />                      
-                      {/* 悬浮按钮组 */}
-                      <div className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity flex gap-1">
-                        <button
-                          onClick={(e) => {
-                            e.stopPropagation();
-                            setPreviewImage(img);
-                          }}
-                          className="p-1.5 bg-white bg-opacity-90 hover:bg-opacity-100 rounded-md shadow-sm transition-all hover:scale-105"
-                          title="预览图片"
-                        >
-                          <Eye className="w-3.5 h-3.5 text-slate-600" />
-                        </button>
-                        <button
-                          onClick={(e) => {
-                            e.stopPropagation();
-                            downloadImage(img, index);
-                          }}
-                          className="p-1.5 bg-white bg-opacity-90 hover:bg-opacity-100 rounded-md shadow-sm transition-all hover:scale-105"
-                          title="下载图片"
-                        >
-                          <Download className="w-3.5 h-3.5 text-slate-600" />
-                        </button>
-                      </div>
-                      
-                      {/* 图片序号 */}
-                      <div className="absolute bottom-1 left-1 bg-black bg-opacity-50 text-white text-xs px-1.5 py-0.5 rounded">
-                        {index + 1}
-                      </div>
-                    </div>
-                  ))}
-                </div>
-              </div>
-            )}
           </div>
         </div>
       ) : (