主要改动: 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 组件 架构改进: - 单一职责原则: 每个模块职责明确 - 依赖倒置: 通过接口解耦 - 代码复用: 工具函数可被多处使用 - 可测试性: 各模块可独立测试
67 lines
1.9 KiB
TypeScript
67 lines
1.9 KiB
TypeScript
/**
|
|
* 响应式 Hooks 统一导出
|
|
* Responsive Hooks Index
|
|
*
|
|
* 提供完整的响应式设计解决方案,包括:
|
|
* - 断点检测 (useBreakpoint)
|
|
* - 屏幕尺寸 (useScreenSize, useWindowDimensions)
|
|
* - 响应式值 (useResponsiveValue, useResponsiveStyle)
|
|
* - 方向检测 (useOrientation)
|
|
* - 平台检测 (usePlatform)
|
|
* - 媒体查询 (useMediaQuery)
|
|
* - 列数计算 (useColumnCount)
|
|
* - 间距计算 (useResponsiveSpacing)
|
|
* - 断点检查 (useBreakpointGTE, useBreakpointLT, useBreakpointBetween)
|
|
*/
|
|
|
|
// ==================== 核心 Hooks ====================
|
|
export { useWindowDimensions, useScreenSize } from './useScreenSize';
|
|
export {
|
|
useBreakpoint,
|
|
useFineBreakpoint,
|
|
useBreakpointGTE,
|
|
useBreakpointLT,
|
|
useBreakpointBetween,
|
|
} from './useBreakpoint';
|
|
export { useResponsiveValue, useResponsiveStyle } from './useResponsiveValue';
|
|
export { useOrientation } from './useOrientation';
|
|
export { usePlatform } from './usePlatform';
|
|
export { useMediaQuery } from './useMediaQuery';
|
|
export { useColumnCount } from './useColumnCount';
|
|
export { useResponsiveSpacing } from './useResponsiveSpacing';
|
|
|
|
// ==================== 工具函数 ====================
|
|
export {
|
|
getBreakpoint,
|
|
getFineBreakpoint,
|
|
isBreakpointGTE,
|
|
isBreakpointLT,
|
|
isBreakpointBetween,
|
|
} from './useBreakpoint';
|
|
|
|
// ==================== 类型 ====================
|
|
export type {
|
|
BreakpointKey,
|
|
FineBreakpointKey,
|
|
BreakpointValue,
|
|
ResponsiveValue,
|
|
Orientation,
|
|
PlatformInfo,
|
|
ScreenSize,
|
|
MediaQueryOptions,
|
|
} from './types';
|
|
|
|
export {
|
|
BREAKPOINTS,
|
|
FINE_BREAKPOINTS,
|
|
} from './types';
|
|
|
|
// 兼容层类型
|
|
export type { ResponsiveInfo } from './useResponsive';
|
|
|
|
// ==================== 向后兼容 ====================
|
|
export { useResponsive, useLegacyResponsive } from './useResponsive';
|
|
|
|
// 默认导出
|
|
export { useScreenSize as default } from './useScreenSize';
|