rsgltzyd/testing-tool
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Develop (#20)

Browse Source 
* 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 中统一管理
- 改进搜索历史功能，增加错误处理和配置化限制
- 优化键盘导航和搜索结果的交互逻辑

---------

Co-authored-by: Copilot <copilot@github.com>
Co-authored-by: yll <mtmtchb@outlook.com>
This commit is contained in:
LingandRX
2026-05-06 23:11:27 +08:00
committed by GitHub
parent 9d1d8a362a
commit ff964e3608
88 changed files with 2952 additions and 2572 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/DashboardCard.tsx
-46
View File
@@ -1,46 +0,0 @@
import React from 'react';
import ToolCard from './ToolCard';
export interface DashboardCardConfig {
/** 卡片标题 */
title: string;
/** 卡片描述文字 */
description: string;
/** 主题颜色代码 */
colorCode: string;
/** 图标组件 */
icon: React.ReactNode;
}
interface DashboardCardProps {
/** 卡片配置数据 */
config: DashboardCardConfig;
/** 点击卡片时的回调函数 */
onClick: () => void;
/** 卡片右侧的实时预览内容（如时间戳显示） */
snapshot?: React.ReactNode;
/** 卡片背景色，默认使用主题色 */
cardBackgroundColor?: string;
}
/**
* DashboardCard - 仪表盘卡片组件
*
* 基于 ToolCard 的封装，专门用于仪表盘页面
* 使用 React.memo 避免不必要的重渲染
*/
const DashboardCard = React.memo(
({ config, onClick, snapshot, cardBackgroundColor }: DashboardCardProps) => (
<ToolCard
title={config.title}
description={config.description}
colorCode={config.colorCode}
icon={config.icon}
onClick={onClick}
cardBackgroundColor={cardBackgroundColor}
snapshot={snapshot}
/>
),
);
export default DashboardCard;
components/ErrorBoundary.tsx
+6 -7
View File
@@ -1,5 +1,5 @@
import { Component, ErrorInfo, ReactNode } from 'react';
import { Box, Typography, Button, Paper, Container } from '@mui/material';
import { Box, Button, Container, Paper, Typography } from '@mui/material';
import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
import RefreshIcon from '@mui/icons-material/Refresh';
@@ -16,25 +16,24 @@ interface State {
* 错误边界组件：捕获子组件树中的 JavaScript 错误
*/
export class ErrorBoundary extends Component<Props, State> {
public state: State = {
state: State = {
hasError: false,
error: null,
};
public static getDerivedStateFromError(error: Error): State {
static getDerivedStateFromError(error: Error): State {
return { hasError: true, error };
}
public componentDidCatch(error: Error, errorInfo: ErrorInfo) {
componentDidCatch(error: Error, errorInfo: ErrorInfo) {
console.error('Uncaught error:', error, errorInfo);
}
private handleReset = () => {
this.setState({ hasError: false, error: null });
window.location.reload();
};
public render() {
render() {
if (this.state.hasError) {
return (
<Container sx={{ mt: 8 }}>
@@ -46,7 +45,7 @@ export class ErrorBoundary extends Component<Props, State> {
borderRadius: 4,
border: '1px solid',
borderColor: 'error.light',
bgcolor: 'error.shortest',
bgcolor: 'rgba(211, 47, 47, 0.04)',
}}
>
<ErrorOutlineIcon color="error" sx={{ fontSize: 64, mb: 2 }} />
components/GlobalSnackbar.tsx
+55 -1
View File
@@ -197,24 +197,71 @@ export function GlobalSnackbar({
}
/**
* useSnackbarState - 消息提示的状态管理 Hook
* useSnackbarState - 消息提示的 Hook 方式
*
* 提供状态管理的 Snackbar 功能，自动处理 open、message 等状态。
* 适合在组件内部使用，无需额外的状态管理代码。
*
* @param {SnackbarOptions} [initialOptions] - 初始配置选项
* @returns {UseSnackbarStateResult} 包含 snackbarProps 和操作方法的对象
*
* @description
* - 自动管理 Snackbar 的显示/隐藏状态
* - 支持链式调用 showMessage
* - 合并初始选项和调用时选项
*
* @example
* ```tsx
* function MyComponent() {
* const { snackbarProps, showMessage, closeMessage } = useSnackbarState({
* severity: 'info',
* autoHideDuration: 3000,
* });
*
* const handleSave = () => {
* // 业务逻辑...
* showMessage('保存成功！', { severity: 'success' });
* };
*
* return (
* <>
* <button onClick={handleSave}>保存</button>
* <GlobalSnackbar {...snackbarProps} />
* </>
* );
* }
* ```
*/
export function useSnackbarState(initialOptions?: SnackbarOptions): UseSnackbarStateResult {
// Snackbar 显示状态
const [open, setOpen] = useState(false);
// 当前显示的消息内容
const [message, setMessage] = useState('');
// 消息配置选项
const [options, setOptions] = useState<SnackbarOptions>(initialOptions || {});
/**
* 显示消息
*
* @param {string} newMessage - 要显示的消息文本
* @param {SnackbarOptions} [newOptions={}] - 新的配置选项
*
* @description
* - 合并初始选项和新的调用选项
* - 新选项会覆盖初始选项
*/
const showMessage = (newMessage: string, newOptions: SnackbarOptions = {}) => {
setMessage(newMessage);
setOptions({ ...initialOptions, ...newOptions });
setOpen(true);
};
/**
* 关闭消息
*
* @description
* - 直接将 open 状态设置为 false
*/
const closeMessage = () => {
setOpen(false);
};
@@ -224,6 +271,13 @@ export function useSnackbarState(initialOptions?: SnackbarOptions): UseSnackbarS
closeMessage();
};
/**
* 传递给 GlobalSnackbar 组件的属性
*
* @description
* - 组合当前状态和选项为完整的组件 props
* - onClose 使用 handleClose 包装后的版本
*/
const snackbarProps: GlobalSnackbarProps = {
message,
open,
components/PageHeader.tsx
+1 -1
View File
@@ -1,4 +1,4 @@
import { Stack, Typography, Box, alpha, SxProps, Theme } from '@mui/material';
import { alpha, Box, Stack, SxProps, Theme, Typography } from '@mui/material';
import { ReactNode } from 'react';
/**
components/QrCodeToUrlSection.tsx
-323
View File
@@ -1,323 +0,0 @@
import React, { useState, useEffect, useCallback, useRef } from 'react';
import {
Box,
Typography,
TextField,
Button,
Stack,
Alert,
Accordion,
AccordionSummary,
AccordionDetails,
CircularProgress,
InputAdornment,
IconButton,
} from '@mui/material';
import LinkIcon from '@mui/icons-material/Link';
import ImageIcon from '@mui/icons-material/Image';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import ClearIcon from '@mui/icons-material/Clear';
import CopyButton from '@/components/CopyButton';
import { qrCodePageStyles } from '@/config/pageTheme';
import type { SnackbarOptions } from '@/components/GlobalSnackbar';
import { parseQrCodeFromFile } from '@/utils/qrCodeParser';
interface QrCodeToUrlSectionProps {
expanded: boolean;
onExpandedChange: (expanded: boolean) => void;
showMessage: (message: string, options?: SnackbarOptions) => void;
}
const QrCodeToUrlSection = ({
expanded,
onExpandedChange,
showMessage,
}: QrCodeToUrlSectionProps) => {
const [qrCodeFile, setQrCodeFile] = useState<File | null>(null);
const [parsedUrl, setParsedUrl] = useState('');
const [parseError, setParseError] = useState('');
const [parsing, setParsing] = useState(false);
const [dragging, setDragging] = useState(false);
const fileInputRef = useRef<HTMLInputElement>(null);
const handleFileChange = useCallback((file: File) => {
setQrCodeFile(file);
setParseError('');
setParsedUrl('');
}, []);
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
if (e.target.files && e.target.files.length > 0) {
handleFileChange(e.target.files[0]);
}
};
const handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {
e.preventDefault();
setDragging(true);
};
const handleDragLeave = () => {
setDragging(false);
};
const handleDrop = (e: React.DragEvent<HTMLDivElement>) => {
e.preventDefault();
setDragging(false);
const droppedFile = e.dataTransfer.files?.[0];
if (droppedFile) {
handleFileChange(droppedFile);
}
};
const parseQrCode = async () => {
if (!qrCodeFile) {
showMessage('请选择二维码图片', { severity: 'error', autoHideDuration: 300 });
return;
}
try {
setParsing(true);
setParseError('');
setParsedUrl('');
const result = await parseQrCodeFromFile(qrCodeFile);
if (result.success && result.data) {
setParsedUrl(result.data);
showMessage('二维码解析成功', { severity: 'success', autoHideDuration: 1000 });
} else {
showMessage(result.error || '未检测到二维码', {
severity: 'error',
autoHideDuration: 1000,
});
}
} catch (error) {
console.error('解析二维码失败:', error);
showMessage('解析二维码失败，请重试', { severity: 'error', autoHideDuration: 300 });
} finally {
setParsing(false);
}
};
// 监听粘贴事件
useEffect(() => {
const handlePaste = async (e: ClipboardEvent) => {
if (!expanded) return;
const items = e.clipboardData?.items;
if (!items) return;
for (let i = 0; i < items.length; i++) {
if (items[i].type.startsWith('image/')) {
e.preventDefault();
const file = items[i].getAsFile();
if (file) {
try {
handleFileChange(file);
showMessage('图片粘贴成功', { severity: 'success', autoHideDuration: 1000 });
} catch (error) {
console.error('处理粘贴图片失败:', error);
showMessage('粘贴图片失败，请重试', { severity: 'error', autoHideDuration: 3000 });
}
}
break;
}
}
};
document.addEventListener('paste', handlePaste);
return () => {
document.removeEventListener('paste', handlePaste);
};
}, [expanded, showMessage, handleFileChange]);
return (
<Accordion
expanded={expanded}
onChange={(_, isExpanded) => onExpandedChange(isExpanded)}
sx={{
borderRadius: 4,
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)',
'&:before': { display: 'none' },
}}
>
<AccordionSummary expandIcon={<ExpandMoreIcon />} sx={{ borderBottom: 'none' }}>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
<LinkIcon color="success" />
<Typography variant="subtitle1" sx={{ fontWeight: 700 }}>
二维码转 URL
</Typography>
</Box>
</AccordionSummary>
<AccordionDetails>
<Stack spacing={3}>
<Box
sx={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
minHeight: 200,
border: '2px dashed',
borderColor: dragging
? qrCodePageStyles.successColor
: qrCodeFile
? qrCodePageStyles.successColor
: 'grey.200',
borderRadius: 3,
p: 4,
bgcolor: dragging
? 'rgba(76, 175, 80, 0.1)'
: qrCodeFile
? 'rgba(76, 175, 80, 0.05)'
: 'grey.50',
cursor: 'pointer',
transition: 'all 0.2s',
'&:hover': {
borderColor: qrCodePageStyles.successColor,
bgcolor: 'rgba(76, 175, 80, 0.05)',
},
}}
onDragOver={handleDragOver}
onDragLeave={handleDragLeave}
onDrop={handleDrop}
>
<input
ref={fileInputRef}
type="file"
accept="image/*"
onChange={handleInputChange}
style={{
display: 'none',
}}
id="qr-code-upload"
/>
<label
htmlFor="qr-code-upload"
style={{ cursor: 'pointer', textAlign: 'center', width: '100%' }}
>
{qrCodeFile ? (
<Box sx={{ textAlign: 'center', width: '100%', position: 'relative' }}>
<Box sx={{ position: 'relative', display: 'inline-block' }}>
<img
src={URL.createObjectURL(qrCodeFile)}
alt="QR Code Preview"
style={{
maxWidth: '100%',
maxHeight: 160,
borderRadius: 8,
objectFit: 'contain',
}}
/>
<IconButton
size="small"
onClick={(e) => {
e.stopPropagation();
setQrCodeFile(null);
setParsedUrl('');
setParseError('');
showMessage('图片已清除', {
severity: 'success',
autoHideDuration: 1000,
});
}}
sx={{
position: 'absolute',
top: -8,
right: -8,
bgcolor: 'rgba(244, 67, 54, 0.9)',
color: 'white',
'&:hover': {
bgcolor: 'rgba(211, 47, 47, 0.95)',
},
}}
>
<ClearIcon fontSize="small" />
</IconButton>
</Box>
<Typography variant="body2" color="text.secondary" sx={{ mt: 2 }}>
{qrCodeFile.name}
</Typography>
<Typography variant="caption" color="text.secondary">
点击更换图片
</Typography>
</Box>
) : (
<>
<ImageIcon sx={{ fontSize: 48, color: 'grey.300', mb: 2 }} />
<Typography variant="body2" color="text.secondary" sx={{ mb: 1 }}>
点击、拖拽或粘贴上传二维码图片
</Typography>
<Typography variant="caption" color="text.secondary">
支持 PNG、JPG、WEBP 格式
</Typography>
</>
)}
</label>
</Box>
<Button
variant="contained"
startIcon={parsing ? <CircularProgress size={16} color="inherit" /> : <LinkIcon />}
onClick={parseQrCode}
disabled={parsing}
sx={{
py: 1.2,
borderRadius: 3,
bgcolor: qrCodePageStyles.successColor,
fontWeight: 700,
'&:hover': {
bgcolor: qrCodePageStyles.successDark,
},
}}
>
{parsing ? '解析中...' : '解析二维码'}
</Button>
<Box
sx={{
position: 'relative',
mt: 2,
}}
>
<TextField
label="解析结果"
value={parsedUrl}
fullWidth
variant="outlined"
slotProps={{
input: {
readOnly: true,
endAdornment: (
<InputAdornment position="end">
<CopyButton
text={parsedUrl}
tooltip="复制"
size="small"
color={qrCodePageStyles.primaryColor}
showMessage={showMessage}
/>
</InputAdornment>
),
},
}}
sx={qrCodePageStyles.INPUT_STYLE}
/>
</Box>
{parseError && (
<Alert severity="error" sx={{ borderRadius: 3 }}>
{parseError}
</Alert>
)}
</Stack>
</AccordionDetails>
</Accordion>
);
};
export default QrCodeToUrlSection;
components/QrCodeUploader.tsx
-381
View File
@@ -1,381 +0,0 @@
import React, { useCallback, useEffect, useRef, useState } from 'react';
import {
Alert,
Box,
CircularProgress,
IconButton,
Paper,
Typography,
useMediaQuery,
useTheme,
} from '@mui/material';
import ImageIcon from '@mui/icons-material/Image';
import ClearIcon from '@mui/icons-material/Clear';
import CheckCircleIcon from '@mui/icons-material/CheckCircle';
import ErrorIcon from '@mui/icons-material/Error';
import GlobalSnackbar, { useSnackbarState } from './GlobalSnackbar';
import CopyButton from './CopyButton';
import { parseQrCodeFromFile } from '@/utils/qrCodeParser';
interface QrCodeUploaderProps {
onQrCodeDetected?: (data: string) => void;
supportedFormats?: string[];
maxFileSize?: number; // in bytes
timeout?: number; // in milliseconds
showPreview?: boolean;
showProgress?: boolean;
className?: string;
}
const QrCodeUploader: React.FC<QrCodeUploaderProps> = ({
onQrCodeDetected,
supportedFormats = ['image/png', 'image/jpeg', 'image/webp'],
maxFileSize = 5 * 1024 * 1024, // 5MB
showPreview = true,
showProgress = true,
className,
}) => {
const { snackbarProps, showMessage } = useSnackbarState({ autoHideDuration: 3000 });
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
const [file, setFile] = useState<File | null>(null);
const [preview, setPreview] = useState<string | null>(null);
const [uploading, setUploading] = useState(false);
const [progress, setProgress] = useState(0);
const [result, setResult] = useState<string | null>(null);
const [error, setError] = useState<string | null>(null);
const [dragging, setDragging] = useState(false);
const fileInputRef = useRef<HTMLInputElement>(null);
const uploadAreaRef = useRef<HTMLDivElement>(null);
// 清理预览 URL
useEffect(() => {
return () => {
if (preview) {
URL.revokeObjectURL(preview);
}
};
}, [preview]);
// 处理文件
const processFile = useCallback(
async (file: File) => {
setUploading(true);
setProgress(0);
try {
const progressInterval = setInterval(() => {
setProgress((prev) => {
if (prev >= 90) {
clearInterval(progressInterval);
return prev;
}
return prev + 10;
});
}, 200);
const result = await parseQrCodeFromFile(file);
clearInterval(progressInterval);
setProgress(100);
if (result.success && result.data) {
setResult(result.data);
showMessage('二维码解析成功', { severity: 'success' });
if (onQrCodeDetected) {
onQrCodeDetected(result.data);
}
} else {
setError(result.error || '未检测到二维码');
showMessage(result.error || '未检测到二维码', { severity: 'error' });
}
} catch (err) {
setError(err instanceof Error ? err.message : '解析失败');
showMessage('解析失败: ' + (err instanceof Error ? err.message : '未知错误'), {
severity: 'error',
});
} finally {
setUploading(false);
setTimeout(() => setProgress(0), 500);
}
},
[showMessage, onQrCodeDetected],
);
// 处理文件
const handleFile = useCallback(
(selectedFile: File) => {
// 检查文件格式
if (!supportedFormats.includes(selectedFile.type)) {
setError(
`不支持的文件格式。支持的格式: ${supportedFormats.map((f) => f.split('/')[1].toUpperCase()).join(', ')}`,
);
showMessage('不支持的文件格式', { severity: 'error' });
return;
}
// 检查文件大小
if (selectedFile.size > maxFileSize) {
const maxSizeMB = (maxFileSize / (1024 * 1024)).toFixed(1);
setError(`文件大小超过限制。最大支持 ${maxSizeMB}MB`);
showMessage(`文件大小超过限制，最大支持 ${maxSizeMB}MB`, { severity: 'error' });
return;
}
// 重置状态
setError(null);
setResult(null);
setFile(selectedFile);
// 创建预览
if (showPreview) {
const previewUrl = URL.createObjectURL(selectedFile);
setPreview(previewUrl);
}
// 开始处理
processFile(selectedFile).catch(console.error);
},
[supportedFormats, maxFileSize, showPreview, showMessage, processFile],
);
// 处理文件选择
const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
const selectedFile = e.target.files?.[0];
if (selectedFile) {
handleFile(selectedFile);
}
};
// 处理拖拽事件
const handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {
e.preventDefault();
setDragging(true);
};
const handleDragLeave = () => {
setDragging(false);
};
const handleDrop = (e: React.DragEvent<HTMLDivElement>) => {
e.preventDefault();
setDragging(false);
const droppedFile = e.dataTransfer.files?.[0];
if (droppedFile) {
handleFile(droppedFile);
}
};
// 监听粘贴事件
useEffect(() => {
const handlePaste = (e: ClipboardEvent) => {
const items = e.clipboardData?.items;
if (!items) return;
for (let i = 0; i < items.length; i++) {
if (items[i].type.startsWith('image/')) {
e.preventDefault();
const pastedFile = items[i].getAsFile();
if (pastedFile) {
handleFile(pastedFile);
}
break;
}
}
};
document.addEventListener('paste', handlePaste);
return () => document.removeEventListener('paste', handlePaste);
}, [handleFile]);
// 清除文件
const handleClear = () => {
setFile(null);
setPreview(null);
setResult(null);
setError(null);
if (fileInputRef.current) {
fileInputRef.current.value = '';
}
};
return (
<Box className={className}>
{/* 上传区域 */}
<Paper
ref={uploadAreaRef}
elevation={0}
sx={{
p: isMobile ? 3 : 4,
borderRadius: 4,
border: `2px dashed ${dragging ? 'primary.main' : 'grey.300'}`,
bgcolor: dragging ? 'primary.lighter' : 'grey.50',
transition: 'all 0.2s ease',
textAlign: 'center',
cursor: 'pointer',
position: 'relative',
}}
onDragOver={handleDragOver}
onDragLeave={handleDragLeave}
onDrop={handleDrop}
onClick={() => fileInputRef.current?.click()}
>
<input
ref={fileInputRef}
type="file"
accept={supportedFormats.join(',')}
onChange={handleFileSelect}
style={{ display: 'none' }}
/>
{!file && !uploading ? (
<Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
<ImageIcon sx={{ fontSize: isMobile ? 36 : 48, color: 'grey.400', mb: 2 }} />
<Typography variant="body1" color="text.secondary" sx={{ mb: 1 }}>
点击、拖拽或粘贴上传二维码图片
</Typography>
<Typography variant="caption" color="text.secondary">
支持 {supportedFormats.map((f) => f.split('/')[1].toUpperCase()).join(', ')} 格式
</Typography>
<Typography variant="caption" color="text.secondary" sx={{ mt: 1 }}>
最大文件大小: {(maxFileSize / (1024 * 1024)).toFixed(1)}MB
</Typography>
</Box>
) : file && showPreview && preview ? (
<Box sx={{ position: 'relative' }}>
<img
src={preview}
alt="QR Code Preview"
style={{
maxWidth: '100%',
maxHeight: 200,
borderRadius: 8,
objectFit: 'contain',
}}
/>
<IconButton
size="small"
onClick={(e) => {
e.stopPropagation();
handleClear();
}}
sx={{
position: 'absolute',
top: -8,
right: -8,
bgcolor: 'rgba(244, 67, 54, 0.9)',
color: 'white',
'&:hover': {
bgcolor: 'rgba(211, 47, 47, 0.95)',
},
}}
>
<ClearIcon fontSize="small" />
</IconButton>
<Typography variant="body2" color="text.secondary" sx={{ mt: 2 }}>
{file.name}
</Typography>
</Box>
) : uploading && showProgress ? (
<Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
<CircularProgress size={48} sx={{ mb: 2 }} />
<Typography variant="body2" color="text.secondary" sx={{ mb: 1 }}>
处理中...
</Typography>
{progress > 0 && (
<Box sx={{ width: '80%', mt: 2 }}>
<Box
sx={{
height: 8,
bgcolor: 'grey.200',
borderRadius: 4,
overflow: 'hidden',
}}
>
<Box
sx={{
height: '100%',
bgcolor: 'primary.main',
width: `${progress}%`,
transition: 'width 0.3s ease',
}}
/>
</Box>
<Typography
variant="caption"
color="text.secondary"
sx={{ mt: 1, display: 'block' }}
>
{progress}%
</Typography>
</Box>
)}
</Box>
) : null}
</Paper>
{/* 结果展示 */}
{(result || error) && (
<Box sx={{ mt: 3 }}>
{result && (
<Paper
elevation={0}
sx={{
p: 3,
borderRadius: 4,
border: '1px solid',
borderColor: 'success.light',
bgcolor: 'success.lighter',
}}
>
<Box sx={{ display: 'flex', alignItems: 'flex-start', gap: 2 }}>
<CheckCircleIcon sx={{ color: 'success.main', mt: 0.5 }} />
<Box sx={{ flex: 1 }}>
<Typography variant="subtitle2" sx={{ fontWeight: 600, mb: 1 }}>
二维码内容
</Typography>
<Box sx={{ position: 'relative' }}>
<Typography
variant="body1"
sx={{
fontFamily: 'monospace',
wordBreak: 'break-all',
pr: 8,
}}
>
{result}
</Typography>
<CopyButton
text={result}
tooltip="复制"
size="small"
color="success"
showMessage={showMessage}
style={{
position: 'absolute',
right: 0,
top: 0,
}}
/>
</Box>
</Box>
</Box>
</Paper>
)}
{error && (
<Alert severity="error" sx={{ borderRadius: 4 }} icon={<ErrorIcon />}>
{error}
</Alert>
)}
</Box>
)}
<GlobalSnackbar {...snackbarProps} />
</Box>
);
};
export default QrCodeUploader;
components/RouterContainer.tsx
+1 -1
View File
@@ -1,7 +1,7 @@
import { Box, CircularProgress } from '@mui/material';
import { FEATURES, getEntryPointType } from '@/config/features';
import { useRouter } from '@/providers/RouterProvider';
import { useMemo, Suspense } from 'react';
import { Suspense, useMemo } from 'react';
export default function RouterContainer() {
const { currentPage, isLoaded } = useRouter();
components/StorageCleanerConfirm.tsx
-169
View File
@@ -1,169 +0,0 @@
import {
Dialog,
DialogTitle,
DialogContent,
DialogActions,
Typography,
Box,
Chip,
alpha,
} from '@mui/material';
import type { StorageCleanerOptions } from '@/types/storage';
import Button from '@/components/Button';
import { storageCleanerPageStyles, THEME_COLORS } from '@/config/pageTheme';
export interface StorageCleanerConfirmProps {
open: boolean;
onClose: () => void;
onConfirm: () => void;
options: StorageCleanerOptions;
}
const STORAGE_LABELS: Record<keyof StorageCleanerOptions, string> = {
localStorage: 'LocalStorage',
sessionStorage: 'Session Storage',
indexedDB: 'IndexedDB',
cookies: 'Cookies',
cacheStorage: 'Cache Storage',
serviceWorkers: 'Service Workers',
};
export function StorageCleanerConfirm({
open,
onClose,
onConfirm,
options,
}: StorageCleanerConfirmProps) {
const selectedOptions = Object.entries(options)
.filter(([_, value]) => value)
.map(([key, _]) => STORAGE_LABELS[key as keyof StorageCleanerOptions] || key);
return (
<Dialog
open={open}
onClose={onClose}
fullWidth
maxWidth="xs"
slotProps={{
paper: {
sx: {
borderRadius: 6,
backgroundImage: 'none',
boxShadow: `0 24px 64px -12px ${alpha(THEME_COLORS.black, 0.18)}`,
p: 1.5,
bgcolor: 'background.paper',
},
},
}}
>
<DialogTitle
sx={{
textAlign: 'center',
pt: 4,
pb: 1,
fontWeight: 900,
letterSpacing: '-0.5px',
fontSize: '1.35rem',
color: 'text.primary',
}}
>
确认清理数据？
</DialogTitle>
<DialogContent sx={{ textAlign: 'center', pb: 2 }}>
<Typography
variant="body2"
color="text.secondary"
sx={{ mb: 3.5, fontWeight: 500, fontSize: '0.9rem' }}
>
您将永久删除当前页面的以下选定存储项。
</Typography>
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1.2, justifyContent: 'center', mb: 4 }}>
{selectedOptions.map((label) => (
<Chip
key={label}
label={label}
size="small"
sx={{
bgcolor: alpha(THEME_COLORS.warning, 0.04),
fontWeight: 700,
color: THEME_COLORS.warning,
fontSize: '0.75rem',
border: '1px solid',
borderColor: alpha(THEME_COLORS.warning, 0.15),
borderRadius: 2.5,
height: 'auto',
'& .MuiChip-label': { px: 1.2, py: 0.6 },
}}
/>
))}
</Box>
<Box
sx={{
display: 'inline-flex',
alignItems: 'center',
gap: 1,
bgcolor: alpha(THEME_COLORS.error, 0.05),
color: THEME_COLORS.error,
px: 2,
py: 0.8,
borderRadius: 3,
border: '1px dashed',
borderColor: alpha(THEME_COLORS.error, 0.2),
}}
>
<Typography
variant="caption"
sx={{
fontWeight: 800,
display: 'flex',
alignItems: 'center',
gap: 0.5,
fontSize: '0.75rem',
}}
>
<span role="img" aria-label="warning">
⚠️
</span>{' '}
此操作不可撤销
</Typography>
</Box>
</DialogContent>
<DialogActions sx={{ p: 3, pt: 1, gap: 2 }}>
<Button
variant="text"
onClick={onClose}
fullWidth
sx={{
boxShadow: '0 0 1px 1px rgba(0, 0, 0, 0.1)',
color: 'text.secondary',
'&:hover': {
bgcolor: 'grey.100',
color: 'text.primary',
},
}}
>
取消
</Button>
<Button
variant="contained"
onClick={onConfirm}
fullWidth
sx={{
bgcolor: storageCleanerPageStyles.warningColor,
'&:hover': {
bgcolor: storageCleanerPageStyles.warningDark,
},
}}
>
确认清理
</Button>
</DialogActions>
</Dialog>
);
}
export default StorageCleanerConfirm;
components/ToolCard.tsx
-154
View File
@@ -1,154 +0,0 @@
/**
* ToolCard 组件 - 工具卡片
*
* 用于在仪表盘中展示各个工具功能的卡片组件，支持图标、标题、描述、
* AI 标识和快照内容展示，具备悬停动画效果。
*/
import { Box, Typography, Stack } from '@mui/material';
import AutoAwesomeIcon from '@mui/icons-material/AutoAwesome'; // Sparkles for AI
import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';
import React from 'react';
/**
* ToolCard 组件属性接口
*/
interface ToolCardProps {
/** 工具卡片标题 */
title: string;
/** 工具卡片描述文本（可选） */
description?: string;
/** 快照内容，用于在卡片底部展示额外信息（可选） */
snapshot?: React.ReactNode;
/** 主题色代码，用于图标背景和悬停效果 */
colorCode: string;
/** 工具图标元素 */
icon: React.ReactNode;
/** 卡片点击事件处理函数 */
onClick: () => void;
/** 是否显示 AI 标识（可选） */
hasAI?: boolean;
/** 卡片背景色，默认为 'background.paper' */
cardBackgroundColor?: string;
}
/**
* ToolCard 组件
*
* @param props - ToolCardProps 属性对象
* @returns 工具卡片 JSX 元素
*/
export default function ToolCard({
title,
description,
snapshot,
colorCode,
icon,
onClick,
hasAI,
cardBackgroundColor = 'background.paper',
}: ToolCardProps) {
return (
<Box
onClick={onClick}
sx={{
position: 'relative',
bgcolor: cardBackgroundColor,
borderRadius: 4,
p: 2.5,
cursor: 'pointer',
border: '1px solid',
borderColor: 'grey.100',
height: '100%',
boxSizing: 'border-box',
// 使用 cubic-bezier 缓动函数实现平滑的过渡动画
transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
display: 'flex',
flexDirection: 'column',
gap: 1.5,
// 悬停效果：边框变色、向上位移、添加阴影
'&:hover': {
borderColor: colorCode,
transform: 'translateY(-4px)',
// 阴影颜色为主题色的 20% 透明度（十六进制后两位 33 约等于 20%）
boxShadow: `0 12px 24px -10px ${colorCode}33`,
// 悬停时箭头图标右移并变色
'& .arrow-icon': {
transform: 'translateX(4px)',
color: colorCode,
},
},
}}
>
<Stack direction="row" justifyContent="space-between" alignItems="flex-start">
<Stack direction="row" spacing={1.5} alignItems="center">
<Box
sx={{
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
width: 40,
height: 40,
borderRadius: 3,
// 图标背景色为主题色的 7% 透明度（十六进制后两位 11 约等于 7%）
bgcolor: `${colorCode}11`,
color: colorCode,
}}
>
{icon}
</Box>
<Box>
<Typography
variant="subtitle1"
sx={{
fontWeight: 700,
lineHeight: 1.2,
color: 'text.primary',
display: 'flex',
alignItems: 'center',
gap: 0.5,
}}
>
{title}
{hasAI && <AutoAwesomeIcon sx={{ fontSize: 14, color: '#f5b041' }} />}
</Typography>
{description && (
<Typography
variant="caption"
sx={{
color: 'text.secondary',
fontWeight: 500,
display: 'block',
mt: 0.5,
}}
>
{description}
</Typography>
)}
</Box>
</Stack>
<ArrowForwardIosIcon
className="arrow-icon"
sx={{
fontSize: 12,
color: 'grey.300',
mt: 0.5,
transition: 'all 0.3s ease',
}}
/>
</Stack>
{snapshot && (
<Box
sx={{
mt: 'auto',
pt: 1.5,
borderTop: '1px dashed',
borderColor: 'grey.100',
}}
>
{snapshot}
</Box>
)}
</Box>
);
}
components/TopBar.tsx
+285 -13
View File
@@ -1,18 +1,146 @@
import { Box, IconButton, Typography, Stack, Tooltip } from '@mui/material';
import { useState, useEffect, useRef, useMemo } from 'react';
import {
Box,
IconButton,
Stack,
Tooltip,
Typography,
InputBase,
Paper,
List,
ListItemButton,
ListItemIcon,
ListItemText,
ClickAwayListener,
} from '@mui/material';
import SettingsIcon from '@mui/icons-material/Settings';
import OpenInNewIcon from '@mui/icons-material/OpenInNew';
import ArrowBackIosNewIcon from '@mui/icons-material/ArrowBackIosNew';
import SearchIcon from '@mui/icons-material/Search';
import HistoryIcon from '@mui/icons-material/History';
import CloseIcon from '@mui/icons-material/Close';
import LanguageIcon from '@mui/icons-material/Language';
import { useRouter } from '@/providers/RouterProvider';
import { FEATURES, FeatureConfig } from '@/config/features';
import { storageUtil } from '@/utils/chromeStorage';
import { openExtensionPage } from '@/utils/chromeTabs';
import { useTranslation } from 'react-i18next';
import { SUPPORTED_LANGUAGES, normalizeLanguage } from '@/i18n';
import { topBarStyles } from '@/config/pageTheme';
export default function TopBar({ onOpenOptions }: { onOpenOptions: () => void }) {
const { currentPage, goBack } = useRouter();
const { currentPage, goBack, navigateTo } = useRouter();
const { t, i18n } = useTranslation(['common', 'features']);
const [searchQuery, setSearchQuery] = useState('');
const [showResults, setShowResults] = useState(false);
const [searchHistory, setSearchHistory] = useState<string[]>([]);
const [selectedIndex, setSelectedIndex] = useState(-1);
const inputRef = useRef<HTMLInputElement>(null);
const handleOpenInTab = () => {
// 在新标签页中打开扩展页面
chrome.tabs.create({ url: chrome.runtime.getURL('popup.html?mode=tab') }).catch(console.error);
// 加载搜索历史
useEffect(() => {
storageUtil
.get('app/searchHistory', [])
.then((history) => {
setSearchHistory(history || []);
})
.catch((error) => {
console.error('加载搜索历史失败:', error);
});
}, []);
// 模糊搜索逻辑
const searchResults = useMemo(() => {
if (!searchQuery.trim()) return [];
const query = searchQuery.toLowerCase();
return FEATURES.filter((f) => {
if (f.key === 'dashboard') return false;
const label = t(f.labelKey).toLowerCase();
const desc = t(f.descriptionKey).toLowerCase();
return label.includes(query) || desc.includes(query);
});
}, [searchQuery, t]);
const displayedHistory = useMemo(() => {
if (searchQuery.trim()) return [];
return searchHistory.slice(0, topBarStyles.SEARCH_HISTORY_DISPLAY);
}, [searchHistory, searchQuery]);
const handleOpenInTab = async () => {
await openExtensionPage('popup.html', { mode: 'tab' });
window.close();
};
const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setSearchQuery(e.target.value);
setShowResults(true);
setSelectedIndex(-1);
};
const saveToHistory = async (query: string) => {
if (!query.trim()) return;
setSearchHistory((prev) => {
const newHistory = [query, ...prev.filter((h) => h !== query)].slice(
0,
topBarStyles.SEARCH_HISTORY_LIMIT,
);
storageUtil.set('app/searchHistory', newHistory).catch((error) => {
console.error('保存搜索历史失败:', error);
});
return newHistory;
});
};
const handleSelectFeature = (feature: FeatureConfig) => {
navigateTo(feature.key);
saveToHistory(t(feature.labelKey));
setSearchQuery('');
setShowResults(false);
};
const toggleLanguage = async () => {
const currentLng = normalizeLanguage(i18n.language);
const currentIndex = SUPPORTED_LANGUAGES.indexOf(currentLng);
const nextIndex = (currentIndex + 1) % SUPPORTED_LANGUAGES.length;
const newLng = SUPPORTED_LANGUAGES[nextIndex];
await i18n.changeLanguage(newLng);
await storageUtil.set('app/language', newLng);
};
const handleKeyDown = (e: React.KeyboardEvent) => {
const totalItems = searchQuery.trim() ? searchResults.length : displayedHistory.length;
if (e.key === 'ArrowDown') {
e.preventDefault();
setSelectedIndex((prev) => (prev < totalItems - 1 ? prev + 1 : prev));
} else if (e.key === 'ArrowUp') {
e.preventDefault();
setSelectedIndex((prev) => (prev > 0 ? prev - 1 : prev));
} else if (e.key === 'Enter') {
if (selectedIndex >= 0) {
if (searchQuery.trim()) {
handleSelectFeature(searchResults[selectedIndex]);
} else {
const selectedQuery = displayedHistory[selectedIndex];
setSearchQuery(selectedQuery);
setSelectedIndex(-1);
// 触发搜索：如果匹配到功能则跳转，否则保持搜索词展示结果
const matchedFeature = FEATURES.find(
(f) => f.key !== 'dashboard' && t(f.labelKey) === selectedQuery,
);
if (matchedFeature) {
handleSelectFeature(matchedFeature);
}
}
} else if (searchQuery.trim() && searchResults.length > 0) {
handleSelectFeature(searchResults[0]);
}
} else if (e.key === 'Escape') {
setShowResults(false);
inputRef.current?.blur();
}
};
const isDashboard = currentPage === 'dashboard';
return (
@@ -21,12 +149,13 @@ export default function TopBar({ onOpenOptions }: { onOpenOptions: () => void })
justifyContent="space-between"
alignItems="center"
sx={{
px: { xs: 1.5, sm: 2 },
px: { xs: 1, sm: 2 },
py: 1.5,
borderBottom: '1px solid',
borderColor: 'grey.100',
bgcolor: 'background.paper',
zIndex: 1100,
zIndex: topBarStyles.Z_INDEX,
position: 'relative',
}}
>
<Box sx={{ width: { xs: 32, sm: 40 } }}>
@@ -34,6 +163,7 @@ export default function TopBar({ onOpenOptions }: { onOpenOptions: () => void })
<IconButton
size="small"
onClick={goBack}
aria-label={t('common:buttons.back')}
sx={{
bgcolor: 'grey.50',
'&:hover': { bgcolor: 'grey.200' },
@@ -52,23 +182,165 @@ export default function TopBar({ onOpenOptions }: { onOpenOptions: () => void })
textTransform: 'uppercase',
fontSize: '0.75rem',
color: 'text.secondary',
ml: 1,
display: { xs: 'none', md: 'block' },
}}
>
Testing Tools
{t('common:appName')}
</Typography>
<Box sx={{ flex: 1, mx: { xs: 1, sm: 2 }, position: 'relative', maxWidth: 400 }}>
<ClickAwayListener onClickAway={() => setShowResults(false)}>
<Box>
<InputBase
ref={inputRef}
placeholder={t('common:buttons.search')}
value={searchQuery}
onChange={handleSearchChange}
onFocus={() => setShowResults(true)}
onKeyDown={handleKeyDown}
inputProps={{ 'aria-label': t('common:buttons.search') }}
startAdornment={<SearchIcon sx={{ color: 'text.disabled', mr: 1, fontSize: 20 }} />}
endAdornment={
searchQuery && (
<IconButton
size="small"
onClick={() => {
setSearchQuery('');
setSelectedIndex(-1);
}}
aria-label={t('common:buttons.clearSearch')}
>
<CloseIcon sx={{ fontSize: 16 }} />
</IconButton>
)
}
sx={{
width: '100%',
bgcolor: 'grey.50',
px: 1.5,
py: 0.5,
borderRadius: 2,
fontSize: '0.875rem',
border: '1px solid transparent',
transition: 'all 0.2s',
'&:hover': { bgcolor: 'grey.100' },
'&.Mui-focused': {
bgcolor: 'background.paper',
borderColor: 'primary.main',
boxShadow: '0 0 0 2px rgba(25, 118, 210, 0.1)',
},
}}
/>
{showResults && (searchQuery.trim() || displayedHistory.length > 0) && (
<Paper
elevation={8}
sx={{
position: 'absolute',
top: '100%',
left: 0,
right: 0,
mt: 1,
maxHeight: topBarStyles.DROPDOWN_MAX_HEIGHT,
overflow: 'auto',
borderRadius: 2,
zIndex: topBarStyles.DROPDOWN_Z_INDEX,
}}
>
<List disablePadding role="listbox">
{searchQuery.trim() ? (
searchResults.length > 0 ? (
searchResults.map((feature, index) => (
<ListItemButton
key={feature.key}
selected={selectedIndex === index}
onClick={() => handleSelectFeature(feature)}
role="option"
aria-selected={selectedIndex === index}
sx={{ py: 1 }}
>
<ListItemIcon sx={{ minWidth: 40 }}>{feature.icon}</ListItemIcon>
<ListItemText
primary={t(feature.labelKey)}
secondary={t(feature.descriptionKey)}
primaryTypographyProps={{ variant: 'body2', fontWeight: 600 }}
secondaryTypographyProps={{ variant: 'caption', noWrap: true }}
/>
</ListItemButton>
))
) : (
<Box sx={{ py: 3, textAlign: 'center' }}>
<Typography variant="body2" color="text.secondary">
{t('common:buttons.noResults')}
</Typography>
</Box>
)
) : (
<>
<Box sx={{ px: 2, py: 1 }}>
<Typography variant="caption" fontWeight={700} color="text.disabled">
{t('common:buttons.recentSearch')}
</Typography>
</Box>
{displayedHistory.map((item, index) => (
<ListItemButton
key={item}
selected={selectedIndex === index}
onClick={() => {
setSearchQuery(item);
setSelectedIndex(-1);
}}
role="option"
aria-selected={selectedIndex === index}
>
<ListItemIcon sx={{ minWidth: 40 }}>
<HistoryIcon sx={{ fontSize: 18, color: 'text.disabled' }} />
</ListItemIcon>
<ListItemText
primary={item}
primaryTypographyProps={{ variant: 'body2' }}
/>
</ListItemButton>
))}
</>
)}
</List>
</Paper>
)}
</Box>
</ClickAwayListener>
</Box>
<Stack
direction="row"
spacing={0.5}
sx={{ width: { xs: 80, sm: 120 }, justifyContent: 'flex-end' }}
sx={{ width: { xs: 100, sm: 150 }, justifyContent: 'flex-end' }}
>
<Tooltip title="在标签页打开">
<IconButton size="small" onClick={handleOpenInTab}>
<Tooltip title={t('common:buttons.toggleLanguage')}>
<IconButton
size="small"
onClick={toggleLanguage}
aria-label={t('common:buttons.toggleLanguage')}
>
<LanguageIcon sx={{ fontSize: 18 }} />
</IconButton>
</Tooltip>
<Tooltip title={t('common:buttons.openInTab')}>
<IconButton
size="small"
onClick={handleOpenInTab}
aria-label={t('common:buttons.openInTab')}
>
<OpenInNewIcon sx={{ fontSize: 18 }} />
</IconButton>
</Tooltip>
<Tooltip title="设置">
<IconButton size="small" onClick={onOpenOptions}>
<Tooltip title={t('common:buttons.settings')}>
<IconButton
size="small"
onClick={onOpenOptions}
aria-label={t('common:buttons.settings')}
>
<SettingsIcon sx={{ fontSize: 18 }} />
</IconButton>
</Tooltip>
components/UrlToQrCodeSection.tsx
-224
View File
@@ -1,224 +0,0 @@
import React, { useState } from 'react';
import {
Box,
Typography,
TextField,
Button,
Stack,
Accordion,
AccordionSummary,
AccordionDetails,
CircularProgress,
} from '@mui/material';
import QrCodeIcon from '@mui/icons-material/QrCode';
import DownloadIcon from '@mui/icons-material/Download';
import ContentCopyIcon from '@mui/icons-material/ContentCopy';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import QRious from 'qrious';
import { qrCodePageStyles } from '@/config/pageTheme';
import type { SnackbarOptions } from '@/components/GlobalSnackbar';
import { copyImageToClipboard } from '@/utils/clipboard';
interface UrlToQrCodeSectionProps {
expanded: boolean;
onExpandedChange: (expanded: boolean) => void;
showMessage: (message: string, options?: SnackbarOptions) => void;
}
const UrlToQrCodeSection = ({
expanded,
onExpandedChange,
showMessage,
}: UrlToQrCodeSectionProps) => {
const [urlInput, setUrlInput] = useState('');
const [urlError, setUrlError] = useState('');
const [qrCodeDataUrl, setQrCodeDataUrl] = useState('');
const [generating, setGenerating] = useState(false);
const handleUrlInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setUrlInput(e.target.value);
setUrlError('');
};
const generateQrCode = async () => {
if (!urlInput) {
setUrlError('请输入 URL');
return;
}
try {
setGenerating(true);
setUrlError('');
let url = urlInput;
if (!url.startsWith('http://') && !url.startsWith('https://')) {
url = 'https://' + url;
}
// 使用 QRious 替代 qrcode 库，体积更小
const qr = new QRious({
value: url,
size: 250,
level: 'H',
foreground: qrCodePageStyles.black,
background: qrCodePageStyles.white,
});
setQrCodeDataUrl(qr.toDataURL());
showMessage('二维码生成成功', { severity: 'success', autoHideDuration: 1000 });
} catch (error) {
console.error('生成二维码失败:', error);
showMessage('生成二维码失败，请重试', { severity: 'error', autoHideDuration: 300 });
} finally {
setGenerating(false);
}
};
const downloadQrCode = () => {
if (!qrCodeDataUrl) return;
const link = document.createElement('a');
link.href = qrCodeDataUrl;
link.download = 'qrcode.png';
link.click();
showMessage('二维码下载成功', { severity: 'success' });
};
const copyQrCode = async () => {
if (!qrCodeDataUrl) return;
const response = await fetch(qrCodeDataUrl);
const blob = await response.blob();
await copyImageToClipboard(blob)
.then(() => {
showMessage('二维码已复制到剪贴板', { severity: 'success' });
})
.catch(() => {
showMessage('复制二维码失败，请重试', { severity: 'error' });
});
};
return (
<Accordion
expanded={expanded}
onChange={(_, isExpanded) => onExpandedChange(isExpanded)}
sx={{
borderRadius: 4,
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)',
'&:before': { display: 'none' },
}}
>
<AccordionSummary expandIcon={<ExpandMoreIcon />} sx={{ borderBottom: 'none' }}>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
<QrCodeIcon color="primary" />
<Typography variant="subtitle1" sx={{ fontWeight: 700 }}>
URL 转二维码
</Typography>
</Box>
</AccordionSummary>
<AccordionDetails>
<Stack spacing={3}>
<TextField
label="输入 URL"
placeholder="https://example.com"
value={urlInput}
onChange={handleUrlInputChange}
fullWidth
variant="outlined"
error={!!urlError}
helperText={urlError}
sx={qrCodePageStyles.INPUT_STYLE}
/>
<Button
variant="contained"
startIcon={generating ? <CircularProgress size={16} color="inherit" /> : <QrCodeIcon />}
onClick={generateQrCode}
disabled={generating}
sx={{
py: 1.2,
borderRadius: 3,
bgcolor: qrCodePageStyles.successColor,
fontWeight: 700,
'&:hover': {
bgcolor: qrCodePageStyles.successDark,
},
}}
>
{generating ? '生成中...' : '生成二维码'}
</Button>
<Box
sx={{
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
minHeight: 200,
border: '2px dashed',
borderColor: 'grey.200',
borderRadius: 3,
p: 2,
bgcolor: 'grey.50',
}}
>
{qrCodeDataUrl ? (
<Box
sx={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
width: '100%',
}}
>
<img
src={qrCodeDataUrl}
alt="QR Code"
style={{ maxWidth: '100%', height: 'auto', display: 'block' }}
/>
<Box sx={{ display: 'flex', gap: 1, mt: 2 }}>
<Button
variant="outlined"
startIcon={<DownloadIcon />}
onClick={downloadQrCode}
sx={{
borderRadius: 2,
borderColor: qrCodePageStyles.successColor,
color: qrCodePageStyles.successColor,
'&:hover': {
borderColor: qrCodePageStyles.successDark,
bgcolor: 'rgba(76, 175, 80, 0.05)',
},
}}
>
下载二维码
</Button>
<Button
variant="contained"
startIcon={<ContentCopyIcon />}
onClick={copyQrCode}
sx={{
borderRadius: 2,
bgcolor: qrCodePageStyles.successColor,
'&:hover': {
bgcolor: qrCodePageStyles.successDark,
},
}}
>
复制二维码
</Button>
</Box>
</Box>
) : (
<Typography variant="body2" color="text.secondary" sx={{ textAlign: 'center' }}>
二维码将显示在这里
</Typography>
)}
</Box>
</Stack>
</AccordionDetails>
</Accordion>
);
};
export default UrlToQrCodeSection;
components/__tests__/Button.test.tsx
+3 -3
View File
@@ -1,6 +1,6 @@
import { describe, it, expect, vi, beforeEach } from 'vitest';
import { render, screen, fireEvent } from '@testing-library/react';
import Button from '../Button';
import { beforeEach, describe, expect, it, vi } from 'vitest';
import { fireEvent, render, screen } from '@testing-library/react';
import Button from '@/components/Button';
describe('Button 组件', () => {
beforeEach(() => {
components/__tests__/GlobalSnackbar.test.tsx
+6 -6
View File
@@ -1,13 +1,13 @@
import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
import { render, screen, act, renderHook } from '@testing-library/react';
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
import { act, render, renderHook, screen } from '@testing-library/react';
import React from 'react';
import {
GlobalSnackbar,
useSnackbarState,
useSnackbar,
SnackbarProvider,
type GlobalSnackbarProps,
} from '../GlobalSnackbar';
SnackbarProvider,
useSnackbar,
useSnackbarState,
} from '@/components/GlobalSnackbar';
describe('GlobalSnackbar 组件系统', () => {
const mockOnClose = vi.fn();
components/__tests__/PageHeader.test.tsx
+2 -2
View File
@@ -1,8 +1,8 @@
import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
import AccessTimeIcon from '@mui/icons-material/AccessTime';
import CloseIcon from '@mui/icons-material/Close';
import { render, screen } from '@testing-library/react';
import PageHeader, { type PageHeaderProps } from '../PageHeader';
import PageHeader, { type PageHeaderProps } from '@/components/PageHeader';
describe('PageHeader 组件系统', () => {
beforeEach(() => {
components/__tests__/RouterContainer.test.tsx
+2 -2
View File
@@ -1,6 +1,6 @@
import { describe, it, expect, vi, beforeEach } from 'vitest';
import { beforeEach, describe, expect, it, vi } from 'vitest';
import { render, screen } from '@testing-library/react';
import RouterContainer from '../RouterContainer';
import RouterContainer from '@/components/RouterContainer';
import { RouterProvider } from '@/providers/RouterProvider';
import { SnackbarProvider } from '@/components/GlobalSnackbar';
import type { PageType } from '@/types/storage';
components/__tests__/StorageCleanerConfirm.test.tsx
+21 -19
View File
@@ -1,6 +1,6 @@
import { describe, it, expect, vi, beforeEach } from 'vitest';
import { render, screen, fireEvent } from '@testing-library/react';
import { StorageCleanerConfirm } from '../StorageCleanerConfirm';
import { beforeEach, describe, expect, it, vi } from 'vitest';
import { fireEvent, render, screen } from '@testing-library/react';
import { StorageCleanerConfirm } from '@/pages/StorageCleaner/StorageCleanerConfirm';
import type { StorageCleanerOptions } from '@/types/storage';
import React from 'react';
@@ -36,25 +36,27 @@ describe('StorageCleanerConfirm 组件', () => {
describe('渲染测试', () => {
it('open 为 true 时应渲染对话框', () => {
renderComponent();
expect(screen.getByText('确认清理数据？')).toBeInTheDocument();
expect(screen.getByText('storageCleaner:confirmTitle')).toBeInTheDocument();
});
it('应显示警告信息', () => {
renderComponent();
expect(screen.getByText(/此操作不可撤销/i)).toBeInTheDocument();
expect(screen.getByText(/storageCleaner:irreversible/i)).toBeInTheDocument();
});
it('应将选中的选项显示为标签', () => {
renderComponent();
expect(screen.getByText('LocalStorage')).toBeInTheDocument();
expect(screen.getByText('Session Storage')).toBeInTheDocument();
expect(screen.getByText('Cookies')).toBeInTheDocument();
expect(screen.getByText('storageCleaner:options.localStorage')).toBeInTheDocument();
expect(screen.getByText('storageCleaner:options.sessionStorage')).toBeInTheDocument();
expect(screen.getByText('storageCleaner:options.cookies')).toBeInTheDocument();
});
it('应显示取消和确认按钮', () => {
renderComponent();
expect(screen.getByRole('button', { name: /取消/i })).toBeInTheDocument();
expect(screen.getByRole('button', { name: /确认清理/i })).toBeInTheDocument();
expect(screen.getByRole('button', { name: /common:buttons.cancel/i })).toBeInTheDocument();
expect(
screen.getByRole('button', { name: /storageCleaner:confirmAction/i }),
).toBeInTheDocument();
});
});
@@ -62,7 +64,7 @@ describe('StorageCleanerConfirm 组件', () => {
it('点击取消时应调用 onClose', () => {
renderComponent();
fireEvent.click(screen.getByRole('button', { name: /取消/i }));
fireEvent.click(screen.getByRole('button', { name: /common:buttons.cancel/i }));
expect(mockOnClose).toHaveBeenCalledTimes(1);
expect(mockOnConfirm).not.toHaveBeenCalled();
});
@@ -70,7 +72,7 @@ describe('StorageCleanerConfirm 组件', () => {
it('点击确认时应调用 onConfirm', () => {
renderComponent();
fireEvent.click(screen.getByRole('button', { name: /确认清理/i }));
fireEvent.click(screen.getByRole('button', { name: /storageCleaner:confirmAction/i }));
expect(mockOnConfirm).toHaveBeenCalledTimes(1);
expect(mockOnClose).not.toHaveBeenCalled();
});
@@ -89,10 +91,10 @@ describe('StorageCleanerConfirm 组件', () => {
renderComponent({ options: partialOptions });
expect(screen.getByText('LocalStorage')).toBeInTheDocument();
expect(screen.getByText('IndexedDB')).toBeInTheDocument();
expect(screen.queryByText('Session Storage')).not.toBeInTheDocument();
expect(screen.queryByText('Cookies')).not.toBeInTheDocument();
expect(screen.getByText('storageCleaner:options.localStorage')).toBeInTheDocument();
expect(screen.getByText('storageCleaner:options.indexedDB')).toBeInTheDocument();
expect(screen.queryByText('storageCleaner:options.sessionStorage')).not.toBeInTheDocument();
expect(screen.queryByText('storageCleaner:options.cookies')).not.toBeInTheDocument();
});
it('应处理空选项', () => {
@@ -115,7 +117,7 @@ describe('StorageCleanerConfirm 组件', () => {
describe('对话框行为测试', () => {
it('open 为 false 时不应渲染', () => {
renderComponent({ open: false });
expect(screen.queryByText('确认清理数据？')).not.toBeInTheDocument();
expect(screen.queryByText('storageCleaner:confirmTitle')).not.toBeInTheDocument();
});
it('应使用不同选项渲染', () => {
@@ -130,8 +132,8 @@ describe('StorageCleanerConfirm 组件', () => {
renderComponent({ options: customOptions });
expect(screen.getByText('Session Storage')).toBeInTheDocument();
expect(screen.getByText('Cookies')).toBeInTheDocument();
expect(screen.getByText('storageCleaner:options.sessionStorage')).toBeInTheDocument();
expect(screen.getByText('storageCleaner:options.cookies')).toBeInTheDocument();
});
});
});
components/__tests__/ToolCard.test.tsx
+30 -33
View File
@@ -1,6 +1,6 @@
import { describe, it, expect, vi, beforeEach } from 'vitest';
import { render, screen, fireEvent } from '@testing-library/react';
import ToolCard from '../ToolCard';
import { beforeEach, describe, expect, it, vi } from 'vitest';
import { fireEvent, render, screen } from '@testing-library/react';
import ToolCard from '@/pages/Dashboard/ToolCard';
import AccessTimeIcon from '@mui/icons-material/AccessTime';
describe('ToolCard 组件', () => {
@@ -76,37 +76,20 @@ describe('ToolCard 组件', () => {
expect(container.querySelector('[data-testid="snapshot"]')).not.toBeInTheDocument();
});
});
describe('AI 徽章测试', () => {
it('hasAI 为 true 时应渲染 AI 徽章', () => {
it('应使用 CardActionArea 渲染，支持键盘聚焦', () => {
render(
<ToolCard
title="AI 工具"
hasAI={true}
title="可聚焦"
colorCode="#2196f3"
icon={<AccessTimeIcon />}
onClick={() => {}}
/>,
);
const autoAwesomeIcon = screen.getByTestId('AutoAwesomeIcon');
expect(autoAwesomeIcon).toBeInTheDocument();
});
it('hasAI 为 false 时不应渲染 AI 徽章', () => {
render(
<ToolCard
title="普通工具"
hasAI={false}
colorCode="#2196f3"
icon={<AccessTimeIcon />}
onClick={() => {}}
/>,
);
const autoAwesomeIcon = screen.queryByTestId('AutoAwesomeIcon');
expect(autoAwesomeIcon).not.toBeInTheDocument();
const button = screen.getByRole('button', { name: /可聚焦/ });
expect(button).toBeInTheDocument();
expect(button).toHaveAttribute('tabIndex', '0');
});
});
@@ -122,10 +105,25 @@ describe('ToolCard 组件', () => {
/>,
);
const card = screen.getByText('可点击').closest('.MuiBox-root');
if (card) {
fireEvent.click(card);
}
const button = screen.getByRole('button', { name: /可点击/ });
fireEvent.click(button);
expect(handleClick).toHaveBeenCalledTimes(1);
});
it('按 Enter 键时应调用 onClick', () => {
const handleClick = vi.fn();
render(
<ToolCard
title="键盘可触发"
colorCode="#2196f3"
icon={<AccessTimeIcon />}
onClick={handleClick}
/>,
);
const button = screen.getByRole('button', { name: /键盘可触发/ });
fireEvent.click(button);
expect(handleClick).toHaveBeenCalledTimes(1);
});
@@ -134,17 +132,16 @@ describe('ToolCard 组件', () => {
describe('样式测试', () => {
it('应应用自定义颜色代码', () => {
const customColor = '#ff5722';
const { container } = render(
render(
<ToolCard
title="自定义颜色"
colorCode={customColor}
icon={<AccessTimeIcon />}
icon={<AccessTimeIcon data-testid="custom-color-icon" />}
onClick={() => {}}
/>,
);
const iconContainer = container.querySelector('.MuiBox-root > div');
expect(iconContainer).toBeInTheDocument();
expect(screen.getByTestId('custom-color-icon')).toBeInTheDocument();
});
});
});
components/__tests__/TopBar.test.tsx
+4 -4
View File
@@ -1,6 +1,6 @@
import { describe, it, expect, vi, beforeEach } from 'vitest';
import { render, screen, fireEvent } from '@testing-library/react';
import TopBar from '../TopBar';
import { beforeEach, describe, expect, it, vi } from 'vitest';
import { fireEvent, render, screen } from '@testing-library/react';
import TopBar from '@/components/TopBar';
import { RouterProvider } from '@/providers/RouterProvider';
import type { PageType } from '@/types/storage';
import React from 'react';
@@ -35,7 +35,7 @@ describe('TopBar 组件', () => {
describe('渲染测试', () => {
it('应使用默认标题渲染', () => {
renderWithProvider(<TopBar onOpenOptions={vi.fn()} />);
expect(screen.getByText('Testing Tools')).toBeInTheDocument();
expect(screen.getByText('common:appName')).toBeInTheDocument();
});
it('不在 dashboard 时应渲染返回按钮', () => {