refactor(qrcode): 组件化重构,采用 Context + Hook 模式

- 创建 QrCodeContext 和 QrCodeProvider 管理共享状态
- 提取 useQrCode Hook 封装所有状态和业务逻辑
- 创建 GeneratePanel 组件处理二维码生成模式
- 创建 ParsePanel 组件处理二维码解析模式
- 简化 index.tsx 为容器组件 (340行 → 47行)
- 删除未使用的旧组件文件 (QrCodeToUrlSection, UrlToQrCodeSection)
- 清理 types.ts 中未使用的类型定义
- 603 个测试全部通过
This commit is contained in:
雨霖铃
2026-05-21 00:07:42 +08:00
parent c5b51a9b33
commit df0b9440ca
8 changed files with 405 additions and 739 deletions
+32
View File
@@ -0,0 +1,32 @@
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;
}