雨霖铃
df0b9440ca
- 创建 QrCodeContext 和 QrCodeProvider 管理共享状态 - 提取 useQrCode Hook 封装所有状态和业务逻辑 - 创建 GeneratePanel 组件处理二维码生成模式 - 创建 ParsePanel 组件处理二维码解析模式 - 简化 index.tsx 为容器组件 (340行 → 47行) - 删除未使用的旧组件文件 (QrCodeToUrlSection, UrlToQrCodeSection) - 清理 types.ts 中未使用的类型定义 - 603 个测试全部通过
33 lines
998 B
TypeScript
33 lines
998 B
TypeScript
import { createContext, useContext } from 'react';
|
|
import type { QrCodeMode, QrCodeGeneratorState, QrCodeParserState } from '../types';
|
|
|
|
export interface QrCodeContextValue {
|
|
// 模式
|
|
mode: QrCodeMode;
|
|
setMode: (mode: QrCodeMode) => void;
|
|
|
|
// 生成器状态
|
|
generatorState: QrCodeGeneratorState;
|
|
setTextToEncode: (text: string) => void;
|
|
generateQrCode: (text: string) => Promise<void>;
|
|
downloadQrCode: () => void;
|
|
copyQrCode: () => Promise<void>;
|
|
|
|
// 解析器状态
|
|
parserState: QrCodeParserState;
|
|
setParserState: React.Dispatch<React.SetStateAction<QrCodeParserState>>;
|
|
parseQrCode: (file: File) => Promise<void>;
|
|
handleFileChange: (file: File) => void;
|
|
handleClearFile: () => void;
|
|
}
|
|
|
|
export const QrCodeContext = createContext<QrCodeContextValue | null>(null);
|
|
|
|
export function useQrCodeContext() {
|
|
const context = useContext(QrCodeContext);
|
|
if (!context) {
|
|
throw new Error('useQrCodeContext must be used within QrCodeProvider');
|
|
}
|
|
return context;
|
|
}
|