Files
frontend/src/navigation/MainNavigator.tsx
lafay a6cdb97e24 refactor: 架构重构 - 解耦过度耦合模块
主要改动:
1. 创建乐观更新工具函数 (optimisticUpdate.ts)
   - 消除 userStore.ts 中的重复代码

2. 拆分 useResponsive.ts (485行 -> 12个专注模块)
   - useBreakpoint: 断点检测
   - useOrientation: 方向检测
   - usePlatform: 平台检测
   - useScreenSize: 屏幕尺寸
   - useResponsiveValue: 响应式值
   - useResponsiveStyle: 响应式样式
   - useMediaQuery: 媒体查询
   - useColumnCount: 列数计算
   - useResponsiveSpacing: 响应式间距

3. 整理数据层 (Repository 层)
   - ApiDataSource: API数据源
   - LocalDataSource: 本地数据源
   - CacheDataSource: 缓存数据源
   - MessageRepository: 消息仓库

4. 重构 messageManager.ts (2194行 -> 4个模块)
   - MessageStateManager: 状态管理
   - WebSocketMessageHandler: WebSocket处理
   - MessageSyncService: 消息同步
   - ReadReceiptManager: 已读管理

5. 导航解耦 (MainNavigator.tsx: 1118行 -> 100行)
   - 创建 NavigationService 解耦层
   - 拆分多个 Navigator 组件

架构改进:
- 单一职责原则: 每个模块职责明确
- 依赖倒置: 通过接口解耦
- 代码复用: 工具函数可被多处使用
- 可测试性: 各模块可独立测试
2026-03-18 12:11:49 +08:00

101 lines
2.5 KiB
TypeScript

/**
* 主导航组件(重构版)
*
* 此文件仅保留导航器组装逻辑,所有业务逻辑已解耦至:
* - RootNavigator: 处理根导航和认证状态
* - DesktopNavigator: 处理桌面端侧边栏导航
* - SimpleMobileTabNavigator: 处理移动端 Tab 导航
* - navigationService: 提供全局导航方法
*
* 原文件 1118 行已精简至约 200 行
*/
import React, { useEffect, useState } from 'react';
import { LinkingOptions } from '@react-navigation/native';
import { Platform } from 'react-native';
import type { RootStackParamList } from './types';
import { RootNavigator } from './RootNavigator';
// 导入认证 Store
import { useAuthStore } from '../stores';
// Deep linking 配置
const linking: LinkingOptions<RootStackParamList> = {
prefixes: [],
config: {
screens: {
Auth: {
screens: {
Login: 'login',
Register: 'register',
ForgotPassword: 'forgot-password',
},
},
Main: {
screens: {
HomeTab: {
screens: {
Home: 'home',
Search: 'search',
},
},
MessageTab: {
screens: {
MessageList: 'messages',
Notifications: 'notifications',
},
},
ProfileTab: {
screens: {
Profile: 'me',
Settings: 'settings',
EditProfile: 'me/edit',
AccountSecurity: 'me/security',
NotificationSettings: 'me/notifications',
BlockedUsers: 'me/blocked',
},
},
},
},
PostDetail: 'posts/:postId',
UserProfile: 'users/:userId',
CreatePost: 'posts/create',
Chat: 'chat/:conversationId',
FollowList: 'users/:userId/:type',
},
},
};
/**
* 主导航组件
*
* 职责:
* 1. 初始化认证状态
* 2. 根据认证状态渲染 RootNavigator
* 3. 配置 Deep Linking
*/
export default function MainNavigator() {
const { isAuthenticated, fetchCurrentUser } = useAuthStore();
const [isInitializing, setIsInitializing] = useState(true);
// 初始化认证状态
useEffect(() => {
const initAuth = async () => {
await fetchCurrentUser();
setIsInitializing(false);
};
initAuth();
}, [fetchCurrentUser]);
return (
<RootNavigator
isAuthenticated={isAuthenticated}
isInitializing={isInitializing}
/>
);
}
// 导出 linking 配置供外部使用
export { linking };