a6cdb97e24
主要改动: 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 组件 架构改进: - 单一职责原则: 每个模块职责明确 - 依赖倒置: 通过接口解耦 - 代码复用: 工具函数可被多处使用 - 可测试性: 各模块可独立测试
96 lines
3.1 KiB
TypeScript
96 lines
3.1 KiB
TypeScript
/**
|
||
* useResponsiveValue Hook
|
||
* 响应式值映射 - 根据当前断点返回对应值
|
||
*/
|
||
|
||
import { useMemo } from 'react';
|
||
import { useWindowDimensions } from './useScreenSize';
|
||
import { getFineBreakpoint } from './useBreakpoint';
|
||
import type { FineBreakpointKey, ResponsiveValue } from './types';
|
||
|
||
const breakpointOrder: FineBreakpointKey[] = ['4xl', '3xl', '2xl', 'xl', 'lg', 'md', 'sm', 'xs'];
|
||
|
||
/**
|
||
* 根据当前断点从响应式值对象中选择合适的值
|
||
*
|
||
* @param value - 响应式值，可以是单一值或断点映射对象
|
||
* @returns 选中的值
|
||
*
|
||
* @example
|
||
* const padding = useResponsiveValue({ xs: 8, md: 16, lg: 24 });
|
||
* // 在 xs 屏幕返回 8，md 屏幕返回 16，lg 及以上返回 24
|
||
*/
|
||
export function useResponsiveValue<T>(value: ResponsiveValue<T>): T {
|
||
const { width } = useWindowDimensions();
|
||
const fineBreakpoint = getFineBreakpoint(width);
|
||
|
||
return useMemo(() => {
|
||
// 如果不是对象，直接返回
|
||
if (typeof value !== 'object' || value === null || Array.isArray(value)) {
|
||
return value as T;
|
||
}
|
||
|
||
const valueMap = value as Partial<Record<FineBreakpointKey, T>>;
|
||
|
||
// 从当前断点开始向下查找
|
||
const currentIndex = breakpointOrder.indexOf(fineBreakpoint);
|
||
for (let i = currentIndex; i < breakpointOrder.length; i++) {
|
||
const bp = breakpointOrder[i];
|
||
if (bp in valueMap) {
|
||
return valueMap[bp]!;
|
||
}
|
||
}
|
||
|
||
// 如果没找到，返回 xs 的值或第一个值
|
||
return (valueMap.xs ?? Object.values(valueMap)[0]) as T;
|
||
}, [value, fineBreakpoint]);
|
||
}
|
||
|
||
/**
|
||
* 响应式样式生成器
|
||
* 根据断点生成响应式样式
|
||
*
|
||
* @param styles - 响应式样式对象
|
||
* @returns 当前断点对应的样式
|
||
*
|
||
* @example
|
||
* const containerStyle = useResponsiveStyle({
|
||
* padding: { xs: 8, md: 16, lg: 24 },
|
||
* fontSize: { xs: 14, lg: 16 }
|
||
* });
|
||
*/
|
||
export function useResponsiveStyle<T extends Record<string, ResponsiveValue<unknown>>>(
|
||
styles: T
|
||
): { [K in keyof T]: T[K] extends ResponsiveValue<infer V> ? V : never } {
|
||
const { width } = useWindowDimensions();
|
||
const fineBreakpoint = getFineBreakpoint(width);
|
||
|
||
return useMemo(() => {
|
||
const result = {} as { [K in keyof T]: T[K] extends ResponsiveValue<infer V> ? V : never };
|
||
|
||
for (const key in styles) {
|
||
const value = styles[key];
|
||
|
||
if (typeof value !== 'object' || value === null || Array.isArray(value)) {
|
||
(result as Record<string, unknown>)[key] = value;
|
||
} else {
|
||
const valueMap = value as Partial<Record<FineBreakpointKey, unknown>>;
|
||
const currentIndex = breakpointOrder.indexOf(fineBreakpoint);
|
||
|
||
let selectedValue: unknown = undefined;
|
||
for (let i = currentIndex; i < breakpointOrder.length; i++) {
|
||
const bp = breakpointOrder[i];
|
||
if (bp in valueMap) {
|
||
selectedValue = valueMap[bp];
|
||
break;
|
||
}
|
||
}
|
||
|
||
(result as Record<string, unknown>)[key] = selectedValue ?? valueMap.xs ?? Object.values(valueMap)[0];
|
||
}
|
||
}
|
||
|
||
return result;
|
||
}, [styles, fineBreakpoint]);
|
||
}
|