feat:UI大调整,WEBRTC切换

chuan-next/src/components/DesktopShare.tsx

@@ -133,15 +133,58 @@ export default function DesktopShare({ onStartSharing, onStopSharing, onJoinShar
       </div>
 
       {mode === 'share' ? (
-        <div className="glass-card rounded-2xl p-4 sm:p-6 animate-fade-in-up">
-          <div className="text-center mb-6">
-            <div className="w-12 h-12 sm:w-16 sm:h-16 mx-auto mb-4 bg-gradient-to-br from-purple-500 to-pink-500 rounded-2xl flex items-center justify-center animate-float">
-              <Share className="w-6 h-6 sm:w-8 sm:h-8 text-white" />
+        <div className="bg-white/80 backdrop-blur-sm rounded-xl shadow-lg p-4 sm:p-6 animate-fade-in-up">
+          {/* 功能标题和状态 */}
+          <div className="flex items-center mb-6">
+            <div className="flex items-center space-x-3 flex-1">
+              <div className="w-10 h-10 bg-gradient-to-br from-purple-500 to-pink-500 rounded-xl flex items-center justify-center">
+                <Share className="w-5 h-5 text-white" />
+              </div>
+              <div>
+                <h2 className="text-lg font-semibold text-slate-800">共享桌面</h2>
+                <p className="text-sm text-slate-600">
+                  {isSharing ? '桌面共享进行中' : '开始共享您的桌面屏幕'}
+                </p>
+              </div>
+            </div>
+            
+            {/* 竖线分割 */}
+            <div className="w-px h-12 bg-slate-200 mx-4"></div>
+            
+            {/* 状态显示 */}
+            <div className="text-right">
+              <div className="text-sm text-slate-500 mb-1">连接状态</div>
+              <div className="flex items-center justify-end space-x-3 text-sm">
+                {/* WebSocket状态 */}
+                <div className="flex items-center space-x-1">
+                  <div className="w-2 h-2 rounded-full bg-slate-400"></div>
+                  <span className="text-slate-600">WS</span>
+                </div>
+                
+                {/* 分隔符 */}
+                <div className="text-slate-300">|</div>
+                
+                {/* WebRTC状态 */}
+                <div className="flex items-center space-x-1">
+                  {isSharing ? (
+                    <>
+                      <div className="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></div>
+                      <span className="text-emerald-600">RTC</span>
+                    </>
+                  ) : (
+                    <>
+                      <div className="w-2 h-2 rounded-full bg-slate-400"></div>
+                      <span className="text-slate-600">RTC</span>
+                    </>
+                  )}
+                </div>
+              </div>
+              {isSharing && connectionCode && (
+                <div className="mt-1 text-xs text-purple-600">
+                  {connectionCode}
+                </div>
+              )}
             </div>
-            <h2 className="text-xl sm:text-2xl font-semibold text-slate-800 mb-2">共享桌面</h2>
-            <p className="text-sm sm:text-base text-slate-600">
-              {isSharing ? '桌面共享进行中' : '开始共享您的桌面屏幕'}
-            </p>
           </div>
 
           <div className="space-y-4">
@@ -202,15 +245,63 @@ export default function DesktopShare({ onStartSharing, onStopSharing, onJoinShar
           </div>
         </div>
       ) : (
-        <div className="glass-card rounded-2xl p-4 sm:p-6 animate-fade-in-up">
-          <div className="text-center mb-6">
-            <div className="w-12 h-12 sm:w-16 sm:h-16 mx-auto mb-4 bg-gradient-to-br from-indigo-500 to-purple-500 rounded-2xl flex items-center justify-center animate-float">
-              <Monitor className="w-6 h-6 sm:w-8 sm:h-8 text-white" />
+        <div className="bg-white/80 backdrop-blur-sm rounded-xl shadow-lg p-4 sm:p-6 animate-fade-in-up">
+          {/* 功能标题和状态 */}
+          <div className="flex items-center mb-6">
+            <div className="flex items-center space-x-3 flex-1">
+              <div className="w-10 h-10 bg-gradient-to-br from-indigo-500 to-purple-500 rounded-xl flex items-center justify-center">
+                <Monitor className="w-5 h-5 text-white" />
+              </div>
+              <div>
+                <h2 className="text-lg font-semibold text-slate-800">观看桌面</h2>
+                <p className="text-sm text-slate-600">
+                  {isViewing ? '正在观看桌面共享' : '输入连接码观看他人的桌面'}
+                </p>
+              </div>
+            </div>
+            
+            {/* 竖线分割 */}
+            <div className="w-px h-12 bg-slate-200 mx-4"></div>
+            
+            {/* 状态显示 */}
+            <div className="text-right">
+              <div className="text-sm text-slate-500 mb-1">连接状态</div>
+              <div className="flex items-center justify-end space-x-3 text-sm">
+                {/* WebSocket状态 */}
+                <div className="flex items-center space-x-1">
+                  <div className="w-2 h-2 rounded-full bg-slate-400"></div>
+                  <span className="text-slate-600">WS</span>
+                </div>
+                
+                {/* 分隔符 */}
+                <div className="text-slate-300">|</div>
+                
+                {/* WebRTC状态 */}
+                <div className="flex items-center space-x-1">
+                  {isViewing ? (
+                    <>
+                      <div className="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></div>
+                      <span className="text-emerald-600">RTC</span>
+                    </>
+                  ) : isLoading ? (
+                    <>
+                      <div className="w-2 h-2 rounded-full bg-orange-500 animate-pulse"></div>
+                      <span className="text-orange-600">RTC</span>
+                    </>
+                  ) : (
+                    <>
+                      <div className="w-2 h-2 rounded-full bg-slate-400"></div>
+                      <span className="text-slate-600">RTC</span>
+                    </>
+                  )}
+                </div>
+              </div>
+              {isViewing && (
+                <div className="mt-1 text-xs text-indigo-600">
+                  观看中
+                </div>
+              )}
             </div>
-            <h2 className="text-xl sm:text-2xl font-semibold text-slate-800 mb-2">观看桌面</h2>
-            <p className="text-sm sm:text-base text-slate-600">
-              {isViewing ? '正在观看桌面共享' : '输入连接码观看他人的桌面'}
-            </p>
           </div>
 
           <div className="space-y-4">