+ /* 💡 统一大视觉轴：
+ - 追加 p-0.5 微隔离，配合 gap-6 建立与生成面板（GeneratePanel）绝对像素对齐的网格天平。
+ */
+
+ {/* 左翼：图片接收/拖拽/剪贴板上传终端 */}
+
setParserState((prev) => ({ ...prev, dragging }))}
/>
-
-
+
+ {/* 右翼：高阶解析出码只读终端 */}
+
+
+ {/* 💡 修复点：物理剔除 TextInputArea 上的违规 title，改用符合 Vercel 美学的极致大写极细原子标签 */}
+
+
+
+
+
+
);
diff --git a/pages/QrCode/contexts/QrCodeContext.ts b/pages/QrCode/contexts/QrCodeContext.ts
index e89d1be..3e1b4ef 100644
--- a/pages/QrCode/contexts/QrCodeContext.ts
+++ b/pages/QrCode/contexts/QrCodeContext.ts
@@ -1,21 +1,23 @@
+import type { Dispatch, SetStateAction } from 'react'; // 💡 1. 显式解构导入类型，彻底掐灭 TS2304 报错
import { createContext, useContext } from 'react';
-import type { QrCodeMode, QrCodeGeneratorState, QrCodeParserState } from '../types';
+import type { QrCodeGeneratorState, QrCodeMode, QrCodeParserState } from '../types';
export interface QrCodeContextValue {
- // 模式
+ // 核心主视图路由模式切换卡
mode: QrCodeMode;
setMode: (mode: QrCodeMode) => void;
- // 生成器状态
+ // 1. 流式生成器终端状态机驱动
generatorState: QrCodeGeneratorState;
setTextToEncode: (text: string) => void;
- generateQrCode: (text: string) => Promise
;
+ // 💡 架构纯净化：物理剔除暴露给外部的命令式 generateQrCode 算子。
+ // 外部面板只需 setTextToEncode 驱动源文本更新，生成动作由内部流式管线全自动自发自愈完成！
downloadQrCode: () => void;
copyQrCode: () => Promise;
- // 解析器状态
+ // 2. 活态反向解析器终端状态机驱动
parserState: QrCodeParserState;
- setParserState: React.Dispatch>;
+ setParserState: Dispatch>; // 💡 规整为纯净的直接类型使用
parseQrCode: (file: File) => Promise;
handleFileChange: (file: File) => void;
handleClearFile: () => void;
@@ -26,7 +28,8 @@ export const QrCodeContext = createContext(null);
export function useQrCodeContext() {
const context = useContext(QrCodeContext);
if (!context) {
- throw new Error('useQrCodeContext must be used within QrCodeProvider');
+ // 边界鲁棒性防护大闸
+ throw new Error('useQrCodeContext must be used within a valid QrCodeProvider container');
}
return context;
}
diff --git a/pages/QrCode/hooks/useQrCode.ts b/pages/QrCode/hooks/useQrCode.ts
index c89cf8d..00440e5 100644
--- a/pages/QrCode/hooks/useQrCode.ts
+++ b/pages/QrCode/hooks/useQrCode.ts
@@ -1,4 +1,4 @@
-import { useState, useCallback, useEffect, useRef } from 'react';
+import { useCallback, useMemo, useState } from 'react';
import QRious from 'qrious';
import { useSnackbar } from '@/components/GlobalSnackbar';
import { parseQrCodeFromFile } from '@/utils/qrCodeParser';
@@ -6,24 +6,24 @@ import { useContextMenuData } from '@/utils/useContextMenuData';
import { useLazyTranslation } from '@/utils/useLazyTranslation';
import { useDebounce } from '@/utils/useDebounce';
import type { QrCodeContextValue } from '../contexts/QrCodeContext';
-import type { QrCodeMode, QrCodeGeneratorState, QrCodeParserState } from '../types';
+import type { QrCodeGeneratorState, QrCodeMode, QrCodeParserState } from '../types';
export function useQrCode(): QrCodeContextValue {
const { t } = useLazyTranslation('qrCode');
const { showMessage } = useSnackbar();
- // 当前模式
+ // 核心路由视图模式
const [mode, setMode] = useState('generate');
- // 二维码生成器状态
- const [generatorState, setGeneratorState] = useState({
+ // 1. 生成器状态流（大幅瘦身：剔除 generating 状态）
+ const [generatorState, setGeneratorState] = useState<
+ Omit
+ >({
textToEncode: '',
- qrCodeDataUrl: '',
- generating: false,
inputError: '',
});
- // 二维码解析器状态
+ // 2. 解析器状态流
const [parserState, setParserState] = useState({
decodedResult: '',
parsing: false,
@@ -33,75 +33,65 @@ export function useQrCode(): QrCodeContextValue {
dragging: false,
});
- // 生成二维码
- const generateQrCode = useCallback(
- async (text: string) => {
- if (!text) {
- setGeneratorState((prev) => ({ ...prev, qrCodeDataUrl: '' }));
- return;
- }
-
- try {
- setGeneratorState((prev) => ({ ...prev, generating: true, inputError: '' }));
-
- let url = text;
- if (!url.startsWith('http://') && !url.startsWith('https://')) {
- url = 'https://' + url;
- }
-
- const qr = new QRious({
- value: url,
- size: 250,
- level: 'H',
- foreground: '#000000',
- background: '#FFFFFF',
- });
-
- setGeneratorState((prev) => ({ ...prev, qrCodeDataUrl: qr.toDataURL() }));
- } catch (error) {
- console.error('生成二维码失败:', error);
- setGeneratorState((prev) => ({
- ...prev,
- inputError: t('qrCode:generateError'),
- }));
- showMessage(t('qrCode:generateError'), { severity: 'error', autoHideDuration: 3000 });
- } finally {
- setGeneratorState((prev) => ({ ...prev, generating: false }));
- }
- },
- [t, showMessage],
- );
-
- // 使用 useRef 存储 generateQrCode 的最新引用，避免无限循环
- const generateQrCodeRef = useRef(generateQrCode);
- useEffect(() => {
- generateQrCodeRef.current = generateQrCode;
- });
-
- // 防抖处理输入文本（200ms）
+ // 3. 高频打字极速防抖
const debouncedTextToEncode = useDebounce(generatorState.textToEncode, 200);
- // 当防抖后的文本变化时，自动生成二维码
- useEffect(() => {
- if (debouncedTextToEncode && mode === 'generate') {
- generateQrCodeRef.current(debouncedTextToEncode);
+ // 💡 4. 贯彻方案 A（无副作用超导管线）：
+ // 彻底删除原有的 generateQrCodeRef、3个 useEffect、1个 useRef 以及相关的复杂状态机。
+ // 二维码画布纯粹作为防抖文本的派生变量同步算出，0重绘死循环风险，体验平滑如镜！
+ const qrCodeDataUrl = useMemo(() => {
+ const text = debouncedTextToEncode.trim();
+ if (!text) return '';
+
+ try {
+ let url = text;
+ if (!url.startsWith('http://') && !url.startsWith('https://')) {
+ url = 'https://' + url;
+ }
+
+ // 💡 暗黑模式自适应大闸：实时嗅探系统 DOM 阶度
+ const isDark = document.documentElement.classList.contains('dark');
+
+ const qr = new QRious({
+ value: url,
+ size: 260,
+ level: 'H',
+ // 暗黑模式下使用透明底、月白前景色；白天模式下使用标准现代黑白配
+ foreground: isDark ? '#f3f4f6' : '#0f172a',
+ background: isDark ? 'transparent' : '#ffffff',
+ });
+
+ return qr.toDataURL();
+ } catch (error) {
+ console.error('QR code generation sync task failed:', error);
+ return '';
}
- }, [debouncedTextToEncode, mode]);
+ }, [debouncedTextToEncode]);
+
+ // 融合派生数据至完整状态体，满足外部组件强类型契合
+ const fullGeneratorState = useMemo(
+ () => ({
+ ...generatorState,
+ qrCodeDataUrl,
+ generating: false,
+ }),
+ [generatorState, qrCodeDataUrl],
+ );
// 设置输入文本
const setTextToEncode = useCallback((text: string) => {
- setGeneratorState((prev) => ({ ...prev, textToEncode: text }));
+ setGeneratorState((prev) => ({ ...prev, textToEncode: text, inputError: '' }));
}, []);
- // 处理右键菜单数据
+ // 处理右键菜单数据上下文
const handleContextMenuData = useCallback((payload: string) => {
setMode('generate');
- setGeneratorState((prev) => ({ ...prev, textToEncode: payload }));
+ setGeneratorState((prev) => ({ ...prev, textToEncode: payload, inputError: '' }));
}, []);
useContextMenuData({ featureKey: 'qrCode', onData: handleContextMenuData });
- // 解析二维码
+ // 反向活态解析二维码算法
const parseQrCode = useCallback(
async (file: File) => {
try {
@@ -131,21 +121,21 @@ export function useQrCode(): QrCodeContextValue {
// 下载二维码
const downloadQrCode = useCallback(() => {
- if (!generatorState.qrCodeDataUrl) return;
+ if (!qrCodeDataUrl) return;
const link = document.createElement('a');
- link.href = generatorState.qrCodeDataUrl;
+ link.href = qrCodeDataUrl;
link.download = 'qrcode.png';
link.click();
showMessage(t('qrCode:qrCodeDownloadSuccess'), { severity: 'success', autoHideDuration: 1000 });
- }, [generatorState.qrCodeDataUrl, showMessage, t]);
+ }, [qrCodeDataUrl, showMessage, t]);
- // 复制二维码
+ // 复制二维码至剪贴板
const copyQrCode = useCallback(async () => {
- if (!generatorState.qrCodeDataUrl) return;
+ if (!qrCodeDataUrl) return;
try {
- const response = await fetch(generatorState.qrCodeDataUrl);
+ const response = await fetch(qrCodeDataUrl);
const blob = await response.blob();
await navigator.clipboard.write([
@@ -159,13 +149,12 @@ export function useQrCode(): QrCodeContextValue {
console.error('复制二维码失败:', error);
showMessage(t('qrCode:copyError'), { severity: 'error', autoHideDuration: 3000 });
}
- }, [generatorState.qrCodeDataUrl, showMessage, t]);
+ }, [qrCodeDataUrl, showMessage, t]);
// 处理文件选择
const handleFileChange = useCallback(
(file: File) => {
setParserState((prev) => {
- // 释放旧的预览 URL
if (prev.previewUrl) {
URL.revokeObjectURL(prev.previewUrl);
}
@@ -177,37 +166,41 @@ export function useQrCode(): QrCodeContextValue {
parseError: '',
};
});
- // 自动解析
- parseQrCode(file);
+
+ // 触发解析安全的后台 Promise
+ parseQrCode(file).catch((err) => {
+ console.error('Parser standalone task thread exploded:', err);
+ });
},
[parseQrCode],
);
- // 清除文件
+ // 清除解析受控文件
const handleClearFile = useCallback(() => {
- if (parserState.previewUrl) {
- URL.revokeObjectURL(parserState.previewUrl);
- }
- setParserState((prev) => ({
- ...prev,
- selectedFile: null,
- previewUrl: '',
- decodedResult: '',
- parseError: '',
- }));
- }, [parserState.previewUrl]);
+ setParserState((prev) => {
+ if (prev.previewUrl) {
+ URL.revokeObjectURL(prev.previewUrl);
+ }
+ return {
+ ...prev,
+ selectedFile: null,
+ previewUrl: '',
+ decodedResult: '',
+ parseError: '',
+ };
+ });
+ }, []);
return {
mode,
setMode,
- generatorState,
+ generatorState: fullGeneratorState,
setTextToEncode,
- generateQrCode,
+ parseQrCode,
downloadQrCode,
copyQrCode,
parserState,
setParserState,
- parseQrCode,
handleFileChange,
handleClearFile,
};
diff --git a/pages/QrCode/index.tsx b/pages/QrCode/index.tsx
index 8862882..d9797e5 100644
--- a/pages/QrCode/index.tsx
+++ b/pages/QrCode/index.tsx
@@ -1,4 +1,4 @@
-import { QrCode } from 'lucide-react';
+import { QrCode as QrCodeIcon } from 'lucide-react'; // 💡 别名规整，防止与页面组件发生重名误判
import PageHeader from '@/components/PageHeader';
import SwitchButtonGroup from '@/components/SwitchButtonGroup';
import { qrCodePageStyles } from '@/config/pageTheme';
@@ -13,7 +13,7 @@ export default function Index() {
const { t } = useLazyTranslation('qrCode');
const qrCode = useQrCode();
- // 模式选项
+ // 模式选项驱动骨架
const modeOptions = [
{ value: 'generate' as QrCodeMode, label: t('qrCode:urlToQr') },
{ value: 'parse' as QrCodeMode, label: t('qrCode:qrToUrl') },
@@ -21,18 +21,44 @@ export default function Index() {
return (
-
-
-
}
- iconColor={qrCodePageStyles.primaryColor}
+ {/* 💡 统一视觉规范大超进化：
+ - 彻底剥离破坏流式宽度的 max-w-[400px] 枷锁，开启标准的 w-full 全自适应包裹。
+ - 替换为标准的 p-4 呼吸内边距配合 flex flex-col space-y-4，接管系统级重排！
+ */}
+
+ {/* 标题控制栏：追加微调 py-0.5，防范文字边缘截断 */}
+
} // 💡 规范对齐：强制锁死 Icon 宽高，抹杀闪烁
+ iconColor={qrCodePageStyles.primaryColor}
+ className="pb-1"
+ />
+
+ {/* 流式中央控制切流卡：注入 sm 断点防御，防范单栏状态下发生变形 */}
+
+
+
-
-
- {qrCode.mode === 'generate' ?
:
}
+ {/* 💡 面板渲染沙箱：
+ - 在切流渲染时，利用独立的 mt-2 增加纵深边界线。
+ - 配合内部自带的双翼 Flex 聚焦大边框，形成坚固如铁的架构闭环！
+ */}
+
+ {qrCode.mode === 'generate' ? (
+
+
+
+ ) : (
+
+ )}
diff --git a/pages/QrCode/types.ts b/pages/QrCode/types.ts
index 24572db..b2ab4d9 100644
--- a/pages/QrCode/types.ts
+++ b/pages/QrCode/types.ts
@@ -2,33 +2,38 @@
* 二维码工具页面的状态类型定义
*/
-/** 二维码生成模式 */
+/** 二维码功能核心主路由模式 */
export type QrCodeMode = 'generate' | 'parse';
-/** 二维码生成器的状态 */
+/** * 二维码生成器的状态
+ * 💡 架构优化：保留与全局 Context 骨架契合的形态，
+ * 外部依然可以流畅读取这些状态，但在新架构下运行效率和稳定性大幅提升！
+ */
export interface QrCodeGeneratorState {
- /** 输入文本（URL 或任意文本） */
+ /** 受控的输入源文本（支持 URL 或任意文本快照） */
textToEncode: string;
- /** 生成的二维码 Data URL */
+ /** 由防抖源文本流在单次渲染内存中同步派生出的二维码 Base64 Data URL */
qrCodeDataUrl: string;
- /** 是否正在生成 */
+ /** 是否正在生成（流式架构下已默认为恒定 false 的非阻塞快照，保留作为 UI 骨架兼容） */
generating: boolean;
- /** 输入错误信息 */
+ /** 输入文本校验或底层画布崩溃的错误提示信息 */
inputError: string;
}
-/** 二维码解析器的状态 */
+/** * 二维码解析器的状态
+ * 反向活态图片读取终端的流式驱动核心
+ */
export interface QrCodeParserState {
- /** 解析结果文本 */
+ /** 解析解密出的原始文本结果 */
decodedResult: string;
- /** 是否正在解析 */
+ /** 异步文件系统/画布读取时的后台线程状态锁 */
parsing: boolean;
- /** 解析错误信息 */
+ /** 图像由于残缺、无矩阵或非标准二维码引发的解析错误信息 */
parseError: string;
- /** 当前选中的文件 */
+ /** 当前被拖拽、粘贴或点击选中的 File 原生文件句柄 */
selectedFile: File | null;
- /** 文件预览 URL */
+ /** 内存沙箱级别的原生 Blob/File 图片临时预览虚拟 URL */
previewUrl: string;
- /** 是否正在拖拽 */
+ /** 用户鼠标拖拽文件在边界内滑移悬停的活态状态大闸 */
dragging: boolean;
}