feat添加切换tab提示

chuan-next/src/hooks/ui/useTabNavigation.ts

@@ -0,0 +1,171 @@
+import { useState, useEffect, useCallback } from 'react';
+import { useSearchParams } from 'next/navigation';
+import { useURLHandler, FeatureType } from './useURLHandler';
+import { useWebRTCStore } from './webRTCStore';
+import { useConfirmDialog } from './useConfirmDialog';
+
+// Tab类型定义（包括非WebRTC功能）
+export type TabType = 'webrtc' | 'message' | 'desktop' | 'wechat';
+
+// Tab显示名称
+const TAB_NAMES: Record<TabType, string> = {
+  webrtc: '文件传输',
+  message: '文字传输',
+  desktop: '桌面共享',
+  wechat: '微信群'
+};
+
+// WebRTC功能的映射
+const WEBRTC_FEATURES: Record<string, FeatureType> = {
+  webrtc: 'webrtc',
+  message: 'message',
+  desktop: 'desktop'
+};
+
+export const useTabNavigation = () => {
+  const searchParams = useSearchParams();
+  const [activeTab, setActiveTab] = useState<TabType>('webrtc');
+  const [hasInitialized, setHasInitialized] = useState(false);
+  const { showConfirmDialog, dialogState, closeDialog } = useConfirmDialog();
+  
+  // 获取WebRTC全局状态
+  const { 
+    isConnected, 
+    isConnecting, 
+    isPeerConnected,
+    currentRoom,
+    reset: resetWebRTCState 
+  } = useWebRTCStore();
+
+  // 创建一个通用的URL处理器（用于断开连接）
+  const { hasActiveConnection } = useURLHandler({
+    featureType: 'webrtc', // 默认值，实际使用时会被覆盖
+    onModeChange: () => {},
+  });
+
+  // 根据URL参数设置初始标签（仅首次加载时）
+  useEffect(() => {
+    if (!hasInitialized) {
+      const urlType = searchParams.get('type');
+      
+      console.log('=== HomePage URL处理 ===');
+      console.log('URL type参数:', urlType);
+      console.log('所有搜索参数:', Object.fromEntries(searchParams.entries()));
+      
+      // 将旧的text类型重定向到message
+      if (urlType === 'text') {
+        console.log('检测到text类型，重定向到message标签页');
+        setActiveTab('message');
+      } else if (urlType === 'webrtc') {
+        console.log('检测到webrtc类型，切换到webrtc标签页（文件传输）');
+        setActiveTab('webrtc');
+      } else if (urlType && ['message', 'desktop'].includes(urlType)) {
+        console.log('切换到对应标签页:', urlType);
+        setActiveTab(urlType as TabType);
+      } else {
+        console.log('没有有效的type参数，使用默认标签页：webrtc（文件传输）');
+        // 保持默认的webrtc标签
+      }
+      
+      setHasInitialized(true);
+    }
+  }, [searchParams, hasInitialized]);
+
+  // 处理tab切换
+  const handleTabChange = useCallback(async (newTab: TabType) => {
+    console.log('=== Tab切换 ===');
+    console.log('当前tab:', activeTab, '目标tab:', newTab);
+    
+    // 如果切换到wechat tab（非WebRTC功能），可以直接切换
+    if (newTab === 'wechat') {
+      // 如果有活跃连接，需要确认
+      if (hasActiveConnection()) {
+        const currentTabName = TAB_NAMES[activeTab];
+        const confirmed = await showConfirmDialog({
+          title: '切换功能确认',
+          message: `切换到微信群功能需要关闭当前的${currentTabName}连接，是否继续？`,
+          confirmText: '确认切换',
+          cancelText: '取消',
+          type: 'warning'
+        });
+        
+        if (!confirmed) {
+          return false;
+        }
+        
+        // 断开连接并清除状态
+        resetWebRTCState();
+        console.log('已清除WebRTC连接状态，切换到微信群');
+      }
+      
+      setActiveTab(newTab);
+      // 清除URL参数
+      const newUrl = new URL(window.location.href);
+      newUrl.search = '';
+      window.history.pushState({}, '', newUrl.toString());
+      return true;
+    }
+
+    // 如果有活跃连接且切换到不同的WebRTC功能，需要确认
+    if (hasActiveConnection() && newTab !== activeTab && WEBRTC_FEATURES[newTab]) {
+      const currentTabName = TAB_NAMES[activeTab];
+      const targetTabName = TAB_NAMES[newTab];
+      
+      const confirmed = await showConfirmDialog({
+        title: '切换功能确认',
+        message: `切换到${targetTabName}功能需要关闭当前的${currentTabName}连接，是否继续？`,
+        confirmText: '确认切换',
+        cancelText: '取消',
+        type: 'warning'
+      });
+      
+      if (!confirmed) {
+        return false;
+      }
+
+      // 用户确认后，重置WebRTC状态
+      resetWebRTCState();
+      console.log(`已断开${currentTabName}连接，切换到${targetTabName}`);
+    }
+
+    // 执行tab切换
+    setActiveTab(newTab);
+    
+    // 更新URL（对于WebRTC功能）
+    if (WEBRTC_FEATURES[newTab]) {
+      const params = new URLSearchParams();
+      params.set('type', WEBRTC_FEATURES[newTab]);
+      params.set('mode', 'send'); // 默认模式
+      const newUrl = `?${params.toString()}`;
+      window.history.pushState({}, '', newUrl);
+    } else {
+      // 非WebRTC功能，清除URL参数
+      const newUrl = new URL(window.location.href);
+      newUrl.search = '';
+      window.history.pushState({}, '', newUrl.toString());
+    }
+    
+    return true;
+  }, [activeTab, hasActiveConnection, resetWebRTCState]);
+
+  // 获取连接状态信息
+  const getConnectionInfo = useCallback(() => {
+    return {
+      hasConnection: hasActiveConnection(),
+      currentRoom: currentRoom,
+      isConnected,
+      isConnecting,
+      isPeerConnected
+    };
+  }, [hasActiveConnection, currentRoom, isConnected, isConnecting, isPeerConnected]);
+
+  return {
+    activeTab,
+    handleTabChange,
+    getConnectionInfo,
+    hasInitialized,
+    // 导出确认对话框状态
+    confirmDialogState: dialogState,
+    closeConfirmDialog: closeDialog
+  };
+};