Develop (#24)
* docs: 添加组件文档注释和类型导入 refactor: 统一使用 SnackbarOptions 类型 style: 优化导入语句顺序和格式 * refactor: 简化假数据生成器中的faker导入和使用 Co-authored-by: Copilot <copilot@github.com> * feat(form-recognizer): 增强表单识别功能并优化UI交互 - 新增字段类型偏好设置功能，支持按域名保存字段类型 - 重构FieldList组件，改进字段选择和类型修改体验 - 添加字段定位闪烁功能，便于在页面上快速找到对应字段 - 优化表单填充逻辑，支持单个字段覆盖默认填充模式 - 移除独立的侧边栏页面，统一使用主页面组件 - 改进useStorageState钩子，增加加载状态管理和防抖处理 * refactor: 移除未使用的组件文件 * refactor(页面头部): 提取通用 PageHeader 组件并替换各页面头部实现 重构各页面头部为统一的 PageHeader 组件，提高代码复用性和维护性 * style(组件): 调整自动刷新开关和存储选项网格的样式 优化自动刷新开关的文本内边距，重构存储选项网格的布局结构，调整间距和边框样式 * style(ui): 调整时间戳页面和结果视图的样式 - 为时区选择器添加圆角 - 优化结果视图的布局和对齐方式 - 调整结果项的内边距和文本样式 * ci(workflow): 移除Firefox测试以简化CI流程 仅保留Chrome浏览器的构建步骤，减少CI运行时间和资源消耗 * refactor(qrcode): 重构二维码解析功能并提取为独立模块 * style(页面样式): 统一页面头部图标颜色并优化表单样式 更新各页面头部组件的图标颜色配置，移除冗余的表单标签属性，优化输入框样式和按钮悬停效果 * feat(formMapping): 添加表单映射功能 - 创建 FormMappingPage 页面组件 - 实现表单扫描器 scanner.ts - 实现高亮器 highlighter.ts - 更新路由配置 routes.ts - 更新内容脚本 content.ts - 更新类型定义 storage.d.ts - 添加 formMappingPageStyles 样式配置 * feat(表单映射): 添加配置导出功能及状态提示 添加配置导出为JSON文件的功能，包含导出按钮和错误处理。新增Snackbar组件用于显示导出成功和错误状态。优化页面布局结构，将状态提示移至全局容器外。 * feat(表单填充): 新增智能表单填充功能 添加智能表单填充功能，包括： 1. 新增表单填充页面和路由配置 2. 实现模糊匹配引擎和智能注入引擎 3. 添加Mock数据生成器和视觉反馈渲染器 4. 扩展消息接口支持填充操作 * ci: 精简触发CI的工作流分支 移除对develop分支及其变体的触发，仅保留main分支的触发 * test: 更新路由测试以匹配新增的路由数量 * test: 将测试文件中的描述和断言翻译为中文 * test(PageHeader): 添加组件测试用例验证渲染逻辑和样式 * refactor(theme): 重构主题样式并优化仪表盘卡片组件 将页面样式配置集中管理，移除各页面中硬编码的背景色 新增 DashboardCard 组件封装通用卡片逻辑 添加 dashboardCards 配置文件统一管理卡片数据 * refactor(Button): 统一按钮样式并移除重复样式定义 将按钮样式统一封装到 Button 组件中，移除各页面重复的样式定义 更新组件文档说明，提供更清晰的用法示例 * docs: 更新 README 文件中的目录结构说明 添加新组件和配置文件的说明，保持文档与代码同步 * refactor: 优化代码类型声明和UI布局 修复类型声明从any改为never以提高类型安全性 调整TimestampPage页面布局间距 移除DashboardPage中不必要的实时时钟状态 更新ESLint配置以使用推荐配置 添加选项页面打开的错误处理 * refactor(消息通信): 使用 @webext-core/messaging 重构消息处理逻辑 将原有的 chrome.runtime.onMessage 和 chrome.tabs.sendMessage 替换为类型安全的 @webext-core/messaging 实现 添加 ProtocolMap 类型定义确保消息类型安全 更新相关页面和后台脚本使用新的消息通信方式 * fix: 修复依赖项缺失导致的潜在问题 修复 useStorageState 中缺少 defaultValue 依赖的问题 重构 RouterProvider 的初始化逻辑，使用 useCallback 优化性能 * refactor: 重构表单识别和消息处理逻辑 将表单映射UI逻辑提取到独立文件 将消息处理器提取到独立文件 将表单识别页面逻辑提取到自定义hook 优化代码结构和可维护性 * feat(侧边栏): 添加侧边栏状态变化通知功能 - 在消息类型中新增侧边栏状态变化枚举和字段 - 侧边栏打开和关闭时发送状态通知 - 替换轮询检查方式为消息监听机制 * refactor: 优化高亮组件渲染逻辑并添加防抖处理 重构高亮组件渲染逻辑，使用 requestAnimationFrame 进行节流优化 在 useStorageCleaner 中添加防抖处理以避免频繁加载 * refactor: 统一组件导出方式为默认导出 * refactor: 重构样式系统并迁移至 MUI 主题 删除冗余的 CSS 文件，统一使用 MUI 主题管理样式 新增 useActiveTabDomain 和 useSidePanelState 自定义 Hook 优化各入口点的主题集成和布局处理 * docs: 更新项目文档以反映新增功能和技术栈细节 更新 AGENTS.md 文档，详细描述新增的功能模块（存储管理、URL 管理、二维码生成、表单工具套件等）和更新的技术栈信息 * feat: 添加错误边界组件以捕获子组件错误 在 popup、sidepanel 和 options 入口点添加 ErrorBoundary 组件，用于捕获并处理子组件中的 JavaScript 错误。当错误发生时，显示友好的错误界面并提供刷新功能。 * refactor(ui): 使用全局 snackbar 替换本地通知组件 重构表单页面中的通知系统，移除本地 Snackbar 和 Alert 组件，改用全局 GlobalSnackbar 组件统一管理通知 标准化主题配置中的 CSS 属性命名，移除带前缀的样式属性 * refactor(snackbar): 重构全局消息提示为 SnackbarProvider 组件 将原本分散在各页面的 GlobalSnackbar 组件重构为集中管理的 SnackbarProvider，通过 Context 提供统一的消息提示功能。主要变更包括： 1. 创建新的 SnackbarProvider 组件作为全局消息提示容器 2. 提供 useSnackbar hook 供子组件调用 3. 移除各页面中独立的 GlobalSnackbar 实例 4. 在 App 根组件中统一集成 SnackbarProvider 5. 优化消息提示样式和交互行为 * refactor(Snackbar): 重构消息提示组件并优化样式 重构 Snackbar 组件，将状态管理逻辑提取到 GlobalSnackbar 中复用 优化消息提示样式，调整阴影效果和最小尺寸 统一各页面使用 Snackbar 的方式，移除冗余配置 * refactor: 重构路由和功能配置系统 - 将路由配置和仪表盘卡片配置合并为统一的 features 配置 - 重构 RouterProvider 增加数据校验和本地快照功能 - 优化表单字段识别和填充逻辑，提取公共方法 - 更新相关组件和文档以适配新的配置系统 - 删除废弃的 dashboardCards 和 routes 配置文件 * refactor(GlobalSnackbar): 合并SnackbarProvider到GlobalSnackbar组件 重构Snackbar相关代码，将SnackbarProvider合并到GlobalSnackbar组件中，简化代码结构 更新相关组件引用路径，从SnackbarProvider改为GlobalSnackbar 修复StorageCleanerPage禁用状态逻辑问题 * feat(表单映射): 增强高亮器功能并优化元素定位 - 新增高亮器闪烁功能，支持自定义持续时间 - 改进元素定位算法，支持 Shadow DOM 穿透 - 优化拾取模式，支持连续拾取和悬停预览 - 增强错误处理和信息反馈 - 添加测试用例确保核心功能稳定性 * refactor: 移除表单映射相关功能 删除表单映射相关的UI、逻辑和测试代码，包括表单识别、智能填充和高亮功能 简化消息处理逻辑和配置文件，保留核心功能 * feat: 实现页面组件懒加载并优化加载状态显示 refactor: 移除未使用的数据生成和验证工具类 chore: 更新应用图标文件 * refactor(qrcode): 替换二维码生成和解析库以减小体积 使用 qr-scanner 替代 jsqr 进行二维码解析，使用 qrious 替代 qrcode 进行二维码生成 新的库体积更小且性能更好，同时移除了不再使用的 @faker-js/faker 依赖 * feat: 添加在标签页打开功能并优化错误处理 修复测试中的加载状态检查 将控制台日志改为错误捕获 添加全局消息提示组件 * feat: 支持独立标签页模式并重构路由配置 重构路由系统以支持独立标签页模式，替换原有的独立窗口模式 - 新增标签页路由、可见页面列表和页面顺序的存储键 - 修改 RouterProvider 以支持不同窗口类型的独立配置 - 更新选项页面以支持为不同窗口类型单独配置 - 添加相关单元测试 * feat(ui): 优化响应式布局和样式设计 重构选项页面布局，增强移动端适配性 更新主题配置和组件样式，提升用户体验 * refactor: 移除URL工具相关代码 移除不再需要的URL工具功能，包括组件、页面、样式和类型定义 * refactor: 简化页面标题和存储选项网格的响应式布局 * refactor: 优化样式和错误处理 - 简化 chrome.runtime.openOptionsPage 的错误处理 - 拆分 html, body, #root 的样式定义，使用 minHeight 替代 height * refactor: 重构页面组件结构 - 将页面组件从 entrypoints/popup/pages 移动到 pages 目录 - 更新文档中的路径引用 * style(DashboardPage): 优化仪表盘布局为响应式网格 refactor(ToolCard): 重构工具卡片组件并添加详细注释 * feat: 新增文本统计功能 添加文本统计工具页面及相关功能，包括： - 文本统计工具页面组件 - 文本统计计算工具函数 - 相关类型定义和样式配置 - 单元测试覆盖核心功能 * feat(jwt): 添加 JWT 解析工具功能 新增 JWT 解析工具页面，包含以下内容： - 添加 JWT 类型定义和页面样式配置 - 实现 JWT 解析核心功能及测试用例 - 创建 JWT 解析页面组件 - 在功能配置中注册 JWT 工具 * docs: 更新 README 以更清晰地描述项目功能和结构 - 重构功能描述部分，使用更简洁的列表形式展示 - 更新技术栈和项目结构说明 - 优化开发流程部分的描述 - 移除冗余的权限和依赖说明 * docs: 更新AGENTS.md文档以反映项目最新状态 - 重写项目概述和核心命令部分，使其更简洁准确 - 重构目录结构描述，采用更清晰的树状格式 - 移除过时的功能模块描述，聚焦当前核心功能 - 更新AI代理开发准则和权限管理说明 - 优化文档整体结构和可读性 * test: 更新特征计数测试以匹配新增 textStatistics 和 jwt 工具 * style: 统一导入语句顺序 * refactor(pages): 重构工具页面组件结构并优化功能实现 - 将各工具页面组件迁移至独立目录并重构为模块化结构 - 新增存储清理工具相关组件及状态管理逻辑 - 实现时间戳转换工具的自定义hook和UI组件 - 优化JWT解析工具的代码结构和样式 - 更新文本统计工具的性能计算逻辑 - 调整配置文件中的页面引用路径 - 删除无用文件和过时文档 * feat(顶部栏): 添加搜索功能和历史记录 实现顶部栏搜索框功能，支持模糊搜索工具并显示搜索结果列表 添加搜索历史记录功能，自动保存最近搜索并显示 支持键盘导航和选择搜索结果 * feat: 添加多语言支持(i18n) 实现应用的多语言功能，支持中英文切换 添加i18next和相关依赖 创建语言资源文件 更新组件以使用翻译功能 重构文本统计工具页面 完善测试和构建配置 * feat(顶部栏): 添加语言切换功能并优化国际化支持 feat(i18n): 增加语言归一化和同步功能 fix(剪贴板): 使用国际化文本替换剪贴板消息 test(顶部栏): 更新测试以匹配国际化标题 * refactor: 重构组件目录结构，将组件移动到对应功能页面目录 将多个组件从通用组件目录移动到各自功能页面目录下，包括 ToolCard、StorageCleanerConfirm、UrlToQrCodeSection 和 QrCodeToUrlSection。同时新增 Dashboard 页面相关组件 DashboardCard 和 ToolCard，并优化了组件导入路径。 重构旨在提高代码组织性，使组件与其所属功能页面更紧密关联，便于维护和理解代码结构。所有组件功能保持不变，仅调整文件位置和导入路径。 * refactor(Dashboard): 优化卡片组件结构并移除无用属性 重构 DashboardCard 组件接口，直接传递属性而非配置对象 移除 ToolCard 中无用的 hasAI 属性 使用 useMemo 优化可见性判断性能 统一使用 alpha 函数处理颜色透明度 * refactor(timestamp): 合并输入处理函数并优化样式结构 重构时间戳转换器的输入处理逻辑，将 setTsInput 和 setDtInput 合并为统一的 setInput 函数 将组件样式提取到 pageTheme 配置中统一管理 使用 ToggleButtonGroup 替换自定义模式切换器实现 移除不必要的 showMessage 属性传递，改用 useSnackbar 钩子 * refactor(dashboard): 重构仪表盘卡片组件并优化布局 - 删除冗余的 DashboardCard 组件，直接使用 ToolCard - 将网格布局样式移至主题配置 - 使用 CardActionArea 增强可访问性 - 简化点击事件处理逻辑 - 更新相关测试用例 * refactor(storageCleaner): 重构样式代码并优化国际化处理 将分散的样式代码集中到pageTheme.ts中统一管理 优化组件中的国际化文本引用 修复useStorageCleaner中的状态同步问题 更新测试用例以匹配国际化文本 * refactor(StorageCleaner): 优化条件判断和清理未使用的代码 简化禁用按钮的条件判断逻辑 移除未使用的 resultTimeoutRef 及相关清理代码 * refactor(QrCode): 重构二维码页面样式和组件结构 将内联样式提取到主题配置文件中 移除未使用的全局消息提示依赖 优化组件结构和代码复用 删除未使用的QrCodeUploader组件 * refactor(ErrorBoundary): 移除冗余状态更新并调整错误背景色 移除 componentDidCatch 中的冗余 setState 调用 将错误背景色从 'error.shortest' 改为 rgba 格式 * feat(TopBar): 优化顶部导航栏功能并添加样式配置 - 新增 openExtensionPage 工具函数用于打开扩展页面 - 将顶部导航栏样式配置提取到 pageTheme 中统一管理 - 改进搜索历史功能，增加错误处理和配置化限制 - 优化键盘导航和搜索结果的交互逻辑 * chore: 在.gitignore中添加docs目录 避免将文档生成目录提交到版本控制 * feat(JsonDiff): add type definitions for diff engine * feat: 新增 JSON 差异比较工具功能 添加 JSON 差异比较工具页面，支持并排和统一视图模式，包含以下功能： - 左右两侧 JSON 输入框及校验 - 差异高亮显示及导航 - 支持对象和数组的深度比较 - 国际化支持 - 单元测试覆盖核心差异算法 * feat(主题): 添加暗色模式支持并重构主题系统 - 新增 ThemeModeProvider 提供亮色/暗色/系统模式切换功能 - 重构所有组件使用 MUI 主题变量替代硬编码颜色 - 更新测试用例以适配新的主题系统 - 添加 i18n 翻译支持主题切换相关文本 - 统一入口点使用 AppRoot 组件封装主题和路由提供者 * feat(jsonDiff): 新增 JSON 格式化功能模块 - 新增 jsonFormat 语言资源，支持中英文文本 - 新增 JsonFormatSection 组件，提供 JSON 格式化输入与结果展示 - 在 JsonDiff 页面加入模式切换，支持差异比较与格式化双模式 - 实现 formatJson 和 validateJson 工具方法，支持缩进大小和键名排序选项 - 增加格式化结果显示大小统计和一键复制功能 - 写入大量单元测试，覆盖格式化和校验功能边界 - 优化页面布局与交互，提升用户体验和功能集成度 * feat(jsonDiff): 新增 JSON 转 YAML/TOML 及压缩功能 - 在语言文件(en/zh)中添加 YAML、TOML 和 JSON 压缩模式相关文案 - 扩展 JsonDiff 页面，新增 yaml、toml、minify 三种页面模式 - 新增 JsonConvertSection 组件，提供输入校验、转换操作及结果展示 - 实现 jsonToYaml 工具函数，将 JSON 转换为符合规范的 YAML 格式 - 实现 jsonToToml 工具函数，将 JSON 转换为符合规范且支持嵌套的 TOML 格式 - 实现 minifyJson 工具函数，实现 JSON 字符串压缩为单行格式 - 为所有新功能增加单元测试，覆盖正常及异常场景，保证转换正确性和稳定性 - 在页面中添加对应的切换按钮和图标，提升用户体验和操作便捷性 * refactor(jsonTools): 重命名 JSON 差异比较为 JSON 工具 - 将 JsonDiff 页面组件重命名为 JsonTools 并更新相关引用 - 修改功能配置中对应组件的名称以匹配新命名 - 更新英文和中文语言包中该功能的标题及描述 - 调整测试文件中导入路径以使用新的 JsonTools 文件夹名 * feat(storage): 优化本地存储状态管理和 JSON 工具页模式持久化 - 添加 useStorageState 钩子，支持同步快照和异步加载存储状态 - 实现快照机制，防止页面首屏闪烁现象 - 增加状态值验证器功能，保证恢复数据合法性 - JSON 工具页面模式改用受控存储状态持久化 - 新增 JsonToolsPageMode 类型定义，统一页面模式类型 - 为 useStorageState 编写完整单元测试，覆盖快照、校验及存储同步场景 * feat(base64Converter): 新增 Base64 转换器功能模块 - 添加 Base64 转换器页面及相关样式配置 - 支持文本、文件及图像三种转换模式，含编码和解码功能 - 实现拖拽、文件选择及图像预览功能 - 增加中文与英文多语言资源文件支持 - 补充相关工具函数，支持编码解码及格式校验 - 扩展路由提供者逻辑，合并已保存列表与默认功能集合 - 更新测试用例，覆盖合并新功能的场景验证 - 在特性配置中加入 Base64 转换器信息，支持图标和默认显示配置 * feat(markdown): 新增 Markdown 转 HTML 功能模块 - 添加 marked 依赖及类型定义支持 Markdown 解析 - 新增 MarkdownToHtml 页面，支持实时编辑、预览及 HTML 输出三种模式切换 - 实现 markdownToHtml 工具函数进行 Markdown 转 HTML 操作，含错误处理 - 包装完整 HTML 文档功能，支持打印和下载导出 - 配置全局主题样式，优化 Markdown 渲染视觉效果 - 完善 i18n 国际化资源，支持多语言页面展示 - 统一类型定义，新增 MarkdownToHtml 相关存储状态类型 - 添加相关单元测试，覆盖转换逻辑及功能组件 - 在功能配置中注册 Markdown 转 HTML 工具，支持界面调用和路由访问 * feat(htmlToMarkdown): 添加 HTML 转 Markdown 功能页面及转换工具 - 新增 HtmlToMarkdownPage 组件，支持实时转换 HTML 为 Markdown - 增加 htmlToMarkdown 工具函数，实现基于 DOM 解析的转换逻辑 - 新增下载 Markdown 文件功能，支持一键导出转换结果 - 配置文件增加 htmlToMarkdown 相关功能项和页面样式 - 国际化资源添加对应中英文文案 - 更新类型定义，新增 HTML 转 Markdown 相关类型和存储键 - 补充对应的单元测试，覆盖转换逻辑和导出功能 - 修正路由提供器测试，确保新增页面被正确识别和排序 * refactor(jwt): 替换 JSON 格式化函数名称及优化代码表达 - 将 jwt 解析工具中的 formatJson 函数重命名为 stringifyJson - 更新 Jwt 页面中相关的格式化函数调用，保持命名一致 - 统一注释风格，增强代码可读性 - 保持功能不变，改进代码语义表达 * refactor(timestamp): 优化时间戳页面布局与样式，简化组件结构 - 调整模式切换器和单位切换器样式，增加统一转换工作卡片和转换按钮样式 - 精简LiveClock组件，移除单位切换功能，瘦身为单行参考条 - 优化Timestamp页面布局，输入区、单位选择、时区选择及结果区并入统一卡片中 - 移除ResultView中多余的额外时间格式展示，仅保留转换结果显示 - 精简useTimestampConverter，删除自动转换的防抖useEffect逻辑 - 更新多处样式细节以提升界面紧凑度和一致性 - 删除国际化文件中未使用的时间相关文案键值 * feat(layout): 优化二维码与时间戳页面响应式布局 - 新增桌面端左右分栏布局样式，实现 md 断点后等宽分栏二卡片等高 - 调整二维码页面，移动端折叠，桌面端两个面板强制展开且隐藏折叠交互 - 时间戳页面新增左右分栏样式，左侧为转换工作台，右侧为结果展示卡片 - 结果展示新增空状态占位提示，支持显示额外时间格式信息及复制按钮 - 国际化资源补充时间戳转换相关文本，包括相对时间、ISO8601、UTC时间等标签 - 统一各布局区容器高度及内联样式，强化桌面端用户体验与视觉一致性 * fix(style): 优化页面布局与文字溢出显示 - 为页面主题配置添加 gridAutoRows 属性，统一自动行高 - 修改 ToolCard 中描述文本样式，实现单行溢出省略号显示 - 解决文本换行和截断，避免内容超出指定范围 - 改善视觉效果和布局一致性，提高用户体验 * feat(options): 支持功能列表拖拽排序 - 新增 @dnd-kit 相关依赖包，实现拖拽排序功能 - 将原先的上下移动按钮替换为拖拽交互 - 封装 SortableFeatureRow 组件，支持拖拽排序与开关切换 - 使用 DndContext 和 SortableContext 管理拖拽逻辑与排序状态 - 拖拽时高亮显示拖动项，优化用户体验 - 调整恢复默认按钮位置，与 Tab 同行展示 - 优化 UI 样式及相关交互提示信息 - 保存排序结果至存储，保证配置持久化 * fix(router): 防止组件卸载后更新状态导致竞态条件 - 修改 loadInitialData 调用逻辑，添加 cancelled 标志防止卸载后更新状态 - 确保组件卸载时取消状态更新，避免 React 警告和无效操作 - 新增测试覆盖组件卸载时不应更新 isLoaded 状态的竞态条件防护 - 修复加载初始路由数据失败时的错误处理代码逻辑 * refactor(router): 移除不再使用的本地导航相关代码 - 删除 RouterProvider 中的 navigateLocal 和 syncNavigation 方法及相关注释 - 清理对应的类型定义，移除不再使用的接口成员 - 更新测试文件，移除对 navigateLocal 的模拟函数调用 - 精简导航逻辑，保持代码整洁和一致性 * refactor(clipboard): 优化剪贴板复制函数并添加测试用例 - 将复制文本和复制图片的函数改为 async/await 形式，简化代码结构 - 删除 Promise 构造函数中多余的 then/catch，改用 try/catch 返回布尔值表示成功与否 - 修改 CopyButton 组件使用新的异步复制函数写法，提升代码可读性 - 添加剪贴板复制功能的单元测试，覆盖成功与失败两种场景 - 在测试环境中模拟 ClipboardItem 以支持图片复制测试 * fix(options): 验证配置数据有效性并恢复默认值 - 添加 isValidPage 和 isValidPageList 函数验证 visiblePages 和 pageOrder 的数据有效性 - 当读取到非法数据时，自动恢复为默认配置，避免异常状态 - 更新异步加载配置逻辑，确保界面状态稳定 - 新增单元测试，覆盖合法与非法数据的加载场景 - 修正 .gitignore 文件 * refactor(storage): 替换 IndexedDB 大小计算为通用存储估算 - 将获取 IndexedDB 大小的方法更名为获取源存储估算 - 修改调用处使用新的通用存储估算函数 - 更新错误日志信息以反映新的统计方法 - 统一存储空间估算接口，提升扩展能力 * fix(utils): 解决打印重复触发问题 - 添加 printed 标志防止多次执行打印 - 在 onload 和 setTimeout 中判断 printed 状态 - 防止部分浏览器 onload 不触发导致重复打印 - 增强打印逻辑的稳定性和兼容性 * fix(ErrorBoundary): 修复错误状态未随子组件变化重置的问题 - 增加 componentDidUpdate 钩子，子组件变化时重置错误状态 - 添加完整的单元测试覆盖正常渲染、错误捕获、状态重置和刷新按钮功能 - 修改 background.ts，调用 reload 时添加异常捕获并打印错误 - 修改 sidepanel/App.tsx，调用 openOptionsPage 时添加异常捕获并打印错误 - tsconfig.json 开启 noImplicitAny 检查，提高代码类型安全 - 添加 qrious 模块类型声明文件，完善类型定义 * fix(utils): 修复存储状态和主题模式加载的竞态条件问题 - 在 ThemeModeProvider 中取消异步操作防止内存泄漏 - 在 useStorageState 钩子中添加取消标志，避免状态更新竞态 - 修正 TopBar 搜索历史持久化，添加 useEffect 副作用同步存储 - 扩展 storageCleaner 支持 TB 单位，防止格式化错误 - GlobalSnackbar 组件支持自定义 anchorOrigin 属性，增强弹窗位置灵活性 - 优化 jsonToToml 和 jsonToYaml 中多余的字符判断逻辑，提升序列化准确性 * fix(Base64Converter): 修复切换模式时文件状态未及时重置问题 - 添加取消标志避免文件选择异步状态错乱 - 切换页面模式时清空文件和加载状态 - 切换文本编码方向时清空输出和错误状态 - 阻止重复选择同一模式导致不必要状态更新 - 确保异步转换过程中若取消选择不更新状态 * refactor(Base64Converter): 拆分文本、文件和图像转换模式为独立组件 - 将文本编码/解码逻辑提取至 TextMode 组件，简化主页面代码 - 将文件转Base64相关处理封装到 FileMode 组件，提升代码模块化 - 将图像转Base64相关处理封装到 ImageMode 组件，增强功能分离 - 主页面根据当前模式动态渲染对应组件，移除大量重复状态及逻辑 - 优化模式切换逻辑，取消不必要的状态重置，简化事件处理 - 清理未使用的导入和废弃代码，减少页面体积与复杂度 * test(toolcard): 调整键盘触发事件模拟 - 替换点击事件为键盘按下和释放事件模拟 - 修正测试用例以更真实地模拟键盘交互 - 确保事件处理函数被正确调用 - 移除eslint配置文件中对测试文件的忽略设置 * test(ToolCard): 优化键盘事件测试逻辑 - 引入 userEvent 以模拟更真实的用户键盘输入 - 使用 act 包裹异步操作确保测试稳定性 - 修改按 Enter 键测试为异步函数以支持 await - 替换 fireEvent 键盘事件为 userEvent.keyboard 模拟Enter键 - 在触发键盘事件前手动聚焦目标按钮，确保事件正确触发 * docs: 添加页面级 ErrorBoundary 设计文档 为懒加载页面组件添加独立 ErrorBoundary 保护的设计方案。 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * feat(PageErrorBoundary): 添加页面级错误边界组件 轻量内嵌错误卡片，支持 resetKey 自动重置和重试按钮。 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * test(PageErrorBoundary): 添加页面级错误边界单元测试 覆盖正常渲染、错误捕获、重试恢复、resetKey 自动重置等场景。 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * feat(RouterContainer): 在 Suspense 内层添加 PageErrorBoundary 以 currentPage 为 resetKey，页面切换时自动重置错误状态。 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * feat(options): 使用 PageErrorBoundary 替换全局 ErrorBoundary options 页面统一使用页面级错误卡片，与 RouterContainer 体验一致。 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * feat(utils): add unified formatBytes function Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * test(utils): add formatBytes unit tests Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * refactor(utils): delegate formatByteSize to formatBytes - Add unified formatBytes to utils/format.ts - Update textStatistics.ts to re-export - Update test expectations for consistent decimal formatting Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * refactor(utils): delegate formatFileSize and formatSize to formatBytes - Update base64Converter.ts to re-export formatBytes as formatFileSize - Update storageCleaner.ts to re-export formatBytes as formatSize Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * feat(base64Converter): 支持 data URI 解码并优化错误提示 - base64ToText 支持自动剥离 data:<mime>;base64, 前缀进行正确解码 - 解码非 UTF-8 数据（如图片）时抛出友好错误，提示切换至图像模式 - TextMode 组件增加基于输入内容智能提示，解码图片类型时显示切换图像模式按钮 - 添加切换图像模式的回调支持及对应 UI 提示 - 增加对应单元测试覆盖新增功能和错误处理 - 更新中英文国际化文案，增加新的错误和提示信息 - eslint 配置调整，允许测试文件使用 any 类型警告关闭 * feat(base64Converter): 添加文件与图像模式的Base64解码及下载功能 - 增加文件模式的Base64解码功能，支持手动输入Base64内容进行解码 - 添加解码后的文件名编辑与下载按钮，提升用户操作便捷性 - 实现文件模式中编码与解码的切换按钮，并保留用户选择状态 - 图像模式同步新增解码功能，支持Base64字符串或数据URI的转换 - 图像解码结果显示预览图像、推断MIME类型、解码大小信息 - 增设统一错误处理机制，提示无效Base64字符串错误 - 更新i18n翻译词条，新增解码相关UI文字描述 - 扩展单元测试覆盖编码/解码切换及解码异常处理场景 * feat(eslint): 在测试文件规则中添加对未使用变量的警告配置 * fix(storageCleaner): 更新错误消息以反映清理操作的上下文 * feat(RouterProvider): 使用 ref 持有最新 currentPage，优化 chrome.storage 监听器注册 * fix(StorageSchema): 更新 RouterProvider 相关路由键的注释以反映默认行为 * feat(base64Converter): 添加对 BMP 和 WebP 文件类型的支持，更新魔数签名匹配规则 * fix(LiveClock): 修复定时器变量命名以提高代码可读性 * fix(storageCleaner): 使用 TextEncoder 准确计算 UTF-8 字节数 将 getCookieSize、getLocalStorageSize 和 getSessionStorageSize 中的字符串 .length 替换为 TextEncoder.encode().length， 避免 Unicode 字符导致的大小低估问题。 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> * refactor: 移除不必要的样式定义，简化模式切换按钮的样式 * feat(SwitchButtonGroup): 添加 SwitchButtonGroup 组件及其测试用例，替换现有的 ToggleButtonGroup * feat(SwitchButtonGroup): 添加 size 和 buttonSx 属性支持，并更新测试用例 * feat(MarkdownToHtml): 替换 ToggleButtonGroup 为 SwitchButtonGroup，简化模式切换逻辑 * feat: 替换 ToggleButtonGroup 为 SwitchButtonGroup，简化模式切换逻辑 * chore: 移除不必要的 compile 脚本 * feat: 更新 SwitchButtonGroup 组件，支持 number 类型和自定义样式，替换多个 ToggleButtonGroup 实现 * feat(Timestamp): 更新单位和时区选择样式，支持自适应宽度和换行 * feat: 更新比较按钮样式，添加 nowrap 属性以防止换行 * style(HTML转Markdown页): 替换旧版InputProps为新版slotProps 将Material UI组件的InputProps属性更新为slotProps语法，适配最新组件API * feat: 添加 TextInputArea 多行文本输入组件及配套测试 新增功能完整的 TextInputArea 组件，支持受控/非受控模式、字符计数、复制清空、表单验证、自定义操作按钮等特性，同时编写了全面的单元测试覆盖所有核心功能。 * refactor(TopBar,JWT): 移动常量定义并重构JWT页面 1. 将TopBar的常量从pageTheme.ts移至组件内 2. 移除pageTheme.ts中废弃的topBarStyles定义 3. 重构JWT页面：替换TextField为TextInputArea组件 4. 简化JWT页面的输入处理逻辑 * feat(TextInputArea): 添加 sx 样式透传支持 新增 TextInputArea 组件的 sx 属性，支持透传样式到外层容器，新增对应测试用例验证样式生效 * refactor(TextStatistics): 抽离文本输入区域为公共组件 将原页面内的TextField文本输入框抽离为TextInputArea公共组件，简化当前页面代码，复用组件样式与逻辑 * feat(TextInputArea): 添加外部错误属性，支持父组件控制错误展示 - 新增externalError属性，优先级高于内部验证错误 - 新增配套测试用例验证外部错误的展示和优先级逻辑 * feat(textInputArea): 实现国际化适配并完善组件功能 1. 为文本输入区域组件添加多语言支持，新增中英文字段 2. 重构清空和复制按钮，使用国际化文案替代硬编码 3. 新增onClear回调属性，新增对应测试用例 4. 调整底部操作栏布局，合并操作按钮显示逻辑 5. 优化字符计数提示文案为国际化形式 * refactor(utils/jwt): 替换硬编码错误提示为国际化文案 1. 新增中英文多语言错误提示文案 2. 将decodeBase64Url和parseJwt中的硬编码错误信息替换为i18n翻译内容 3. 更新JWT格式错误的校验提示文案 4. 调整测试用例适配新的错误信息校验逻辑 * feat(components): 添加 DecodeResultPaper 通用结果展示组件及测试用例 提取 FileMode 和 ImageMode 共用的解码结果展示Paper结构，包含标题、预览区、文件信息、文件名输入和下载按钮，同时补充完整的单元测试覆盖渲染和交互逻辑 * refactor(Base64Converter): 重构页面组件，统一使用TextInputArea组件 1. 替换原有TextField为公共TextInputArea组件，减少重复代码 2. 抽离工具栏操作逻辑，使用useMemo缓存动作配置 3. 统一错误提示和输出区域的渲染逻辑，复用DecodeResultPaper组件 4. 更新测试用例，适配新的元素选择方式 * refactor(JsonTools): 替换原生TextField为复用的TextInputArea组件 统一JSON工具页面的输入框组件，移除冗余的样式和错误提示代码，简化页面代码结构 * refactor(Jwt页面): 优化错误提示实现方式 将手动实现的错误提示组件替换为通过externalError属性传递的方式，移除未使用的ErrorOutlineIcon导入，简化代码结构 * ci(github workflow): 修正CI脚本中的类型检查命令 将原本执行编译的npm run compile替换为正确的类型检查命令npm run typecheck
This commit is contained in:
LingandRX
@@ -45,15 +45,14 @@ export const CopyButton: React.FC<CopyButtonProps> = ({
|
||||
|
||||
const handleCopy = async () => {
|
||||
if (text) {
|
||||
await copyTextToClipboard(text)
|
||||
.then(() => {
|
||||
showMessage?.('复制成功', { severity: 'success' });
|
||||
setCopied(true);
|
||||
setTimeout(() => setCopied(false), 1500);
|
||||
})
|
||||
.catch(() => {
|
||||
showMessage?.('复制失败', { severity: 'error' });
|
||||
});
|
||||
const success = await copyTextToClipboard(text);
|
||||
if (success) {
|
||||
showMessage?.('复制成功', { severity: 'success' });
|
||||
setCopied(true);
|
||||
setTimeout(() => setCopied(false), 1500);
|
||||
} else {
|
||||
showMessage?.('复制失败', { severity: 'error' });
|
||||
}
|
||||
} else {
|
||||
showMessage?.('无内容可复制', { severity: 'error' });
|
||||
}
|
||||
|
||||
@@ -0,0 +1,99 @@
|
||||
/**
|
||||
* DecodeResultPaper
|
||||
*
|
||||
* FileMode 与 ImageMode 通用的 decode 结果展示组件。
|
||||
* 提取了二者 decode 输出区完全一致的 Paper 结构：
|
||||
* 标题 → 可选预览（children）→ 文件信息 → 文件名输入 → 下载按钮
|
||||
*
|
||||
* FileMode 直接使用，ImageMode 通过 children 传入图片预览。
|
||||
*/
|
||||
import { alpha, Button, Paper, Stack, TextField, Typography } from '@mui/material';
|
||||
import DownloadIcon from '@mui/icons-material/Download';
|
||||
import { formatFileSize } from '@/utils/base64Converter';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
interface DecodeResultPaperProps {
|
||||
/** 标题文案，由调用方传入 i18n key 对应的值（如 decodedFileOutput / decodedImageOutput） */
|
||||
title: string;
|
||||
/** 解码后推断的 MIME 类型 */
|
||||
mimeType: string;
|
||||
/** 解码后 Blob 的大小（字节） */
|
||||
blobSize: number;
|
||||
/** 当前文件名 */
|
||||
fileName: string;
|
||||
/** 文件名变更回调 */
|
||||
onFileNameChange: (name: string) => void;
|
||||
/** 下载按钮点击回调 */
|
||||
onDownload: () => void;
|
||||
/** 可选的预览内容，ImageMode 用于渲染图片预览 */
|
||||
children?: React.ReactNode;
|
||||
}
|
||||
|
||||
export default function DecodeResultPaper({
|
||||
title,
|
||||
mimeType,
|
||||
blobSize,
|
||||
fileName,
|
||||
onFileNameChange,
|
||||
onDownload,
|
||||
children,
|
||||
}: DecodeResultPaperProps) {
|
||||
const { t } = useTranslation('base64Converter');
|
||||
|
||||
return (
|
||||
<Paper
|
||||
elevation={0}
|
||||
sx={{
|
||||
p: 2,
|
||||
borderRadius: 3,
|
||||
bgcolor: (theme) => alpha(theme.palette.info.main, 0.04),
|
||||
border: '1px solid',
|
||||
borderColor: (theme) => alpha(theme.palette.info.main, 0.15),
|
||||
}}
|
||||
>
|
||||
{/* 标题 */}
|
||||
<Typography
|
||||
variant="caption"
|
||||
fontWeight={700}
|
||||
color="text.secondary"
|
||||
sx={{ mb: 1, display: 'block' }}
|
||||
>
|
||||
{title}
|
||||
</Typography>
|
||||
|
||||
{/* 可选预览内容（ImageMode 的图片） */}
|
||||
{children}
|
||||
|
||||
{/* 文件信息 */}
|
||||
<Stack direction="row" spacing={2} sx={{ mb: 1.5 }}>
|
||||
<Typography variant="caption" color="text.disabled">
|
||||
{t('inferredMimeType')}: {mimeType}
|
||||
</Typography>
|
||||
<Typography variant="caption" color="text.disabled">
|
||||
{t('decodedSize')}: {formatFileSize(blobSize)}
|
||||
</Typography>
|
||||
</Stack>
|
||||
|
||||
{/* 文件名输入 */}
|
||||
<TextField
|
||||
size="small"
|
||||
fullWidth
|
||||
label={t('decodedFileName')}
|
||||
value={fileName}
|
||||
onChange={(e) => onFileNameChange(e.target.value)}
|
||||
sx={{ mb: 1.5 }}
|
||||
/>
|
||||
|
||||
{/* 下载按钮 */}
|
||||
<Button
|
||||
variant="contained"
|
||||
onClick={onDownload}
|
||||
startIcon={<DownloadIcon />}
|
||||
disabled={!fileName.trim()}
|
||||
sx={{ borderRadius: 3, fontWeight: 700 }}
|
||||
>
|
||||
{t('download')}
|
||||
</Button>
|
||||
</Paper>
|
||||
);
|
||||
}
|
||||
@@ -30,6 +30,12 @@ export class ErrorBoundary extends Component<Props, State> {
|
||||
console.error('Uncaught error:', error, errorInfo);
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps: Props) {
|
||||
if (this.state.hasError && prevProps.children !== this.props.children) {
|
||||
this.setState({ hasError: false, error: null });
|
||||
}
|
||||
}
|
||||
|
||||
private handleReset = () => {
|
||||
window.location.reload();
|
||||
};
|
||||
|
||||
@@ -145,6 +145,7 @@ export function GlobalSnackbar({
|
||||
onClose,
|
||||
severity = defaultProps.severity,
|
||||
autoHideDuration = defaultProps.autoHideDuration,
|
||||
anchorOrigin = defaultProps.anchorOrigin,
|
||||
showAlert = defaultProps.showAlert,
|
||||
hideIcon = defaultProps.hideIcon,
|
||||
}: GlobalSnackbarProps): JSX.Element {
|
||||
@@ -154,7 +155,7 @@ export function GlobalSnackbar({
|
||||
open={open}
|
||||
autoHideDuration={autoHideDuration}
|
||||
onClose={onClose}
|
||||
anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
|
||||
anchorOrigin={anchorOrigin}
|
||||
disableWindowBlurListener
|
||||
sx={{
|
||||
zIndex: 999999,
|
||||
|
||||
@@ -0,0 +1,124 @@
|
||||
import { Component, ErrorInfo, ReactNode } from 'react';
|
||||
import { Box, Button, Paper, Typography } from '@mui/material';
|
||||
import type { Theme } from '@mui/material/styles';
|
||||
import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
|
||||
import RefreshIcon from '@mui/icons-material/Refresh';
|
||||
|
||||
interface Props {
|
||||
children: ReactNode;
|
||||
resetKey?: string | number;
|
||||
}
|
||||
|
||||
interface State {
|
||||
hasError: boolean;
|
||||
error: Error | null;
|
||||
}
|
||||
|
||||
/**
|
||||
* 页面级错误边界组件：捕获子组件树中的 JavaScript 错误
|
||||
* 与全局 ErrorBoundary 的区别：使用轻量内嵌卡片 UI，提供重试按钮
|
||||
*/
|
||||
export class PageErrorBoundary extends Component<Props, State> {
|
||||
state: State = {
|
||||
hasError: false,
|
||||
error: null,
|
||||
};
|
||||
|
||||
static getDerivedStateFromError(error: Error): State {
|
||||
return { hasError: true, error };
|
||||
}
|
||||
|
||||
componentDidCatch(error: Error, errorInfo: ErrorInfo) {
|
||||
console.error('Uncaught error in page:', error, errorInfo);
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps: Props) {
|
||||
if (this.state.hasError && prevProps.resetKey !== this.props.resetKey) {
|
||||
this.setState({ hasError: false, error: null });
|
||||
}
|
||||
}
|
||||
|
||||
private handleRetry = () => {
|
||||
this.setState({ hasError: false, error: null });
|
||||
};
|
||||
|
||||
render() {
|
||||
if (this.state.hasError) {
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
flex: 1,
|
||||
p: 3,
|
||||
minHeight: 200,
|
||||
}}
|
||||
>
|
||||
<Paper
|
||||
elevation={0}
|
||||
sx={{
|
||||
p: 3,
|
||||
textAlign: 'center',
|
||||
borderRadius: 4,
|
||||
border: '1px solid',
|
||||
borderColor: 'error.light',
|
||||
bgcolor: 'rgba(211, 47, 47, 0.04)',
|
||||
maxWidth: 400,
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<ErrorOutlineIcon color="error" sx={{ fontSize: 48, mb: 1.5 }} />
|
||||
<Typography variant="h6" fontWeight={700} gutterBottom color="error.main">
|
||||
该页面加载失败
|
||||
</Typography>
|
||||
<Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
|
||||
页面在加载或渲染时遇到错误，您可以重试或切换到其他工具。
|
||||
</Typography>
|
||||
{this.state.error && (
|
||||
<Box
|
||||
sx={{
|
||||
mb: 2,
|
||||
p: 1.5,
|
||||
bgcolor: (theme: Theme) =>
|
||||
theme.palette.mode === 'dark' ? 'rgba(255,255,255,0.05)' : 'grey.100',
|
||||
borderRadius: 2,
|
||||
textAlign: 'left',
|
||||
maxHeight: '160px',
|
||||
overflow: 'auto',
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
variant="caption"
|
||||
component="pre"
|
||||
sx={{
|
||||
fontFamily: 'monospace',
|
||||
whiteSpace: 'pre-wrap',
|
||||
wordBreak: 'break-all',
|
||||
color: 'error.dark',
|
||||
}}
|
||||
>
|
||||
{this.state.error.toString()}
|
||||
</Typography>
|
||||
</Box>
|
||||
)}
|
||||
<Button
|
||||
variant="contained"
|
||||
color="error"
|
||||
startIcon={<RefreshIcon />}
|
||||
onClick={this.handleRetry}
|
||||
sx={{ borderRadius: 2, fontWeight: 700 }}
|
||||
>
|
||||
重试
|
||||
</Button>
|
||||
</Paper>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
return this.props.children;
|
||||
}
|
||||
}
|
||||
|
||||
export default PageErrorBoundary;
|
||||
@@ -2,6 +2,7 @@ import { Box, CircularProgress } from '@mui/material';
|
||||
import { FEATURES, getEntryPointType } from '@/config/features';
|
||||
import { useRouter } from '@/providers/RouterProvider';
|
||||
import { Suspense, useMemo } from 'react';
|
||||
import PageErrorBoundary from '@/components/PageErrorBoundary';
|
||||
|
||||
export default function RouterContainer() {
|
||||
const { currentPage, isLoaded } = useRouter();
|
||||
@@ -60,7 +61,7 @@ export default function RouterContainer() {
|
||||
</Box>
|
||||
}
|
||||
>
|
||||
{Component && <Component />}
|
||||
<PageErrorBoundary resetKey={currentPage}>{Component && <Component />}</PageErrorBoundary>
|
||||
</Suspense>
|
||||
</Box>
|
||||
);
|
||||
|
||||
@@ -0,0 +1,71 @@
|
||||
import { ToggleButton, ToggleButtonGroup, type SxProps, type Theme } from '@mui/material';
|
||||
|
||||
export interface SwitchOption<T extends string | number = string> {
|
||||
value: T;
|
||||
label: React.ReactNode;
|
||||
}
|
||||
|
||||
export interface SwitchButtonGroupProps<T extends string | number = string> {
|
||||
value: T;
|
||||
options: SwitchOption<T>[];
|
||||
onChange: (value: T) => void;
|
||||
sx?: SxProps<Theme>;
|
||||
size?: 'small' | 'medium' | 'large';
|
||||
buttonSx?: SxProps<Theme>;
|
||||
}
|
||||
|
||||
export default function SwitchButtonGroup<T extends string | number = string>({
|
||||
value,
|
||||
options,
|
||||
onChange,
|
||||
sx,
|
||||
size,
|
||||
buttonSx,
|
||||
}: SwitchButtonGroupProps<T>) {
|
||||
return (
|
||||
<ToggleButtonGroup
|
||||
value={value}
|
||||
exclusive
|
||||
size={size}
|
||||
onChange={(_, v) => v && onChange(v)}
|
||||
sx={{
|
||||
width: '100%',
|
||||
mb: 2,
|
||||
borderRadius: 4,
|
||||
bgcolor: (theme: Theme) => (theme.palette.mode === 'light' ? 'grey.100' : 'grey.900'),
|
||||
border: '1px solid',
|
||||
borderColor: 'divider',
|
||||
p: 0.6,
|
||||
'& .MuiToggleButtonGroup-grouped': {
|
||||
flex: 1,
|
||||
border: 'none',
|
||||
borderRadius: 3.5,
|
||||
mx: 0.3,
|
||||
fontWeight: 800,
|
||||
color: 'text.secondary',
|
||||
transition: 'color 0.3s',
|
||||
'&:not(:first-of-type)': {
|
||||
borderLeft: 'none',
|
||||
marginLeft: 0.6,
|
||||
},
|
||||
'&.Mui-selected': {
|
||||
bgcolor: 'background.paper',
|
||||
color: 'primary.main',
|
||||
boxShadow: '0 4px 12px rgba(0,0,0,0.05)',
|
||||
},
|
||||
},
|
||||
...sx,
|
||||
}}
|
||||
>
|
||||
{options.map((option) => (
|
||||
<ToggleButton
|
||||
key={option.value}
|
||||
value={option.value}
|
||||
sx={buttonSx ?? { px: 1.5, fontWeight: 700, whiteSpace: 'nowrap' }}
|
||||
>
|
||||
{option.label}
|
||||
</ToggleButton>
|
||||
))}
|
||||
</ToggleButtonGroup>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,515 @@
|
||||
/**
|
||||
* TextInputArea - 多行文本输入组件
|
||||
*
|
||||
* 提供功能丰富的多行文本输入体验，支持受控/非受控模式、验证规则、
|
||||
* 字符计数、工具栏操作、复制/清空等交互能力。
|
||||
*
|
||||
* @module TextInputArea
|
||||
*
|
||||
* @example
|
||||
* ```tsx
|
||||
* // 基础用法
|
||||
* <TextInputArea placeholder="请输入内容..." />
|
||||
*
|
||||
* // 受控模式
|
||||
* <TextInputArea value={text} onChange={setText} />
|
||||
*
|
||||
* // 带验证规则
|
||||
* <TextInputArea
|
||||
* rules={[{ validator: (v) => v.length >= 3, message: '至少3个字符' }]}
|
||||
* validateTrigger="onBlur"
|
||||
* />
|
||||
*
|
||||
* // 带操作按钮
|
||||
* <TextInputArea
|
||||
* actions={[
|
||||
* { key: 'submit', label: '提交', type: 'primary', onClick: handleSubmit },
|
||||
* ]}
|
||||
* />
|
||||
* ```
|
||||
*/
|
||||
|
||||
import { useRef, useState, useCallback, forwardRef, RefObject } from 'react';
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
IconButton,
|
||||
TextField,
|
||||
Tooltip,
|
||||
Typography,
|
||||
alpha,
|
||||
type SxProps,
|
||||
} from '@mui/material';
|
||||
import type { Theme } from '@mui/material/styles';
|
||||
import CloseIcon from '@mui/icons-material/Close';
|
||||
import ContentCopyIcon from '@mui/icons-material/ContentCopy';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import type { SnackbarOptions } from '@/components/GlobalSnackbar';
|
||||
|
||||
/** 文本验证规则 */
|
||||
export type ValidateRule = {
|
||||
/** 验证函数，返回 true 表示通过 */
|
||||
validator: (value: string) => boolean;
|
||||
/** 验证失败时的提示消息 */
|
||||
message: string;
|
||||
};
|
||||
|
||||
/** 工具栏操作按钮配置 */
|
||||
export type ToolbarAction = {
|
||||
/** 唯一标识 */
|
||||
key: string;
|
||||
/** 按钮显示文本 */
|
||||
label: string;
|
||||
/** 按钮图标 */
|
||||
icon?: React.ReactNode;
|
||||
/** 按钮位置：顶部或底部，默认顶部 */
|
||||
position?: 'top' | 'bottom';
|
||||
/** 按钮样式类型：主要/默认/危险 */
|
||||
type?: 'primary' | 'default' | 'danger';
|
||||
/** 禁用条件，可以是布尔值或根据当前值动态判断的函数 */
|
||||
disabled?: boolean | ((value: string) => boolean);
|
||||
/** 点击回调，接收当前值和操作辅助方法 */
|
||||
onClick: (value: string, helpers: { clear: () => void; setError: (msg: string) => void }) => void;
|
||||
};
|
||||
|
||||
export interface TextInputAreaProps {
|
||||
/** 受控模式下的当前值 */
|
||||
value?: string;
|
||||
/** 非受控模式下的初始值，组件挂载时有效 */
|
||||
defaultValue?: string;
|
||||
/** 值变化回调 */
|
||||
onChange?: (value: string) => void;
|
||||
/** 占位文本 */
|
||||
placeholder?: string;
|
||||
/** 是否禁用 */
|
||||
disabled?: boolean;
|
||||
/** 是否只读 */
|
||||
readOnly?: boolean;
|
||||
/** 是否自动聚焦 */
|
||||
autoFocus?: boolean;
|
||||
|
||||
/** 最小行数（autoResize 为 true 时生效） */
|
||||
minRows?: number;
|
||||
/** 最大行数（autoResize 为 true 时生效） */
|
||||
maxRows?: number;
|
||||
/** 最大字符数限制 */
|
||||
maxLength?: number;
|
||||
/** 外层容器类名 */
|
||||
className?: string;
|
||||
/** 外层容器样式 */
|
||||
style?: React.CSSProperties;
|
||||
/** 外层容器 sx */
|
||||
sx?: SxProps<Theme>;
|
||||
|
||||
/** 是否显示字符计数 */
|
||||
showCount?: boolean;
|
||||
/** 是否显示清空按钮，默认 true */
|
||||
showClear?: boolean;
|
||||
/** 是否允许复制内容 */
|
||||
allowCopy?: boolean;
|
||||
/** 是否启用自动调整高度，默认 true */
|
||||
autoResize?: boolean;
|
||||
|
||||
/** 验证规则列表 */
|
||||
rules?: ValidateRule[];
|
||||
/** 验证触发时机：失焦(onBlur) / 输入时(onChange) / 操作前(onAction)，默认 onAction */
|
||||
validateTrigger?: 'onBlur' | 'onChange' | 'onAction';
|
||||
|
||||
/** 工具栏操作按钮列表 */
|
||||
actions?: ToolbarAction[];
|
||||
/** 顶部栏左侧额外内容 */
|
||||
topExtra?: React.ReactNode;
|
||||
|
||||
/** 顶部栏标题 */
|
||||
title?: string;
|
||||
|
||||
/** 消息提示回调，用于展示 Toast 通知 */
|
||||
showMessage?: (message: string, options?: SnackbarOptions) => void;
|
||||
|
||||
/** 外部错误消息，由父组件控制，优先于内部验证错误 */
|
||||
externalError?: string;
|
||||
|
||||
/** 清空按钮点击后的额外回调 */
|
||||
onClear?: () => void;
|
||||
}
|
||||
|
||||
/** ActionButton 内部组件的属性 */
|
||||
interface ActionButtonProps {
|
||||
action: ToolbarAction;
|
||||
value: string;
|
||||
globalDisabled: boolean;
|
||||
variant?: 'text' | 'contained';
|
||||
onAction: (action: ToolbarAction) => void;
|
||||
size?: 'small' | 'medium';
|
||||
compact?: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* 工具栏操作按钮 - 根据 action.type 自动应用样式
|
||||
*
|
||||
* - primary：填充主色背景
|
||||
* - danger：红色文字 + 悬停红色背景
|
||||
* - default（默认）：灰色文字 + 悬停灰色背景
|
||||
*/
|
||||
function ActionButton({
|
||||
action,
|
||||
value,
|
||||
globalDisabled,
|
||||
variant = 'text',
|
||||
onAction,
|
||||
size = 'small',
|
||||
compact,
|
||||
}: ActionButtonProps) {
|
||||
const isBtnDisabled =
|
||||
typeof action.disabled === 'function' ? action.disabled(value) : action.disabled || !value;
|
||||
|
||||
const typeStyles: Record<string, unknown> = {};
|
||||
|
||||
if (action.type === 'primary') {
|
||||
if (variant !== 'contained') {
|
||||
typeStyles.bgcolor = 'primary.main';
|
||||
typeStyles.color = 'primary.contrastText';
|
||||
typeStyles['&:hover'] = { bgcolor: 'primary.dark' };
|
||||
}
|
||||
} else if (action.type === 'danger') {
|
||||
typeStyles.color = 'error.main';
|
||||
typeStyles['&:hover'] = {
|
||||
bgcolor: (theme: Theme) => alpha(theme.palette.error.main, 0.08),
|
||||
};
|
||||
} else {
|
||||
typeStyles.color = 'text.secondary';
|
||||
typeStyles['&:hover'] = {
|
||||
bgcolor: (theme: Theme) => alpha(theme.palette.grey[500], 0.1),
|
||||
};
|
||||
}
|
||||
|
||||
return (
|
||||
<Button
|
||||
onClick={() => onAction(action)}
|
||||
disabled={isBtnDisabled || globalDisabled}
|
||||
size={size}
|
||||
variant={variant}
|
||||
startIcon={action.icon}
|
||||
sx={{
|
||||
fontWeight: 600,
|
||||
borderRadius: 2,
|
||||
...typeStyles,
|
||||
...(compact ? { fontSize: '0.75rem', px: 1.5, minWidth: 0 } : { fontSize: '0.8rem' }),
|
||||
}}
|
||||
>
|
||||
{action.label}
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* TextInputArea 组件
|
||||
*
|
||||
* 多行文本输入组件，支持受控/非受控双模式、验证规则、工具栏操作等。
|
||||
* 使用 forwardRef 暴露底层 textarea DOM 节点。
|
||||
*/
|
||||
const TextInputArea = forwardRef<HTMLTextAreaElement, TextInputAreaProps>((props, ref) => {
|
||||
const {
|
||||
value: controlledValue,
|
||||
defaultValue = '',
|
||||
onChange,
|
||||
placeholder: placeholderProp,
|
||||
disabled = false,
|
||||
readOnly = false,
|
||||
autoFocus = false,
|
||||
minRows = 4,
|
||||
maxRows = 12,
|
||||
maxLength,
|
||||
className = '',
|
||||
style,
|
||||
sx: containerSx,
|
||||
showCount = false,
|
||||
showClear = true,
|
||||
allowCopy = false,
|
||||
autoResize = true,
|
||||
rules = [],
|
||||
validateTrigger = 'onAction',
|
||||
actions = [],
|
||||
topExtra,
|
||||
title,
|
||||
showMessage,
|
||||
externalError,
|
||||
onClear,
|
||||
} = props;
|
||||
|
||||
const textareaRef = useRef<HTMLTextAreaElement | null>(null);
|
||||
const [internalValue, setInternalValue] = useState(defaultValue);
|
||||
const [error, setError] = useState<string>('');
|
||||
|
||||
const { t } = useTranslation('common');
|
||||
const placeholder = placeholderProp ?? t('textInputArea.placeholder');
|
||||
|
||||
/** 通过 value prop 是否存在来判断是否为受控模式 */
|
||||
const isControlled = controlledValue !== undefined;
|
||||
const value = isControlled ? controlledValue : internalValue;
|
||||
|
||||
/** 外部错误优先级高于内部验证错误 */
|
||||
const displayError = externalError ?? error;
|
||||
|
||||
/**
|
||||
* 执行所有验证规则
|
||||
* @param trigger - 触发验证的事件类型，用于匹配 validateTrigger
|
||||
*/
|
||||
const validate = useCallback(
|
||||
(val: string, trigger?: string): boolean => {
|
||||
if (validateTrigger !== trigger && trigger) return true;
|
||||
for (const rule of rules) {
|
||||
if (!rule.validator(val)) {
|
||||
setError(rule.message);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
setError('');
|
||||
return true;
|
||||
},
|
||||
[rules, validateTrigger],
|
||||
);
|
||||
|
||||
/** 输入变化处理：更新值、清空错误、按需触发验证 */
|
||||
const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
|
||||
const newVal = e.target.value;
|
||||
if (maxLength && newVal.length > maxLength) {
|
||||
const msg = t('charCount', { count: maxLength });
|
||||
setError(msg);
|
||||
showMessage?.(msg, { severity: 'warning' });
|
||||
return;
|
||||
}
|
||||
|
||||
if (!isControlled) setInternalValue(newVal);
|
||||
onChange?.(newVal);
|
||||
|
||||
if (error) setError('');
|
||||
if (validateTrigger === 'onChange') validate(newVal, 'onChange');
|
||||
};
|
||||
|
||||
/** 失焦时按需触发验证 */
|
||||
const handleBlur = () => {
|
||||
if (validateTrigger === 'onBlur') validate(value, 'onBlur');
|
||||
};
|
||||
|
||||
/** 清空输入内容并重新聚焦 */
|
||||
const handleClear = useCallback(() => {
|
||||
if (!isControlled) setInternalValue('');
|
||||
onChange?.('');
|
||||
setError('');
|
||||
textareaRef.current?.focus();
|
||||
showMessage?.(t('textInputArea.cleared'), { severity: 'success' });
|
||||
onClear?.();
|
||||
}, [isControlled, onChange, showMessage, t, onClear]);
|
||||
|
||||
/** 复制当前内容到剪贴板 */
|
||||
const handleCopy = useCallback(async () => {
|
||||
try {
|
||||
await navigator.clipboard.writeText(value);
|
||||
showMessage?.(t('messages.copySuccess'), { severity: 'success' });
|
||||
} catch {
|
||||
setError(t('messages.copyError'));
|
||||
showMessage?.(t('messages.copyError'), { severity: 'error' });
|
||||
}
|
||||
}, [value, showMessage, t]);
|
||||
|
||||
/** 执行工具栏操作：检查禁用状态、验证、调用 onClick */
|
||||
const handleAction = useCallback(
|
||||
(action: ToolbarAction) => {
|
||||
const isDisabled =
|
||||
typeof action.disabled === 'function' ? action.disabled(value) : action.disabled;
|
||||
|
||||
if (isDisabled || disabled) return;
|
||||
|
||||
if (validateTrigger === 'onAction' && !validate(value, 'onAction')) {
|
||||
return;
|
||||
}
|
||||
|
||||
action.onClick(value, {
|
||||
clear: handleClear,
|
||||
setError,
|
||||
});
|
||||
},
|
||||
[value, disabled, validate, validateTrigger, handleClear],
|
||||
);
|
||||
|
||||
/** 合并内部 ref 和外部传入的 forwardRef */
|
||||
const handleInputRef = useCallback(
|
||||
(node: HTMLTextAreaElement | null) => {
|
||||
textareaRef.current = node;
|
||||
if (typeof ref === 'function') {
|
||||
ref(node);
|
||||
} else if (ref) {
|
||||
(ref as RefObject<HTMLTextAreaElement | null>).current = node;
|
||||
}
|
||||
},
|
||||
[ref],
|
||||
);
|
||||
|
||||
const topActions = actions.filter((a) => a.position !== 'bottom');
|
||||
const bottomActions = actions.filter((a) => a.position === 'bottom');
|
||||
|
||||
const hasTopBar = title || showCount || topActions.length > 0 || topExtra;
|
||||
|
||||
return (
|
||||
<Box className={className} style={style} sx={containerSx}>
|
||||
{hasTopBar && (
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
mb: 1,
|
||||
px: 0.5,
|
||||
}}
|
||||
>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
|
||||
{title && (
|
||||
<Typography variant="body2" sx={{ fontWeight: 600, color: 'text.secondary' }}>
|
||||
{title}
|
||||
</Typography>
|
||||
)}
|
||||
{topExtra}
|
||||
</Box>
|
||||
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
|
||||
{topActions.map((action) => (
|
||||
<ActionButton
|
||||
key={action.key}
|
||||
action={action}
|
||||
value={value}
|
||||
globalDisabled={disabled}
|
||||
onAction={handleAction}
|
||||
compact
|
||||
/>
|
||||
))}
|
||||
{showCount && (
|
||||
<Typography
|
||||
variant="caption"
|
||||
sx={{ color: 'text.disabled', fontVariantNumeric: 'tabular-nums', ml: 0.5 }}
|
||||
>
|
||||
{value.length}
|
||||
{maxLength ? ` / ${maxLength}` : ''}
|
||||
</Typography>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
<Box sx={{ position: 'relative' }}>
|
||||
<TextField
|
||||
inputRef={handleInputRef}
|
||||
multiline
|
||||
fullWidth
|
||||
minRows={autoResize ? minRows : undefined}
|
||||
maxRows={autoResize ? maxRows : undefined}
|
||||
rows={autoResize ? undefined : minRows}
|
||||
placeholder={placeholder}
|
||||
value={value}
|
||||
onChange={handleChange}
|
||||
onBlur={handleBlur}
|
||||
disabled={disabled}
|
||||
autoFocus={autoFocus}
|
||||
error={Boolean(displayError)}
|
||||
helperText={displayError || undefined}
|
||||
slotProps={{
|
||||
input: { readOnly },
|
||||
formHelperText: {
|
||||
sx: { mx: 1.5, fontWeight: 600, '&.Mui-error': { color: 'error.main' } },
|
||||
},
|
||||
}}
|
||||
sx={{
|
||||
'& .MuiOutlinedInput-root': {
|
||||
bgcolor: 'background.paper',
|
||||
borderRadius: 3,
|
||||
fontSize: '0.875rem',
|
||||
fontFamily: 'monospace',
|
||||
lineHeight: 1.6,
|
||||
transition: 'all 0.2s',
|
||||
'&:hover': { bgcolor: 'action.hover' },
|
||||
'&.Mui-focused': {
|
||||
bgcolor: 'background.paper',
|
||||
boxShadow: (theme) => `${alpha(theme.palette.primary.main, 0.08)} 0 0 0 3px`,
|
||||
},
|
||||
'&.Mui-error': {
|
||||
boxShadow: (theme) => `${alpha(theme.palette.error.main, 0.08)} 0 0 0 3px`,
|
||||
},
|
||||
'& textarea': {
|
||||
py: 1.5,
|
||||
px: 1.5,
|
||||
...(showClear || allowCopy || bottomActions.length > 0 ? { pb: 4 } : {}),
|
||||
},
|
||||
},
|
||||
'& .MuiFormHelperText-root': {
|
||||
mx: 0,
|
||||
mt: 0.5,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
|
||||
{(showClear || allowCopy || bottomActions.length > 0) && (
|
||||
<Box
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
bottom: displayError ? 32 : 8,
|
||||
right: 12,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 0.5,
|
||||
zIndex: 1,
|
||||
}}
|
||||
>
|
||||
{bottomActions.map((action) => (
|
||||
<ActionButton
|
||||
key={action.key}
|
||||
action={action}
|
||||
value={value}
|
||||
globalDisabled={disabled}
|
||||
variant={action.type === 'primary' ? 'contained' : 'text'}
|
||||
onAction={handleAction}
|
||||
/>
|
||||
))}
|
||||
{allowCopy && value && (
|
||||
<Tooltip title={t('textInputArea.copyContent')}>
|
||||
<IconButton
|
||||
onClick={handleCopy}
|
||||
size="small"
|
||||
sx={{
|
||||
color: 'text.disabled',
|
||||
'&:hover': {
|
||||
color: 'primary.main',
|
||||
bgcolor: (theme) => alpha(theme.palette.primary.main, 0.08),
|
||||
},
|
||||
}}
|
||||
>
|
||||
<ContentCopyIcon sx={{ fontSize: 16 }} />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
)}
|
||||
{showClear && value && !disabled && !readOnly && (
|
||||
<Tooltip title={t('textInputArea.clear')}>
|
||||
<IconButton
|
||||
onClick={handleClear}
|
||||
size="small"
|
||||
sx={{
|
||||
color: 'text.disabled',
|
||||
'&:hover': {
|
||||
color: 'error.main',
|
||||
bgcolor: (theme) => alpha(theme.palette.error.main, 0.08),
|
||||
},
|
||||
}}
|
||||
>
|
||||
<CloseIcon sx={{ fontSize: 16 }} />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
)}
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
});
|
||||
|
||||
TextInputArea.displayName = 'TextInputArea';
|
||||
|
||||
export default TextInputArea;
|
||||
+16
-4
@@ -31,7 +31,15 @@ import { openExtensionPage } from '@/utils/chromeTabs';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { alpha } from '@mui/material/styles';
|
||||
import { SUPPORTED_LANGUAGES, normalizeLanguage } from '@/i18n';
|
||||
import { topBarStyles } from '@/config/pageTheme';
|
||||
|
||||
const topBarStyles = {
|
||||
SEARCH_MAX_WIDTH: 400,
|
||||
DROPDOWN_MAX_HEIGHT: 300,
|
||||
Z_INDEX: 1100,
|
||||
DROPDOWN_Z_INDEX: 1200,
|
||||
SEARCH_HISTORY_LIMIT: 10,
|
||||
SEARCH_HISTORY_DISPLAY: 5,
|
||||
};
|
||||
|
||||
export default function TopBar({ onOpenOptions }: { onOpenOptions: () => void }) {
|
||||
const { currentPage, goBack, navigateTo } = useRouter();
|
||||
@@ -90,13 +98,17 @@ export default function TopBar({ onOpenOptions }: { onOpenOptions: () => void })
|
||||
0,
|
||||
topBarStyles.SEARCH_HISTORY_LIMIT,
|
||||
);
|
||||
storageUtil.set('app/searchHistory', newHistory).catch((error) => {
|
||||
console.error('保存搜索历史失败:', error);
|
||||
});
|
||||
return newHistory;
|
||||
});
|
||||
};
|
||||
|
||||
// 副作用：搜索历史变化后持久化到 storage
|
||||
useEffect(() => {
|
||||
storageUtil.set('app/searchHistory', searchHistory).catch((error) => {
|
||||
console.error('保存搜索历史失败:', error);
|
||||
});
|
||||
}, [searchHistory]);
|
||||
|
||||
const handleSelectFeature = (feature: FeatureConfig) => {
|
||||
navigateTo(feature.key);
|
||||
saveToHistory(t(feature.labelKey));
|
||||
|
||||
@@ -0,0 +1,83 @@
|
||||
import { beforeEach, describe, expect, it, vi } from 'vitest';
|
||||
import { fireEvent, render, screen } from '@testing-library/react';
|
||||
import DecodeResultPaper from '@/components/DecodeResultPaper';
|
||||
|
||||
describe('DecodeResultPaper 组件', () => {
|
||||
const defaultProps = {
|
||||
title: 'decodedFileOutput',
|
||||
mimeType: 'image/png',
|
||||
blobSize: 1024,
|
||||
fileName: 'decoded.png',
|
||||
onFileNameChange: vi.fn(),
|
||||
onDownload: vi.fn(),
|
||||
};
|
||||
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
describe('渲染测试', () => {
|
||||
it('应渲染标题', () => {
|
||||
render(<DecodeResultPaper {...defaultProps} />);
|
||||
expect(screen.getByText('decodedFileOutput')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('应渲染 MIME 类型信息', () => {
|
||||
render(<DecodeResultPaper {...defaultProps} />);
|
||||
expect(screen.getByText(/image\/png/)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('应通过 formatFileSize 渲染文件大小', () => {
|
||||
render(<DecodeResultPaper {...{ ...defaultProps, blobSize: 1536 }} />);
|
||||
expect(screen.getByText(/1\.5 KB/)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('应渲染文件名输入框', () => {
|
||||
render(<DecodeResultPaper {...defaultProps} />);
|
||||
const input = screen.getByDisplayValue('decoded.png');
|
||||
expect(input).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('应渲染下载按钮', () => {
|
||||
render(<DecodeResultPaper {...defaultProps} />);
|
||||
expect(screen.getByRole('button', { name: 'download' })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('应渲染 children 内容', () => {
|
||||
render(
|
||||
<DecodeResultPaper {...defaultProps}>
|
||||
<div data-testid="preview">预览内容</div>
|
||||
</DecodeResultPaper>,
|
||||
);
|
||||
expect(screen.getByTestId('preview')).toBeInTheDocument();
|
||||
expect(screen.getByText('预览内容')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('交互测试', () => {
|
||||
it('修改文件名时应调用 onFileNameChange', () => {
|
||||
render(<DecodeResultPaper {...defaultProps} />);
|
||||
const input = screen.getByDisplayValue('decoded.png');
|
||||
fireEvent.change(input, { target: { value: 'new-name.png' } });
|
||||
expect(defaultProps.onFileNameChange).toHaveBeenCalledWith('new-name.png');
|
||||
});
|
||||
|
||||
it('点击下载按钮时应调用 onDownload', () => {
|
||||
render(<DecodeResultPaper {...defaultProps} />);
|
||||
fireEvent.click(screen.getByRole('button', { name: 'download' }));
|
||||
expect(defaultProps.onDownload).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
});
|
||||
|
||||
describe('按钮状态', () => {
|
||||
it('文件名为空时下载按钮应禁用', () => {
|
||||
render(<DecodeResultPaper {...{ ...defaultProps, fileName: '' }} />);
|
||||
expect(screen.getByRole('button', { name: 'download' })).toBeDisabled();
|
||||
});
|
||||
|
||||
it('文件名不为空时下载按钮应启用', () => {
|
||||
render(<DecodeResultPaper {...defaultProps} />);
|
||||
expect(screen.getByRole('button', { name: 'download' })).toBeEnabled();
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,102 @@
|
||||
import { beforeEach, describe, expect, it, vi } from 'vitest';
|
||||
import { render, screen, waitFor } from '@testing-library/react';
|
||||
import { ErrorBoundary } from '@/components/ErrorBoundary';
|
||||
|
||||
// 用于触发错误的测试子组件
|
||||
function ThrowError({ message }: { message: string }): never {
|
||||
throw new Error(message);
|
||||
}
|
||||
|
||||
// 正常渲染的子组件
|
||||
function NormalComponent({ text }: { text: string }) {
|
||||
return <div data-testid="normal-content">{text}</div>;
|
||||
}
|
||||
|
||||
describe('ErrorBoundary', () => {
|
||||
beforeEach(() => {
|
||||
// 抑制测试中故意抛出的错误日志
|
||||
vi.spyOn(console, 'error').mockImplementation(() => {});
|
||||
});
|
||||
|
||||
it('正常渲染子组件', () => {
|
||||
render(
|
||||
<ErrorBoundary>
|
||||
<NormalComponent text="正常内容" />
|
||||
</ErrorBoundary>,
|
||||
);
|
||||
expect(screen.getByTestId('normal-content')).toHaveTextContent('正常内容');
|
||||
});
|
||||
|
||||
it('子组件抛出错误时显示错误 UI', () => {
|
||||
render(
|
||||
<ErrorBoundary>
|
||||
<ThrowError message="测试错误" />
|
||||
</ErrorBoundary>,
|
||||
);
|
||||
|
||||
expect(screen.getByText('糟糕，出了点问题')).toBeInTheDocument();
|
||||
expect(screen.getByText(/测试错误/)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('children 变化时重置错误状态', async () => {
|
||||
const { rerender } = render(
|
||||
<ErrorBoundary>
|
||||
<ThrowError message="初始错误" />
|
||||
</ErrorBoundary>,
|
||||
);
|
||||
|
||||
expect(screen.getByText('糟糕，出了点问题')).toBeInTheDocument();
|
||||
|
||||
// 切换到正常子组件
|
||||
rerender(
|
||||
<ErrorBoundary>
|
||||
<NormalComponent text="恢复后的内容" />
|
||||
</ErrorBoundary>,
|
||||
);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByTestId('normal-content')).toHaveTextContent('恢复后的内容');
|
||||
});
|
||||
|
||||
expect(screen.queryByText('糟糕，出了点问题')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('相同的 children 不重置错误状态', () => {
|
||||
const { rerender } = render(
|
||||
<ErrorBoundary>
|
||||
<ThrowError message="相同子组件错误" />
|
||||
</ErrorBoundary>,
|
||||
);
|
||||
|
||||
expect(screen.getByText('糟糕，出了点问题')).toBeInTheDocument();
|
||||
|
||||
// 用相同的 children rerender
|
||||
rerender(
|
||||
<ErrorBoundary>
|
||||
<ThrowError message="相同子组件错误" />
|
||||
</ErrorBoundary>,
|
||||
);
|
||||
|
||||
expect(screen.getByText('糟糕，出了点问题')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('错误 UI 包含刷新按钮', () => {
|
||||
const reloadMock = vi.fn();
|
||||
Object.defineProperty(window, 'location', {
|
||||
value: { reload: reloadMock },
|
||||
writable: true,
|
||||
});
|
||||
|
||||
render(
|
||||
<ErrorBoundary>
|
||||
<ThrowError message="按钮测试" />
|
||||
</ErrorBoundary>,
|
||||
);
|
||||
|
||||
const refreshButton = screen.getByRole('button', { name: /刷新应用/ });
|
||||
expect(refreshButton).toBeInTheDocument();
|
||||
|
||||
refreshButton.click();
|
||||
expect(reloadMock).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,131 @@
|
||||
import { beforeEach, describe, expect, it, vi } from 'vitest';
|
||||
import { render, screen, waitFor } from '@testing-library/react';
|
||||
import { PageErrorBoundary } from '@/components/PageErrorBoundary';
|
||||
|
||||
// 用于触发错误的测试子组件
|
||||
function ThrowError({ message }: { message: string }): never {
|
||||
throw new Error(message);
|
||||
}
|
||||
|
||||
// 正常渲染的子组件
|
||||
function NormalComponent({ text }: { text: string }) {
|
||||
return <div data-testid="normal-content">{text}</div>;
|
||||
}
|
||||
|
||||
describe('PageErrorBoundary', () => {
|
||||
beforeEach(() => {
|
||||
// 抑制测试中故意抛出的错误日志
|
||||
vi.spyOn(console, 'error').mockImplementation(() => {});
|
||||
});
|
||||
|
||||
it('正常渲染子组件', () => {
|
||||
render(
|
||||
<PageErrorBoundary>
|
||||
<NormalComponent text="正常内容" />
|
||||
</PageErrorBoundary>,
|
||||
);
|
||||
expect(screen.getByTestId('normal-content')).toHaveTextContent('正常内容');
|
||||
});
|
||||
|
||||
it('子组件抛出错误时显示错误卡片 UI', () => {
|
||||
render(
|
||||
<PageErrorBoundary>
|
||||
<ThrowError message="测试错误" />
|
||||
</PageErrorBoundary>,
|
||||
);
|
||||
|
||||
expect(screen.getByText('该页面加载失败')).toBeInTheDocument();
|
||||
expect(screen.getByText(/测试错误/)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('点击重试按钮后恢复', async () => {
|
||||
const { rerender } = render(
|
||||
<PageErrorBoundary>
|
||||
<ThrowError message="可恢复错误" />
|
||||
</PageErrorBoundary>,
|
||||
);
|
||||
|
||||
expect(screen.getByText('该页面加载失败')).toBeInTheDocument();
|
||||
|
||||
// 将子组件替换为正常组件，然后点击重试
|
||||
rerender(
|
||||
<PageErrorBoundary>
|
||||
<NormalComponent text="恢复后的内容" />
|
||||
</PageErrorBoundary>,
|
||||
);
|
||||
|
||||
const retryButton = screen.getByRole('button', { name: /重试/ });
|
||||
retryButton.click();
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByTestId('normal-content')).toHaveTextContent('恢复后的内容');
|
||||
});
|
||||
|
||||
expect(screen.queryByText('该页面加载失败')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('resetKey 变化时自动重置错误状态', async () => {
|
||||
const { rerender } = render(
|
||||
<PageErrorBoundary resetKey="page-a">
|
||||
<ThrowError message="页面 A 错误" />
|
||||
</PageErrorBoundary>,
|
||||
);
|
||||
|
||||
expect(screen.getByText('该页面加载失败')).toBeInTheDocument();
|
||||
|
||||
// 切换 resetKey，同时提供正常子组件
|
||||
rerender(
|
||||
<PageErrorBoundary resetKey="page-b">
|
||||
<NormalComponent text="页面 B 内容" />
|
||||
</PageErrorBoundary>,
|
||||
);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByTestId('normal-content')).toHaveTextContent('页面 B 内容');
|
||||
});
|
||||
|
||||
expect(screen.queryByText('该页面加载失败')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('resetKey 不变时保持错误状态', () => {
|
||||
const { rerender } = render(
|
||||
<PageErrorBoundary resetKey="page-a">
|
||||
<ThrowError message="初始错误" />
|
||||
</PageErrorBoundary>,
|
||||
);
|
||||
|
||||
expect(screen.getByText('该页面加载失败')).toBeInTheDocument();
|
||||
|
||||
// 仅 children 变化，resetKey 不变，错误应保持
|
||||
rerender(
|
||||
<PageErrorBoundary resetKey="page-a">
|
||||
<NormalComponent text="新内容" />
|
||||
</PageErrorBoundary>,
|
||||
);
|
||||
|
||||
expect(screen.getByText('该页面加载失败')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('错误 UI 包含重试按钮', () => {
|
||||
render(
|
||||
<PageErrorBoundary>
|
||||
<ThrowError message="按钮测试" />
|
||||
</PageErrorBoundary>,
|
||||
);
|
||||
|
||||
const retryButton = screen.getByRole('button', { name: /重试/ });
|
||||
expect(retryButton).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('错误信息以 monospace 格式显示', () => {
|
||||
render(
|
||||
<PageErrorBoundary>
|
||||
<ThrowError message="格式化测试" />
|
||||
</PageErrorBoundary>,
|
||||
);
|
||||
|
||||
const errorText = screen.getByText(/格式化测试/);
|
||||
expect(errorText).toBeInTheDocument();
|
||||
expect(errorText.tagName.toLowerCase()).toBe('pre');
|
||||
});
|
||||
});
|
||||
@@ -12,7 +12,6 @@ const mockRouterValue = {
|
||||
pageOrder: ['timestamp'] as PageType[],
|
||||
isLoaded: true,
|
||||
navigateTo: vi.fn(),
|
||||
navigateLocal: vi.fn(),
|
||||
syncNavigation: vi.fn(),
|
||||
goBack: vi.fn(),
|
||||
setVisiblePages: vi.fn(),
|
||||
@@ -83,4 +82,16 @@ describe('RouterContainer 组件', () => {
|
||||
expect(box).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('页面级错误隔离', () => {
|
||||
it('PageErrorBoundary 应包裹在 Suspense 内层', () => {
|
||||
mockRouterValue.isLoaded = true;
|
||||
mockRouterValue.currentPage = 'dashboard';
|
||||
const { container } = renderWithProvider(<RouterContainer />);
|
||||
|
||||
// 验证 RouterContainer 的 Box 结构存在
|
||||
const routerBox = container.querySelector('.page-transition-dashboard');
|
||||
expect(routerBox).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -0,0 +1,139 @@
|
||||
import { describe, expect, it, vi } from 'vitest';
|
||||
import { fireEvent, render, screen } from '@testing-library/react';
|
||||
import SwitchButtonGroup from '@/components/SwitchButtonGroup';
|
||||
|
||||
describe('SwitchButtonGroup 组件', () => {
|
||||
const options = [
|
||||
{ value: 'a', label: '选项A' },
|
||||
{ value: 'b', label: '选项B' },
|
||||
];
|
||||
|
||||
it('应渲染所有选项按钮', () => {
|
||||
render(<SwitchButtonGroup value="a" options={options} onChange={vi.fn()} />);
|
||||
|
||||
expect(screen.getByRole('button', { name: /选项A/i })).toBeInTheDocument();
|
||||
expect(screen.getByRole('button', { name: /选项B/i })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('应高亮当前选中的按钮', () => {
|
||||
render(<SwitchButtonGroup value="a" options={options} onChange={vi.fn()} />);
|
||||
|
||||
const buttonA = screen.getByRole('button', { name: /选项A/i });
|
||||
const buttonB = screen.getByRole('button', { name: /选项B/i });
|
||||
|
||||
expect(buttonA).toHaveClass('Mui-selected');
|
||||
expect(buttonB).not.toHaveClass('Mui-selected');
|
||||
});
|
||||
|
||||
it('点击未选中按钮时应触发 onChange 并传入选中值', () => {
|
||||
const handleChange = vi.fn();
|
||||
render(<SwitchButtonGroup value="a" options={options} onChange={handleChange} />);
|
||||
|
||||
fireEvent.click(screen.getByRole('button', { name: /选项B/i }));
|
||||
expect(handleChange).toHaveBeenCalledTimes(1);
|
||||
expect(handleChange).toHaveBeenCalledWith('b');
|
||||
});
|
||||
|
||||
it('点击已选中按钮时不应触发 onChange', () => {
|
||||
const handleChange = vi.fn();
|
||||
render(<SwitchButtonGroup value="a" options={options} onChange={handleChange} />);
|
||||
|
||||
fireEvent.click(screen.getByRole('button', { name: /选项A/i }));
|
||||
expect(handleChange).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('应支持通过 sx 自定义样式', () => {
|
||||
const { container } = render(
|
||||
<SwitchButtonGroup value="a" options={options} onChange={vi.fn()} sx={{ width: 200 }} />,
|
||||
);
|
||||
|
||||
const group = container.querySelector('.MuiToggleButtonGroup-root');
|
||||
expect(group).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('应支持 size 属性', () => {
|
||||
const { container } = render(
|
||||
<SwitchButtonGroup value="a" options={options} onChange={vi.fn()} size="small" />,
|
||||
);
|
||||
|
||||
const group = container.querySelector('.MuiToggleButtonGroup-root');
|
||||
expect(group).toBeInTheDocument();
|
||||
expect(group).toHaveClass('MuiToggleButtonGroup-root');
|
||||
});
|
||||
|
||||
it('应支持 buttonSx 自定义按钮样式', () => {
|
||||
render(
|
||||
<SwitchButtonGroup
|
||||
value="a"
|
||||
options={options}
|
||||
onChange={vi.fn()}
|
||||
buttonSx={{ textTransform: 'uppercase' }}
|
||||
/>,
|
||||
);
|
||||
|
||||
const button = screen.getByRole('button', { name: /选项A/i });
|
||||
expect(button).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('应支持 ReactNode 类型的 label', () => {
|
||||
const nodeOptions = [{ value: 'x', label: <span data-testid="custom-label">自定义</span> }];
|
||||
render(<SwitchButtonGroup value="x" options={nodeOptions} onChange={vi.fn()} />);
|
||||
|
||||
expect(screen.getByTestId('custom-label')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('默认按钮样式应禁止文字换行', () => {
|
||||
render(<SwitchButtonGroup value="a" options={options} onChange={vi.fn()} />);
|
||||
|
||||
const button = screen.getByRole('button', { name: /选项A/i });
|
||||
expect(button).toHaveStyle('white-space: nowrap');
|
||||
});
|
||||
|
||||
it('buttonSx 传入时应覆盖默认换行样式', () => {
|
||||
render(
|
||||
<SwitchButtonGroup
|
||||
value="a"
|
||||
options={options}
|
||||
onChange={vi.fn()}
|
||||
buttonSx={{ whiteSpace: 'normal' }}
|
||||
/>,
|
||||
);
|
||||
|
||||
const button = screen.getByRole('button', { name: /选项A/i });
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(window.getComputedStyle(button).whiteSpace).toBe('normal');
|
||||
});
|
||||
|
||||
describe('number 类型支持', () => {
|
||||
const numberOptions = [
|
||||
{ value: 2, label: '2' },
|
||||
{ value: 4, label: '4' },
|
||||
];
|
||||
|
||||
it('应支持 number 类型的 value 渲染', () => {
|
||||
render(<SwitchButtonGroup value={2} options={numberOptions} onChange={vi.fn()} />);
|
||||
|
||||
expect(screen.getByRole('button', { name: /2/i })).toBeInTheDocument();
|
||||
expect(screen.getByRole('button', { name: /4/i })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('应高亮 number 类型的当前选中项', () => {
|
||||
render(<SwitchButtonGroup value={4} options={numberOptions} onChange={vi.fn()} />);
|
||||
|
||||
const button2 = screen.getByRole('button', { name: /2/i });
|
||||
const button4 = screen.getByRole('button', { name: /4/i });
|
||||
|
||||
expect(button2).not.toHaveClass('Mui-selected');
|
||||
expect(button4).toHaveClass('Mui-selected');
|
||||
});
|
||||
|
||||
it('点击 number 选项时应传回 number 值', () => {
|
||||
const handleChange = vi.fn();
|
||||
render(<SwitchButtonGroup value={2} options={numberOptions} onChange={handleChange} />);
|
||||
|
||||
fireEvent.click(screen.getByRole('button', { name: /4/i }));
|
||||
expect(handleChange).toHaveBeenCalledTimes(1);
|
||||
expect(handleChange).toHaveBeenCalledWith(4);
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,523 @@
|
||||
import { describe, expect, it, vi } from 'vitest';
|
||||
import { fireEvent, render, screen } from '@testing-library/react';
|
||||
import TextInputArea from '@/components/TextInputArea';
|
||||
|
||||
describe('TextInputArea 组件', () => {
|
||||
describe('基础渲染', () => {
|
||||
it('应渲染 placeholder', () => {
|
||||
render(<TextInputArea placeholder="请输入文本..." />);
|
||||
expect(screen.getByPlaceholderText('请输入文本...')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('应渲染传入的 value', () => {
|
||||
render(<TextInputArea value="测试内容" onChange={() => {}} />);
|
||||
const textarea = screen.getByRole('textbox');
|
||||
expect(textarea).toHaveValue('测试内容');
|
||||
});
|
||||
|
||||
it('默认显示清空按钮', () => {
|
||||
render(<TextInputArea value="有内容" onChange={() => {}} />);
|
||||
expect(screen.getByRole('button', { name: 'textInputArea.clear' })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('无内容时清空按钮应隐藏', () => {
|
||||
render(<TextInputArea value="" onChange={() => {}} />);
|
||||
expect(screen.queryByRole('button', { name: 'textInputArea.clear' })).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('disabled 时清空按钮应隐藏', () => {
|
||||
render(<TextInputArea value="内容" onChange={() => {}} disabled />);
|
||||
expect(screen.queryByTitle('清空')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('readOnly 时清空按钮应隐藏', () => {
|
||||
render(<TextInputArea value="内容" onChange={() => {}} readOnly />);
|
||||
expect(screen.queryByTitle('清空')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('showClear=false 时不显示清空按钮', () => {
|
||||
render(<TextInputArea value="内容" onChange={() => {}} showClear={false} />);
|
||||
expect(screen.queryByTitle('清空')).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('受控模式', () => {
|
||||
it('输入时触发 onChange', () => {
|
||||
const handleChange = vi.fn();
|
||||
render(<TextInputArea value="" onChange={handleChange} />);
|
||||
|
||||
const textarea = screen.getByRole('textbox');
|
||||
fireEvent.change(textarea, { target: { value: '新内容' } });
|
||||
|
||||
expect(handleChange).toHaveBeenCalledWith('新内容');
|
||||
});
|
||||
|
||||
it('清空按钮触发 onChange("")', () => {
|
||||
const handleChange = vi.fn();
|
||||
render(<TextInputArea value="内容" onChange={handleChange} />);
|
||||
|
||||
fireEvent.click(screen.getByRole('button', { name: 'textInputArea.clear' }));
|
||||
|
||||
expect(handleChange).toHaveBeenCalledWith('');
|
||||
});
|
||||
});
|
||||
|
||||
describe('非受控模式', () => {
|
||||
it('defaultValue 应显示初始值', () => {
|
||||
render(<TextInputArea defaultValue="初始值" />);
|
||||
expect(screen.getByRole('textbox')).toHaveValue('初始值');
|
||||
});
|
||||
|
||||
it('输入后应更新内部值', () => {
|
||||
render(<TextInputArea defaultValue="" />);
|
||||
|
||||
const textarea = screen.getByRole('textbox');
|
||||
fireEvent.change(textarea, { target: { value: '新内容' } });
|
||||
|
||||
expect(textarea).toHaveValue('新内容');
|
||||
});
|
||||
|
||||
it('清空按钮应清空内容', () => {
|
||||
render(<TextInputArea defaultValue="内容" />);
|
||||
|
||||
fireEvent.click(screen.getByRole('button', { name: 'textInputArea.clear' }));
|
||||
|
||||
expect(screen.getByRole('textbox')).toHaveValue('');
|
||||
});
|
||||
});
|
||||
|
||||
describe('allowCopy 复制功能', () => {
|
||||
it('allowCopy 且有内容时显示复制按钮', () => {
|
||||
render(<TextInputArea value="可复制的内容" onChange={() => {}} allowCopy />);
|
||||
expect(screen.getByRole('button', { name: 'textInputArea.copyContent' })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('allowCopy 但无内容时隐藏复制按钮', () => {
|
||||
render(<TextInputArea value="" onChange={() => {}} allowCopy />);
|
||||
expect(
|
||||
screen.queryByRole('button', { name: 'textInputArea.copyContent' }),
|
||||
).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('allowCopy=false 时不显示复制按钮', () => {
|
||||
render(<TextInputArea value="内容" onChange={() => {}} />);
|
||||
expect(
|
||||
screen.queryByRole('button', { name: 'textInputArea.copyContent' }),
|
||||
).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('复制时调用 showMessage', async () => {
|
||||
const showMessage = vi.fn();
|
||||
Object.assign(navigator, {
|
||||
clipboard: { writeText: vi.fn().mockResolvedValue(undefined) },
|
||||
});
|
||||
|
||||
render(
|
||||
<TextInputArea value="测试" onChange={() => {}} allowCopy showMessage={showMessage} />,
|
||||
);
|
||||
|
||||
fireEvent.click(screen.getByRole('button', { name: 'textInputArea.copyContent' }));
|
||||
|
||||
expect(navigator.clipboard.writeText).toHaveBeenCalledWith('测试');
|
||||
await vi.waitFor(() => {
|
||||
expect(showMessage).toHaveBeenCalledWith('messages.copySuccess', { severity: 'success' });
|
||||
});
|
||||
});
|
||||
|
||||
it('复制失败时调用 showMessage 错误提示', async () => {
|
||||
const showMessage = vi.fn();
|
||||
Object.assign(navigator, {
|
||||
clipboard: { writeText: vi.fn().mockRejectedValue(new Error('失败')) },
|
||||
});
|
||||
|
||||
render(
|
||||
<TextInputArea value="测试" onChange={() => {}} allowCopy showMessage={showMessage} />,
|
||||
);
|
||||
|
||||
fireEvent.click(screen.getByRole('button', { name: 'textInputArea.copyContent' }));
|
||||
|
||||
await vi.waitFor(() => {
|
||||
expect(showMessage).toHaveBeenCalledWith('messages.copyError', { severity: 'error' });
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('showCount 字符计数', () => {
|
||||
it('显示当前字符数', () => {
|
||||
render(<TextInputArea value="hello" onChange={() => {}} showCount />);
|
||||
expect(screen.getByText('5')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('空内容时显示 0', () => {
|
||||
render(<TextInputArea value="" onChange={() => {}} showCount />);
|
||||
expect(screen.getByText('0')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('设置 maxLength 时显示计数上限', () => {
|
||||
render(<TextInputArea value="ab" onChange={() => {}} showCount maxLength={10} />);
|
||||
expect(screen.getByText('2 / 10')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('maxLength', () => {
|
||||
it('超出 maxLength 的输入应被截断', () => {
|
||||
const handleChange = vi.fn();
|
||||
render(<TextInputArea value="" onChange={handleChange} maxLength={5} />);
|
||||
|
||||
const textarea = screen.getByRole('textbox');
|
||||
fireEvent.change(textarea, { target: { value: '123456' } });
|
||||
|
||||
expect(handleChange).not.toHaveBeenCalledWith('123456');
|
||||
});
|
||||
|
||||
it('未超出 maxLength 的输入应正常触发', () => {
|
||||
const handleChange = vi.fn();
|
||||
render(<TextInputArea value="" onChange={handleChange} maxLength={5} />);
|
||||
|
||||
const textarea = screen.getByRole('textbox');
|
||||
fireEvent.change(textarea, { target: { value: '123' } });
|
||||
|
||||
expect(handleChange).toHaveBeenCalledWith('123');
|
||||
});
|
||||
});
|
||||
|
||||
describe('验证规则', () => {
|
||||
it('onChange 触发时验证失败应设置 error', () => {
|
||||
render(
|
||||
<TextInputArea
|
||||
value=""
|
||||
onChange={() => {}}
|
||||
validateTrigger="onChange"
|
||||
rules={[{ validator: (v) => v.length >= 3, message: '至少3个字符' }]}
|
||||
/>,
|
||||
);
|
||||
|
||||
const textarea = screen.getByRole('textbox');
|
||||
fireEvent.change(textarea, { target: { value: 'ab' } });
|
||||
|
||||
expect(screen.getByText('至少3个字符')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('onBlur 触发时验证失败应设置 error', () => {
|
||||
render(
|
||||
<TextInputArea
|
||||
value="ab"
|
||||
onChange={() => {}}
|
||||
validateTrigger="onBlur"
|
||||
rules={[{ validator: (v) => v.length >= 3, message: '至少3个字符' }]}
|
||||
/>,
|
||||
);
|
||||
|
||||
const textarea = screen.getByRole('textbox');
|
||||
fireEvent.blur(textarea);
|
||||
|
||||
expect(screen.getByText('至少3个字符')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('验证通过不应显示错误', () => {
|
||||
render(
|
||||
<TextInputArea
|
||||
value="abc"
|
||||
onChange={() => {}}
|
||||
validateTrigger="onChange"
|
||||
rules={[{ validator: (v) => v.length >= 3, message: '至少3个字符' }]}
|
||||
/>,
|
||||
);
|
||||
|
||||
const textarea = screen.getByRole('textbox');
|
||||
fireEvent.change(textarea, { target: { value: 'abcd' } });
|
||||
|
||||
expect(screen.queryByText('至少3个字符')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('onAction 触发时验证失败应阻止 action 执行', () => {
|
||||
const handleAction = vi.fn();
|
||||
render(
|
||||
<TextInputArea
|
||||
value="ab"
|
||||
onChange={() => {}}
|
||||
validateTrigger="onAction"
|
||||
rules={[{ validator: (v) => v.length >= 3, message: '至少3个字符' }]}
|
||||
actions={[
|
||||
{
|
||||
key: 'test',
|
||||
label: '执行',
|
||||
onClick: handleAction,
|
||||
},
|
||||
]}
|
||||
/>,
|
||||
);
|
||||
|
||||
fireEvent.click(screen.getByText('执行'));
|
||||
|
||||
expect(handleAction).not.toHaveBeenCalled();
|
||||
expect(screen.getByText('至少3个字符')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('操作栏 actions', () => {
|
||||
it('应渲染顶部操作按钮', () => {
|
||||
render(
|
||||
<TextInputArea
|
||||
value="内容"
|
||||
onChange={() => {}}
|
||||
actions={[{ key: 'top-action', label: '顶部操作', onClick: vi.fn() }]}
|
||||
/>,
|
||||
);
|
||||
|
||||
expect(screen.getByText('顶部操作')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('应渲染底部操作按钮', () => {
|
||||
render(
|
||||
<TextInputArea
|
||||
value="内容"
|
||||
onChange={() => {}}
|
||||
actions={[
|
||||
{ key: 'bottom-action', label: '底部操作', position: 'bottom', onClick: vi.fn() },
|
||||
]}
|
||||
/>,
|
||||
);
|
||||
|
||||
expect(screen.getByText('底部操作')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('点击操作按钮触发 onClick', () => {
|
||||
const handleClick = vi.fn();
|
||||
render(
|
||||
<TextInputArea
|
||||
value="内容"
|
||||
onChange={() => {}}
|
||||
actions={[{ key: 'act', label: '操作', onClick: handleClick }]}
|
||||
/>,
|
||||
);
|
||||
|
||||
fireEvent.click(screen.getByText('操作'));
|
||||
|
||||
expect(handleClick).toHaveBeenCalledWith(
|
||||
'内容',
|
||||
expect.objectContaining({
|
||||
clear: expect.any(Function),
|
||||
setError: expect.any(Function),
|
||||
}),
|
||||
);
|
||||
});
|
||||
|
||||
it('disabled 为 true 时按钮应禁用', () => {
|
||||
render(
|
||||
<TextInputArea
|
||||
value=""
|
||||
onChange={() => {}}
|
||||
actions={[{ key: 'act', label: '操作', onClick: vi.fn(), disabled: true }]}
|
||||
/>,
|
||||
);
|
||||
|
||||
expect(screen.getByText('操作')).toBeDisabled();
|
||||
});
|
||||
|
||||
it('disabled 为函数且返回 true 时按钮应禁用', () => {
|
||||
render(
|
||||
<TextInputArea
|
||||
value=""
|
||||
onChange={() => {}}
|
||||
actions={[{ key: 'act', label: '操作', onClick: vi.fn(), disabled: (v) => !v }]}
|
||||
/>,
|
||||
);
|
||||
|
||||
expect(screen.getByText('操作')).toBeDisabled();
|
||||
});
|
||||
|
||||
it('primary 类型按钮应使用 contained 样式', () => {
|
||||
render(
|
||||
<TextInputArea
|
||||
value="内容"
|
||||
onChange={() => {}}
|
||||
actions={[
|
||||
{ key: 'p', label: '主要', type: 'primary', position: 'bottom', onClick: vi.fn() },
|
||||
]}
|
||||
/>,
|
||||
);
|
||||
|
||||
const btn = screen.getByText('主要');
|
||||
expect(btn).toHaveClass('MuiButton-contained');
|
||||
});
|
||||
});
|
||||
|
||||
describe('title', () => {
|
||||
it('应渲染 title', () => {
|
||||
render(<TextInputArea title="输入区域" value="" onChange={() => {}} />);
|
||||
expect(screen.getByText('输入区域')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('不设置 title 时不渲染标题', () => {
|
||||
const { container } = render(<TextInputArea value="" onChange={() => {}} />);
|
||||
expect(container.querySelector('.MuiTypography-body2')).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('disabled 和 readOnly', () => {
|
||||
it('disabled 时输入框应禁用', () => {
|
||||
render(<TextInputArea value="内容" onChange={() => {}} disabled />);
|
||||
expect(screen.getByRole('textbox')).toBeDisabled();
|
||||
});
|
||||
|
||||
it('readOnly 时输入框应只读', () => {
|
||||
render(<TextInputArea value="内容" onChange={() => {}} readOnly />);
|
||||
// MUI TextField 的 readOnly 通过 inputProps 设置，textarea 不会被禁用
|
||||
expect(screen.getByRole('textbox')).not.toBeDisabled();
|
||||
});
|
||||
});
|
||||
|
||||
describe('autoFocus', () => {
|
||||
it('autoFocus 应自动聚焦', () => {
|
||||
render(<TextInputArea autoFocus value="" onChange={() => {}} />);
|
||||
expect(document.activeElement).toBe(screen.getByRole('textbox'));
|
||||
});
|
||||
});
|
||||
|
||||
describe('showMessage prop', () => {
|
||||
it('复制成功时调用 showMessage', async () => {
|
||||
const showMessage = vi.fn();
|
||||
Object.assign(navigator, {
|
||||
clipboard: { writeText: vi.fn().mockResolvedValue(undefined) },
|
||||
});
|
||||
|
||||
render(
|
||||
<TextInputArea value="测试" onChange={() => {}} allowCopy showMessage={showMessage} />,
|
||||
);
|
||||
fireEvent.click(screen.getByRole('button', { name: 'textInputArea.copyContent' }));
|
||||
|
||||
await vi.waitFor(() => {
|
||||
expect(showMessage).toHaveBeenCalledWith('messages.copySuccess', { severity: 'success' });
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('onClear 回调', () => {
|
||||
it('点击清空按钮时应调用 onClear', () => {
|
||||
const handleClear = vi.fn();
|
||||
render(<TextInputArea value="内容" onChange={() => {}} onClear={handleClear} />);
|
||||
|
||||
fireEvent.click(screen.getByRole('button', { name: 'textInputArea.clear' }));
|
||||
|
||||
expect(handleClear).toHaveBeenCalledOnce();
|
||||
});
|
||||
|
||||
it('不传 onClear 时清空按钮应正常工作', () => {
|
||||
render(<TextInputArea defaultValue="内容" />);
|
||||
|
||||
fireEvent.click(screen.getByRole('button', { name: 'textInputArea.clear' }));
|
||||
|
||||
expect(screen.getByRole('textbox')).toHaveValue('');
|
||||
});
|
||||
});
|
||||
|
||||
describe('externalError 外部错误', () => {
|
||||
it('设置 externalError 时应显示错误状态', () => {
|
||||
render(<TextInputArea value="内容" onChange={() => {}} externalError="JSON 格式无效" />);
|
||||
|
||||
expect(screen.getByText('JSON 格式无效')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('externalError 为空时应隐藏错误状态', () => {
|
||||
const { rerender } = render(
|
||||
<TextInputArea value="内容" onChange={() => {}} externalError="错误" />,
|
||||
);
|
||||
|
||||
expect(screen.getByText('错误')).toBeInTheDocument();
|
||||
|
||||
rerender(<TextInputArea value="内容" onChange={() => {}} externalError="" />);
|
||||
|
||||
expect(screen.queryByText('错误')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('externalError 优先级高于内部验证错误', () => {
|
||||
render(
|
||||
<TextInputArea
|
||||
value="ab"
|
||||
onChange={() => {}}
|
||||
externalError="外部错误"
|
||||
validateTrigger="onChange"
|
||||
rules={[{ validator: (v) => v.length >= 3, message: '内部验证错误' }]}
|
||||
/>,
|
||||
);
|
||||
|
||||
expect(screen.getByText('外部错误')).toBeInTheDocument();
|
||||
expect(screen.queryByText('内部验证错误')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('externalError 清除后应显示内部验证错误', () => {
|
||||
const { rerender } = render(
|
||||
<TextInputArea
|
||||
value="ab"
|
||||
onChange={() => {}}
|
||||
externalError="外部错误"
|
||||
validateTrigger="onChange"
|
||||
rules={[{ validator: (v) => v.length >= 3, message: '至少3个字符' }]}
|
||||
/>,
|
||||
);
|
||||
|
||||
expect(screen.getByText('外部错误')).toBeInTheDocument();
|
||||
|
||||
rerender(
|
||||
<TextInputArea
|
||||
value="ab"
|
||||
onChange={() => {}}
|
||||
validateTrigger="onChange"
|
||||
rules={[{ validator: (v) => v.length >= 3, message: '至少3个字符' }]}
|
||||
/>,
|
||||
);
|
||||
|
||||
expect(screen.queryByText('外部错误')).not.toBeInTheDocument();
|
||||
|
||||
const textarea = screen.getByRole('textbox');
|
||||
fireEvent.change(textarea, { target: { value: 'a' } });
|
||||
|
||||
expect(screen.getByText('至少3个字符')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('autoResize', () => {
|
||||
it('autoResize=true 时设置 minRows/maxRows', () => {
|
||||
const { container } = render(
|
||||
<TextInputArea value="" onChange={() => {}} autoResize minRows={3} maxRows={8} />,
|
||||
);
|
||||
|
||||
const textarea = container.querySelector('textarea');
|
||||
expect(textarea).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('autoResize=false 时设置固定 rows', () => {
|
||||
const { container } = render(
|
||||
<TextInputArea value="" onChange={() => {}} autoResize={false} minRows={5} />,
|
||||
);
|
||||
|
||||
const textarea = container.querySelector('textarea');
|
||||
expect(textarea).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('样式集成', () => {
|
||||
it('应透传 className', () => {
|
||||
const { container } = render(
|
||||
<TextInputArea value="" onChange={() => {}} className="custom-class" />,
|
||||
);
|
||||
|
||||
expect(container.firstChild).toHaveClass('custom-class');
|
||||
});
|
||||
|
||||
it('应透传 style', () => {
|
||||
const { container } = render(
|
||||
<TextInputArea value="" onChange={() => {}} style={{ marginTop: 10 }} />,
|
||||
);
|
||||
|
||||
expect(container.firstChild).toHaveStyle({ marginTop: '10px' });
|
||||
});
|
||||
|
||||
it('应透传 sx 样式', () => {
|
||||
const { container } = render(<TextInputArea value="" onChange={() => {}} sx={{ mb: 3 }} />);
|
||||
|
||||
expect(container.firstChild).toHaveStyle({ marginBottom: '24px' });
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -1,5 +1,6 @@
|
||||
import { beforeEach, describe, expect, it, vi } from 'vitest';
|
||||
import { fireEvent, render, screen } from '@testing-library/react';
|
||||
import { act, fireEvent, render, screen } from '@testing-library/react';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import ToolCard from '@/pages/Dashboard/ToolCard';
|
||||
import AccessTimeIcon from '@mui/icons-material/AccessTime';
|
||||
|
||||
@@ -96,7 +97,7 @@ describe('ToolCard 组件', () => {
|
||||
expect(handleClick).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it('按 Enter 键时应调用 onClick', () => {
|
||||
it('按 Enter 键时应调用 onClick', async () => {
|
||||
const handleClick = vi.fn();
|
||||
render(
|
||||
<ToolCard
|
||||
@@ -108,7 +109,10 @@ describe('ToolCard 组件', () => {
|
||||
);
|
||||
|
||||
const button = screen.getByRole('button', { name: /键盘可触发/ });
|
||||
fireEvent.click(button);
|
||||
await act(async () => {
|
||||
button.focus();
|
||||
await userEvent.keyboard('{Enter}');
|
||||
});
|
||||
|
||||
expect(handleClick).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
@@ -28,7 +28,6 @@ const mockRouterValue = {
|
||||
pageOrder: ['timestamp'] as PageType[],
|
||||
isLoaded: true,
|
||||
navigateTo: vi.fn(),
|
||||
navigateLocal: vi.fn(),
|
||||
syncNavigation: vi.fn(),
|
||||
goBack: vi.fn(),
|
||||
setVisiblePages: vi.fn(),
|
||||
|
||||
Reference in New Issue
Block a user