Develop (#74)
* feat: 生成成功改为 toast 提示 * refactor: 数据预览改为显示示例数据，简化组件逻辑 * fix: 非必填字段预览显示 null * fix: 修复空值率与必填状态的逻辑 * fix: 切换为非必填时默认空值率 100% * feat: 字段编辑弹窗添加「完成」按钮 去除关闭按钮，添加取消按钮 * refactor: 删除未使用的 defaultNullRate 功能 * feat: 优化规则管理功能 * fix: 更新 features 测试断言以匹配新增的 testDataGenerator * refactor: 将 formatFileSize 重命名为 formatBytes 并移至通用工具模块 * refactor: 使用 Label 组件替换原生 label 元素，并在 DecodeResultPaper 中引入 Input 组件 * refactor: 规范化页面组件目录结构 * refactor(JsonTools): 规范化页面组件目录结构 * refactor(StorageCleaner): 规范化页面组件目录结构 * refactor(Timestamp): 规范化页面组件目录结构 * refactor(i18n): 移除 chrome.i18n 国际化，统一使用中文硬编码 * refactor(AppRoot): 移除 RouterProvider 组件，直接渲染子组件 * fix(RouterProvider): 将 goBack 重命名为 goHome，修复跨窗同步 merge 不一致 * fix(ThemeModeProvider): 修复主题快照同步与首屏闪烁问题 * refactor: 将 UI 文案改为中文并优化相关逻辑 * refactor: 清理代码注释并优化组件结构 * feat(Dashboard): 重构仪表板功能组件和逻辑 * refactor: 更新功能键名称并移除 README 文件 * refactor: 重构 TopBar 组件并更新项目结构 * feat(TopBar): 添加搜索功能组件并优化结构 * refactor: 统一使用 Button 组件替换原有 button 元素 * feat: 添加 EmptyPlaceholder 组件并更新相关页面 * feat(TextStatistics): 引入 StatCard 组件以优化统计信息展示 * feat(Timestamp): 重构时间戳转换功能，新增 ConverterForm 组件 * feat(Jwt): 重构 JWT 组件，新增常量和结果视图 * refactor(RightClickRestorer): 用状态配置表简化页面 UI 结构 * fix(business): 修复 skewedRandom 函数中的数学计算错误 * refactor(ImageUploader): 移除预览 URL 相关逻辑并简化粘贴事件处理 * feat(TestDataGenerator): 更新规则编辑提示和警告显示逻辑 * refactor(CopyButton.test): 移除冗余测试用例 * refactor(RouterProvider, chromeStorage, useContextMenuData): 更新存储获取逻辑以移除默认值参数 * refactor(代码重复): 抽取共享工具函数与 UI 组件，消除多处重复实现 * fix(RouterProvider): 修复初始加载状态逻辑，确保在加载前不覆盖 chrome.storage * feat(TopBar): 添加搜索框快捷键提示功能及相关测试 * refactor(StorageCleaner): 移动 isRestrictedUrl 函数到独立模块并更新相关引用 * fix(StorageCleaner): 修复 IndexedDB 清理竞态、部分成功计数与刷新后状态同步 * fix: 修复路由初始化竞态、存储状态静默覆盖与存储清理误删 * refactor: 统一中文文案并简化组件结构，提升代码可读性 * refactor: 更新 Worker 消息类型以支持生成任务 ID * fix: 修复 ruleStorage 写入失败处理与 CopyButton 成功态样式
This commit is contained in:
LingandRX
@@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
|
||||
|
Before Width: | Height: | Size: 4.0 KiB |
@@ -1,10 +1,9 @@
|
||||
import React, { useEffect, useRef, useState } from 'react';
|
||||
import { Check, Copy } from 'lucide-react';
|
||||
import { copyTextToClipboard } from '@/utils/clipboard';
|
||||
import { Button, type ButtonProps } from '@/components/ui/button';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { buttonVariants, type ButtonProps } from '@/components/ui/button';
|
||||
import { toast } from 'sonner';
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
|
||||
interface CopyButtonProps extends Omit<ButtonProps, 'children' | 'onClick'> {
|
||||
text: string;
|
||||
@@ -19,7 +18,6 @@ export const CopyButton: React.FC<CopyButtonProps> = ({
|
||||
className,
|
||||
...props
|
||||
}) => {
|
||||
const { t } = useI18n('common');
|
||||
const [copied, setCopied] = useState(false);
|
||||
const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
|
||||
|
||||
@@ -33,33 +31,30 @@ export const CopyButton: React.FC<CopyButtonProps> = ({
|
||||
e.stopPropagation();
|
||||
|
||||
if (!text) {
|
||||
toast.error(t('messages.copyEmpty'));
|
||||
toast.error('无内容可复制');
|
||||
return;
|
||||
}
|
||||
|
||||
const success = await copyTextToClipboard(text);
|
||||
if (success) {
|
||||
toast.success(t('messages.copySuccess'));
|
||||
toast.success('已复制到剪贴板');
|
||||
setCopied(true);
|
||||
if (timerRef.current) clearTimeout(timerRef.current);
|
||||
timerRef.current = setTimeout(() => setCopied(false), 1500);
|
||||
} else {
|
||||
toast.error(t('messages.copyError'));
|
||||
toast.error('复制失败');
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<button
|
||||
<Button
|
||||
type="button"
|
||||
onClick={handleCopy}
|
||||
title={tooltip ?? t('buttons.copy')}
|
||||
aria-label={tooltip ?? t('buttons.copy')}
|
||||
className={cn(
|
||||
buttonVariants({ variant, size }),
|
||||
copied &&
|
||||
'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 hover:bg-emerald-500/10',
|
||||
className,
|
||||
)}
|
||||
title={tooltip ?? '复制'}
|
||||
aria-label={tooltip ?? '复制'}
|
||||
variant={variant}
|
||||
size={size}
|
||||
className={cn(className, copied && 'text-emerald-500')}
|
||||
{...props}
|
||||
>
|
||||
{copied ? (
|
||||
@@ -67,7 +62,7 @@ export const CopyButton: React.FC<CopyButtonProps> = ({
|
||||
) : (
|
||||
<Copy className="h-[1.2em] w-[1.2em]" />
|
||||
)}
|
||||
</button>
|
||||
</Button>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -1,86 +0,0 @@
|
||||
/**
|
||||
* DecodeResultPaper
|
||||
*
|
||||
* FileMode 与 ImageMode 通用的 decode 结果展示组件。
|
||||
* 提取了二者 decode 输出区完全一致的结构：
|
||||
* 标题 → 可选预览（children）→ 文件信息 → 文件名输入 → 下载按钮
|
||||
*
|
||||
* FileMode 直接使用，ImageMode 通过 children 传入图片预览。
|
||||
*/
|
||||
import { Download } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { formatFileSize } from '@/utils/base64Converter';
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
|
||||
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 } = useI18n('base64Converter');
|
||||
|
||||
return (
|
||||
<div className="p-4 rounded-xl bg-primary/10 border border-primary/30">
|
||||
{/* 标题 */}
|
||||
<span className="block mb-2 text-xs font-bold text-muted-foreground">{title}</span>
|
||||
|
||||
{/* 可选预览内容（ImageMode 的图片） */}
|
||||
{children}
|
||||
|
||||
{/* 文件信息 */}
|
||||
<div className="flex gap-4 mb-3">
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{t('inferredMimeType')}: {mimeType}
|
||||
</span>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{t('decodedSize')}: {formatFileSize(blobSize)}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* 文件名输入 */}
|
||||
<div className="mb-3">
|
||||
<label className="block text-xs font-medium text-muted-foreground mb-1">
|
||||
{t('decodedFileName')}
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={fileName}
|
||||
onChange={(e) => onFileNameChange(e.target.value)}
|
||||
className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 下载按钮 */}
|
||||
<Button
|
||||
variant="default"
|
||||
onClick={onDownload}
|
||||
disabled={!fileName.trim()}
|
||||
className="w-full rounded-lg font-bold"
|
||||
>
|
||||
<Download className="mr-2 h-4 w-4" />
|
||||
{t('download')}
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
import React from 'react';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
export interface EmptyPlaceholderProps extends React.HTMLAttributes<HTMLDivElement> {
|
||||
children: React.ReactNode;
|
||||
messageClassName?: string;
|
||||
}
|
||||
|
||||
const CONTAINER_CLASSES =
|
||||
'rounded-xl bg-muted/30 border border-dashed border-border/80 text-center flex flex-col items-center justify-center select-none p-8 min-h-[120px]';
|
||||
|
||||
const MESSAGE_CLASSES =
|
||||
'text-xs font-semibold text-muted-foreground/80 tracking-wide max-w-[240px] leading-relaxed';
|
||||
|
||||
export default function EmptyPlaceholder({
|
||||
children,
|
||||
className,
|
||||
messageClassName,
|
||||
...props
|
||||
}: EmptyPlaceholderProps) {
|
||||
return (
|
||||
<div className={cn(CONTAINER_CLASSES, className)} {...props}>
|
||||
{typeof children === 'string' || typeof children === 'number' ? (
|
||||
<p className={cn(MESSAGE_CLASSES, messageClassName)}>{children}</p>
|
||||
) : (
|
||||
children
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,7 +1,5 @@
|
||||
import { Component, ErrorInfo, ReactNode } from 'react';
|
||||
import { AlertCircle, RefreshCw } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { getMessage } from '@/utils/chromeI18n';
|
||||
import { ErrorFallback } from '@/components/ErrorFallback';
|
||||
|
||||
interface Props {
|
||||
children: ReactNode;
|
||||
@@ -39,34 +37,14 @@ class ErrorBoundary extends Component<Props, State> {
|
||||
render() {
|
||||
if (this.state.hasError) {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center mt-16 mx-auto max-w-md">
|
||||
<div className="p-6 text-center rounded-xl border border-destructive/20 bg-destructive/5 shadow-sm">
|
||||
<div className="flex h-16 w-16 items-center justify-center rounded-full bg-destructive/10 text-destructive mx-auto mb-4">
|
||||
<AlertCircle className="h-8 w-8" />
|
||||
</div>
|
||||
<h2 className="text-xl font-extrabold text-destructive mb-2">
|
||||
{getMessage('errorBoundary_title')}
|
||||
</h2>
|
||||
<p className="text-sm text-muted-foreground mb-6">
|
||||
{getMessage('errorBoundary_description')}
|
||||
</p>
|
||||
{this.state.error && (
|
||||
<div className="mb-6 p-4 rounded-lg bg-zinc-950 dark:bg-zinc-900 text-left max-h-[200px] overflow-auto border border-border/40">
|
||||
<pre className="font-mono text-xs whitespace-pre-wrap break-all text-zinc-200 selection:bg-zinc-700">
|
||||
{this.state.error.toString()}
|
||||
</pre>
|
||||
</div>
|
||||
)}
|
||||
<Button
|
||||
variant="destructive"
|
||||
onClick={this.handleReset}
|
||||
className="rounded-lg font-bold shadow-sm"
|
||||
>
|
||||
<RefreshCw className="mr-2 h-4 w-4" />
|
||||
{getMessage('errorBoundary_refresh')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<ErrorFallback
|
||||
variant="app"
|
||||
title="糟糕，出了点问题"
|
||||
description="应用遇到了一些意外错误。您可以尝试刷新页面或重置应用。"
|
||||
error={this.state.error}
|
||||
actionLabel="刷新应用"
|
||||
onAction={this.handleReset}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,94 @@
|
||||
import { AlertCircle, RefreshCw } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
export interface ErrorFallbackProps {
|
||||
title: string;
|
||||
description: string;
|
||||
error: Error | null;
|
||||
actionLabel: string;
|
||||
onAction: () => void;
|
||||
variant?: 'app' | 'page';
|
||||
showStack?: boolean;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function ErrorFallback({
|
||||
title,
|
||||
description,
|
||||
error,
|
||||
actionLabel,
|
||||
onAction,
|
||||
variant = 'page',
|
||||
showStack = false,
|
||||
className,
|
||||
}: ErrorFallbackProps) {
|
||||
const isApp = variant === 'app';
|
||||
const errorText = error ? (showStack ? error.stack || error.toString() : error.toString()) : null;
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
'flex flex-col items-center justify-center',
|
||||
isApp
|
||||
? 'mt-16 mx-auto max-w-md'
|
||||
: 'flex-1 p-6 min-h-[300px] animate-in fade-in zoom-in-95 duration-200',
|
||||
className,
|
||||
)}
|
||||
>
|
||||
<div
|
||||
className={cn(
|
||||
'p-6 text-center rounded-xl border border-destructive/20 bg-destructive/5 shadow-sm',
|
||||
!isApp && 'max-w-md w-full',
|
||||
)}
|
||||
>
|
||||
<div
|
||||
className={cn(
|
||||
'flex items-center justify-center rounded-full bg-destructive/10 text-destructive mx-auto mb-4',
|
||||
isApp ? 'h-16 w-16' : 'h-12 w-12',
|
||||
)}
|
||||
>
|
||||
<AlertCircle className={isApp ? 'h-8 w-8' : 'h-6 w-6'} />
|
||||
</div>
|
||||
|
||||
{isApp ? (
|
||||
<h2 className="text-xl font-extrabold text-destructive mb-2">{title}</h2>
|
||||
) : (
|
||||
<h3 className="text-base font-semibold text-foreground mb-1.5">{title}</h3>
|
||||
)}
|
||||
|
||||
<p className={cn('text-muted-foreground', isApp ? 'text-sm mb-6' : 'text-xs mb-5')}>
|
||||
{description}
|
||||
</p>
|
||||
|
||||
{errorText && (
|
||||
<div
|
||||
className={cn(
|
||||
'rounded-lg bg-zinc-950 dark:bg-zinc-900 text-left border border-border/40',
|
||||
isApp ? 'mb-6 p-4 max-h-[200px] overflow-auto' : 'mb-5 p-3 max-h-40 overflow-y-auto',
|
||||
)}
|
||||
>
|
||||
<pre
|
||||
className={cn(
|
||||
'font-mono whitespace-pre-wrap break-all text-zinc-200 selection:bg-zinc-700',
|
||||
isApp ? 'text-xs' : 'text-[11px] leading-relaxed',
|
||||
)}
|
||||
>
|
||||
{errorText}
|
||||
</pre>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Button
|
||||
variant="destructive"
|
||||
size={isApp ? 'default' : 'sm'}
|
||||
onClick={onAction}
|
||||
className={cn(isApp ? 'rounded-lg font-bold shadow-sm' : 'font-medium shadow-sm')}
|
||||
>
|
||||
<RefreshCw className={isApp ? 'mr-2 h-4 w-4' : 'mr-1.5 h-3.5 w-3.5'} />
|
||||
{actionLabel}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,7 +1,5 @@
|
||||
import { Component, ErrorInfo, ReactNode } from 'react';
|
||||
import { AlertCircle, RefreshCw } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { getMessage } from '@/utils/chromeI18n';
|
||||
import { ErrorFallback } from '@/components/ErrorFallback';
|
||||
|
||||
interface Props {
|
||||
children: ReactNode;
|
||||
@@ -40,38 +38,15 @@ class PageErrorBoundary extends Component<Props, State> {
|
||||
render() {
|
||||
if (this.state.hasError) {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center flex-1 p-6 min-h-[300px] animate-in fade-in zoom-in-95 duration-200">
|
||||
<div className="p-6 text-center rounded-xl border border-destructive/20 bg-destructive/5 max-w-md w-full shadow-sm">
|
||||
<div className="flex h-12 w-12 items-center justify-center rounded-full bg-destructive/10 text-destructive mx-auto mb-4">
|
||||
<AlertCircle className="h-6 w-6" />
|
||||
</div>
|
||||
|
||||
<h3 className="text-base font-semibold text-foreground mb-1.5">
|
||||
{getMessage('pageErrorBoundary_title')}
|
||||
</h3>
|
||||
<p className="text-xs text-muted-foreground mb-5">
|
||||
{getMessage('pageErrorBoundary_description')}
|
||||
</p>
|
||||
|
||||
{this.state.error && (
|
||||
<div className="mb-5 p-3 rounded-lg bg-zinc-950 dark:bg-zinc-900 text-left max-h-40 overflow-y-auto border border-border/40">
|
||||
<pre className="font-mono text-[11px] leading-relaxed whitespace-pre-wrap break-all text-zinc-200 selection:bg-zinc-700">
|
||||
{this.state.error.stack || this.state.error.toString()}
|
||||
</pre>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Button
|
||||
variant="destructive"
|
||||
size="sm"
|
||||
onClick={this.handleRetry}
|
||||
className="font-medium shadow-sm"
|
||||
>
|
||||
<RefreshCw className="mr-1.5 h-3.5 w-3.5" />
|
||||
{getMessage('errorBoundary_retry')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<ErrorFallback
|
||||
variant="page"
|
||||
title="该功能运行异常"
|
||||
description="该页面在加载或渲染时遇到了内部脚本错误。您可以尝试重试，或者通过导航菜单切换到其他工具。"
|
||||
error={this.state.error}
|
||||
actionLabel="重新尝试"
|
||||
onAction={this.handleRetry}
|
||||
showStack
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -6,9 +6,9 @@
|
||||
|
||||
| 组件 | 用途 |
|
||||
| ----------------------- | ------------------------------------------------------------------------------ |
|
||||
| `TopBar.tsx` | 顶部导航栏，集成搜索（含历史记录）、主题切换、语言切换、返回导航 |
|
||||
| `RouterContainer.tsx` | 路由容器，根据当前路由动态渲染对应页面组件，集成错误边界和骨架屏 |
|
||||
| `SwitchButtonGroup.tsx` | 通用切换按钮组，支持 `small/medium/large` 三种尺寸，用于页面子模式切换 |
|
||||
| `EmptyPlaceholder.tsx` | 虚线边框空状态占位，统一工具页「暂无结果」提示样式 |
|
||||
| `TextInputArea.tsx` | 增强文本输入区域，支持校验规则、工具栏操作、字符计数、清空 |
|
||||
| `CopyButton.tsx` | 一键复制按钮，支持复制成功状态动画，封装 `copyTextToClipboard` 和 `toast` 反馈 |
|
||||
| `ImageUploader.tsx` | 图片上传组件，支持拖拽上传、文件选择和预览 |
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
import { FEATURES, getEntryPointType } from '@/config/features';
|
||||
import { useRouter } from '@/providers/RouterProvider';
|
||||
import { Suspense } from 'react';
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
import PageErrorBoundary from '@/components/PageErrorBoundary';
|
||||
import PageSkeleton from '@/components/PageSkeleton';
|
||||
import { cn } from '@/lib/utils';
|
||||
@@ -11,7 +10,6 @@ const entryPointType = getEntryPointType();
|
||||
|
||||
export default function RouterContainer() {
|
||||
const { currentPage, isLoaded } = useRouter();
|
||||
const { t } = useI18n('common');
|
||||
|
||||
const animationClass =
|
||||
currentPage === 'dashboard' ? 'page-transition-dashboard' : 'page-transition-enter';
|
||||
@@ -43,9 +41,9 @@ export default function RouterContainer() {
|
||||
<div className="flex h-12 w-12 items-center justify-center rounded-xl bg-destructive/10 text-destructive mb-4">
|
||||
<AlertTriangle className="h-6 w-6" />
|
||||
</div>
|
||||
<h3 className="text-sm font-semibold text-foreground">{t('router.notFound')}</h3>
|
||||
<h3 className="text-sm font-semibold text-foreground">页面未找到</h3>
|
||||
<p className="text-xs text-muted-foreground mt-1 max-w-[240px]">
|
||||
{t('router.notFoundDescription', { entryPointType })}
|
||||
{`该功能在当前运行环境（${entryPointType}）下不可用或已被移除。`}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import React from 'react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
export interface SwitchOption<T extends string | number = string> {
|
||||
@@ -17,6 +18,16 @@ export interface SwitchButtonGroupProps<T extends string | number = string> exte
|
||||
buttonClassName?: string;
|
||||
}
|
||||
|
||||
const SIZE_CLASSES = {
|
||||
small: 'text-xs h-8 px-2 py-1 rounded-md',
|
||||
medium: 'text-sm h-9 px-3 py-1.5 rounded-md',
|
||||
large: 'text-base h-11 px-4 py-2 rounded-lg',
|
||||
} as const;
|
||||
|
||||
const SELECTED_CLASSES =
|
||||
'bg-background text-foreground shadow-sm font-semibold animate-in fade-in-50 zoom-in-95 duration-150';
|
||||
const UNSELECTED_CLASSES = 'hover:bg-background/50 hover:text-foreground/80';
|
||||
|
||||
export default function SwitchButtonGroup<T extends string | number = string>({
|
||||
value,
|
||||
options,
|
||||
@@ -26,12 +37,6 @@ export default function SwitchButtonGroup<T extends string | number = string>({
|
||||
buttonClassName,
|
||||
...props
|
||||
}: SwitchButtonGroupProps<T>) {
|
||||
const sizeClasses = {
|
||||
small: 'text-xs h-8 px-2 py-1 rounded-md',
|
||||
medium: 'text-sm h-9 px-3 py-1.5 rounded-md',
|
||||
large: 'text-base h-11 px-4 py-2 rounded-lg',
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
@@ -40,29 +45,22 @@ export default function SwitchButtonGroup<T extends string | number = string>({
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{options.map((option) => {
|
||||
const isSelected = value === option.value;
|
||||
|
||||
return (
|
||||
<button
|
||||
key={option.value}
|
||||
type="button"
|
||||
onClick={() => onChange(option.value)}
|
||||
className={cn(
|
||||
'flex-1 inline-flex items-center justify-center font-medium whitespace-nowrap transition-all',
|
||||
'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-2',
|
||||
'disabled:pointer-events-none disabled:opacity-50',
|
||||
sizeClasses[size],
|
||||
isSelected
|
||||
? 'bg-background text-foreground shadow-sm font-semibold animate-in fade-in-50 zoom-in-95 duration-150'
|
||||
: 'hover:bg-background/50 hover:text-foreground/80',
|
||||
buttonClassName,
|
||||
)}
|
||||
>
|
||||
{option.label}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
{options.map((option) => (
|
||||
<Button
|
||||
key={option.value}
|
||||
type="button"
|
||||
variant="ghost"
|
||||
onClick={() => onChange(option.value)}
|
||||
className={cn(
|
||||
'flex-1 transition-all',
|
||||
SIZE_CLASSES[size],
|
||||
value === option.value ? SELECTED_CLASSES : UNSELECTED_CLASSES,
|
||||
buttonClassName,
|
||||
)}
|
||||
>
|
||||
{option.label}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
import React, { forwardRef, useCallback, useImperativeHandle, useRef, useState } from 'react';
|
||||
import { X } from 'lucide-react';
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { toast } from 'sonner'; // 推荐使用 shadcn 的默认 Toast
|
||||
import { toast } from 'sonner';
|
||||
import { CopyButton } from '@/components/CopyButton';
|
||||
import { Button } from './ui/button';
|
||||
|
||||
export type ValidateRule = {
|
||||
validator: (value: string) => boolean;
|
||||
@@ -44,7 +44,6 @@ export interface TextInputAreaProps extends Omit<
|
||||
onClear?: () => void;
|
||||
}
|
||||
|
||||
// 提炼基础的 ActionButton，全面向 shadcn 核心 Button 样式对齐
|
||||
function ActionButton({
|
||||
action,
|
||||
value,
|
||||
@@ -114,8 +113,7 @@ const TextInputArea = forwardRef<HTMLTextAreaElement, TextInputAreaProps>((props
|
||||
const [internalValue, setInternalValue] = useState(defaultValue);
|
||||
const [error, setError] = useState<string>('');
|
||||
|
||||
const { t } = useI18n('common');
|
||||
const placeholder = placeholderProp ?? t('textInputArea.placeholder');
|
||||
const placeholder = placeholderProp ?? '请输入文本';
|
||||
|
||||
const isControlled = controlledValue !== undefined;
|
||||
const value = isControlled ? controlledValue : internalValue;
|
||||
@@ -127,7 +125,6 @@ const TextInputArea = forwardRef<HTMLTextAreaElement, TextInputAreaProps>((props
|
||||
const textArea = internalRef.current;
|
||||
if (!textArea) return;
|
||||
|
||||
// 重置高度计算
|
||||
textArea.style.height = 'auto';
|
||||
|
||||
const computedMin = minRows * 24;
|
||||
@@ -159,7 +156,7 @@ const TextInputArea = forwardRef<HTMLTextAreaElement, TextInputAreaProps>((props
|
||||
const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
|
||||
const newVal = e.target.value;
|
||||
if (maxLength && newVal.length > maxLength) {
|
||||
const msg = t('charCount', { count: maxLength });
|
||||
const msg = `内容不能超过 ${maxLength} 个字符`;
|
||||
setError(msg);
|
||||
toast.warning(msg);
|
||||
return;
|
||||
@@ -181,9 +178,9 @@ const TextInputArea = forwardRef<HTMLTextAreaElement, TextInputAreaProps>((props
|
||||
onChange?.('');
|
||||
setError('');
|
||||
internalRef.current?.focus();
|
||||
toast.success(t('textInputArea.cleared'));
|
||||
toast.success('已清空');
|
||||
onClear?.();
|
||||
}, [isControlled, onChange, onClear, t]);
|
||||
}, [isControlled, onChange, onClear]);
|
||||
|
||||
const handleAction = useCallback(
|
||||
(action: ToolbarAction) => {
|
||||
@@ -256,7 +253,6 @@ const TextInputArea = forwardRef<HTMLTextAreaElement, TextInputAreaProps>((props
|
||||
|
||||
{hasBottomBar && (
|
||||
<div className="flex h-10 items-center justify-between px-4 bg-muted/30 border-t border-border/50">
|
||||
{/* 左侧自定义动作 */}
|
||||
<div className="flex items-center gap-1.5 min-w-0">
|
||||
{bottomActions.map((action) => (
|
||||
<ActionButton
|
||||
@@ -269,32 +265,27 @@ const TextInputArea = forwardRef<HTMLTextAreaElement, TextInputAreaProps>((props
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* 右侧系统按钮组 */}
|
||||
<div className="flex items-center gap-1.5 ml-auto shrink-0">
|
||||
{allowCopy && value && (
|
||||
<CopyButton
|
||||
text={value}
|
||||
tooltip={t('textInputArea.copyContent')}
|
||||
size="sm"
|
||||
className="h-7 w-7 p-1"
|
||||
/>
|
||||
<CopyButton text={value} tooltip="复制内容" size="sm" className="h-7 w-7 p-1" />
|
||||
)}
|
||||
{showClear && value && !disabled && !readOnly && (
|
||||
<button
|
||||
<Button
|
||||
type="button"
|
||||
onClick={handleClear}
|
||||
aria-label={t('textInputArea.clear')}
|
||||
className="p-1 h-7 w-7 flex items-center justify-center rounded-md text-muted-foreground hover:text-destructive hover:bg-destructive/10 transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
|
||||
aria-label="清空"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-7 w-7 text-muted-foreground hover:text-destructive hover:bg-destructive/10"
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
</button>
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 错误提示 */}
|
||||
{displayError && (
|
||||
<p className="text-xs font-medium text-destructive px-0.5 animate-in fade-in slide-in-from-top-1 duration-150">
|
||||
{displayError}
|
||||
|
||||
@@ -1,313 +0,0 @@
|
||||
import React, { useEffect, useMemo, useRef, useState } from 'react';
|
||||
import { ArrowLeft, ExternalLink, Monitor, Moon, Search, Sun, X } from 'lucide-react';
|
||||
import { useRouter } from '@/providers/RouterProvider';
|
||||
import { useThemeMode } from '@/providers/ThemeModeProvider';
|
||||
import { FeatureConfig, FEATURES } from '@/config/features';
|
||||
import { storageUtil } from '@/utils/chromeStorage';
|
||||
import { openExtensionPage } from '@/utils/chromeTabs';
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
const SEARCH_HISTORY_LIMIT = 10;
|
||||
const SEARCH_HISTORY_DISPLAY = 5;
|
||||
|
||||
export default function TopBar() {
|
||||
const { currentPage, goBack, navigateTo } = useRouter();
|
||||
const { mode, setMode } = useThemeMode();
|
||||
const { t } = useI18n(['common', 'features']);
|
||||
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const [showResults, setShowResults] = useState(false);
|
||||
const [searchHistory, setSearchHistory] = useState<string[]>([]);
|
||||
const [selectedIndex, setSelectedIndex] = useState(-1);
|
||||
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
const handleOpenInTab = async () => {
|
||||
await openExtensionPage('popup.html', { mode: 'tab' });
|
||||
window.close();
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const handleClickOutside = (event: MouseEvent) => {
|
||||
if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
|
||||
setShowResults(false);
|
||||
}
|
||||
};
|
||||
document.addEventListener('mousedown', handleClickOutside);
|
||||
return () => document.removeEventListener('mousedown', handleClickOutside);
|
||||
}, []);
|
||||
|
||||
// Cmd/Ctrl+K 快捷键聚焦搜索框
|
||||
useEffect(() => {
|
||||
const handleGlobalKeyDown = (e: KeyboardEvent) => {
|
||||
if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
|
||||
e.preventDefault();
|
||||
inputRef.current?.focus();
|
||||
setShowResults(true);
|
||||
}
|
||||
};
|
||||
document.addEventListener('keydown', handleGlobalKeyDown);
|
||||
return () => document.removeEventListener('keydown', handleGlobalKeyDown);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
storageUtil
|
||||
.get('app/searchHistory', [])
|
||||
.then((history) => {
|
||||
if (history) setSearchHistory(history);
|
||||
})
|
||||
.catch((err) => console.error('加载搜索历史失败:', err));
|
||||
}, []);
|
||||
|
||||
const searchResults = useMemo(() => {
|
||||
const query = searchQuery.trim().toLowerCase();
|
||||
if (!query) return [];
|
||||
return FEATURES.filter((f) => {
|
||||
if (f.key === 'dashboard') return false;
|
||||
return (
|
||||
t(f.labelKey).toLowerCase().includes(query) ||
|
||||
t(f.descriptionKey).toLowerCase().includes(query)
|
||||
);
|
||||
});
|
||||
}, [searchQuery, t]);
|
||||
|
||||
const displayedHistory = useMemo(() => {
|
||||
if (searchQuery.trim()) return [];
|
||||
return searchHistory
|
||||
.slice(0, SEARCH_HISTORY_DISPLAY)
|
||||
.map((key) => ({ key, feature: FEATURES.find((f) => f.key === key) }))
|
||||
.filter((item) => item.feature && item.feature.key !== 'dashboard');
|
||||
}, [searchHistory, searchQuery]);
|
||||
|
||||
const saveToHistory = async (featureKey: string) => {
|
||||
if (!featureKey.trim()) return;
|
||||
const nextHistory = [featureKey, ...searchHistory.filter((h) => h !== featureKey)].slice(
|
||||
0,
|
||||
SEARCH_HISTORY_LIMIT,
|
||||
);
|
||||
setSearchHistory(nextHistory);
|
||||
await storageUtil.set('app/searchHistory', nextHistory).catch((err) => console.error(err));
|
||||
};
|
||||
|
||||
const handleSelectFeature = (feature: FeatureConfig) => {
|
||||
navigateTo(feature.key);
|
||||
saveToHistory(feature.key);
|
||||
setSearchQuery('');
|
||||
setShowResults(false);
|
||||
};
|
||||
|
||||
const cycleThemeMode = () => {
|
||||
const nextMap = { light: 'dark', dark: 'system', system: 'light' } as const;
|
||||
setMode(nextMap[mode]);
|
||||
};
|
||||
|
||||
const ThemeIcon = mode === 'light' ? Sun : mode === 'dark' ? Moon : Monitor;
|
||||
|
||||
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') {
|
||||
e.preventDefault();
|
||||
if (selectedIndex >= 0 && selectedIndex < totalItems) {
|
||||
if (searchQuery.trim()) {
|
||||
handleSelectFeature(searchResults[selectedIndex]);
|
||||
} else {
|
||||
const selected = displayedHistory[selectedIndex];
|
||||
if (selected?.feature) {
|
||||
handleSelectFeature(selected.feature);
|
||||
}
|
||||
}
|
||||
} 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 (
|
||||
<header className="flex h-14 items-center justify-between border-b border-border bg-background px-4 relative z-50">
|
||||
{/* 左侧：返回按钮区 */}
|
||||
<div className="flex w-10 items-center justify-start">
|
||||
{!isDashboard && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={goBack}
|
||||
aria-label={t('common_buttons_back')}
|
||||
className="flex h-8 w-8 items-center justify-center rounded-md border border-input bg-background text-muted-foreground shadow-sm transition-colors hover:bg-accent hover:text-accent-foreground"
|
||||
>
|
||||
<ArrowLeft className="h-4 w-4" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 中间：搜索容器 */}
|
||||
<div ref={containerRef} className="flex-1 mx-4 max-w-md relative">
|
||||
<div className="relative group">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground/60 group-focus-within:text-muted-foreground transition-colors pointer-events-none" />
|
||||
<input
|
||||
ref={inputRef}
|
||||
type="text"
|
||||
placeholder={t('common_buttons_search')}
|
||||
value={searchQuery}
|
||||
onChange={(e) => {
|
||||
setSearchQuery(e.target.value);
|
||||
setShowResults(true);
|
||||
setSelectedIndex(-1);
|
||||
}}
|
||||
onFocus={() => setShowResults(true)}
|
||||
onKeyDown={handleKeyDown}
|
||||
aria-label={t('common_buttons_search')}
|
||||
className="w-full h-9 pl-9 pr-16 text-sm rounded-lg border border-border/60 bg-muted/40 transition-all placeholder:text-muted-foreground/50 focus:bg-background focus:outline-none focus:ring-1 focus:ring-ring focus:border-input"
|
||||
/>
|
||||
{!searchQuery && (
|
||||
<kbd className="absolute right-3 top-1/2 -translate-y-1/2 hidden sm:inline-flex h-5 items-center gap-0.5 rounded border border-border/60 bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground/60 pointer-events-none">
|
||||
⌘K
|
||||
</kbd>
|
||||
)}
|
||||
{searchQuery && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setSearchQuery('');
|
||||
setSelectedIndex(-1);
|
||||
}}
|
||||
aria-label={t('common:buttons.clearSearch')}
|
||||
className="absolute right-2 top-1/2 -translate-y-1/2 p-1 rounded-md text-muted-foreground hover:text-foreground transition-colors"
|
||||
>
|
||||
<X className="h-3 w-3" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 动态联想结果卡片 */}
|
||||
{showResults && (searchQuery.trim() || displayedHistory.length > 0) && (
|
||||
<div className="absolute top-full left-0 right-0 mt-1.5 bg-popover text-popover-foreground rounded-lg shadow-lg border border-border max-h-80 overflow-y-auto z-50 animate-in fade-in slide-in-from-top-2 duration-150">
|
||||
<ul role="listbox" className="p-1.5">
|
||||
{searchQuery.trim() ? (
|
||||
searchResults.length > 0 ? (
|
||||
searchResults.map((feature, index) => (
|
||||
<li
|
||||
key={feature.key}
|
||||
role="option"
|
||||
aria-selected={selectedIndex === index}
|
||||
onClick={() => handleSelectFeature(feature)}
|
||||
className={cn(
|
||||
'flex items-center gap-3 px-3 py-2.5 rounded-md cursor-pointer text-sm transition-colors',
|
||||
selectedIndex === index
|
||||
? 'bg-accent text-accent-foreground'
|
||||
: 'hover:bg-muted/60',
|
||||
)}
|
||||
>
|
||||
<div
|
||||
className={cn(
|
||||
'flex h-8 w-8 shrink-0 items-center justify-center rounded-lg',
|
||||
'bg-muted/80 text-muted-foreground',
|
||||
)}
|
||||
>
|
||||
{feature.icon && <feature.icon className="h-4 w-4" />}
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="font-medium text-foreground truncate">
|
||||
{t(feature.labelKey)}
|
||||
</p>
|
||||
<p className="text-xs text-muted-foreground truncate mt-0.5">
|
||||
{t(feature.descriptionKey)}
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
))
|
||||
) : (
|
||||
<li className="px-4 py-6 text-center text-sm text-muted-foreground">
|
||||
{t('common:buttons.noResults')}
|
||||
</li>
|
||||
)
|
||||
) : (
|
||||
<>
|
||||
<div className="px-3 py-1.5 text-[11px] font-semibold tracking-wider text-muted-foreground/60 uppercase">
|
||||
{t('common:buttons.recentSearch')}
|
||||
</div>
|
||||
{displayedHistory.map((item, index) => (
|
||||
<li
|
||||
key={item.key}
|
||||
role="option"
|
||||
aria-selected={selectedIndex === index}
|
||||
onClick={() => item.feature && handleSelectFeature(item.feature)}
|
||||
className={cn(
|
||||
'flex items-center gap-3 px-3 py-2 rounded-md cursor-pointer text-sm transition-colors',
|
||||
selectedIndex === index
|
||||
? 'bg-accent text-accent-foreground'
|
||||
: 'hover:bg-muted/60',
|
||||
)}
|
||||
>
|
||||
<div
|
||||
className={cn(
|
||||
'flex h-8 w-8 shrink-0 items-center justify-center rounded-lg',
|
||||
'bg-muted/80 text-muted-foreground',
|
||||
)}
|
||||
>
|
||||
{item.feature?.icon && <item.feature.icon className="h-4 w-4" />}
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="font-medium text-foreground truncate">
|
||||
{item.feature && t(item.feature.labelKey)}
|
||||
</p>
|
||||
<p className="text-xs text-muted-foreground truncate mt-0.5">
|
||||
{item.feature && t(item.feature.descriptionKey)}
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 右侧：操作区 */}
|
||||
<div className="flex items-center gap-1 shrink-0">
|
||||
<IconButton onClick={cycleThemeMode} title={t(`common:buttons.themeMode.${mode}`)}>
|
||||
<ThemeIcon className="h-4 w-4" />
|
||||
</IconButton>
|
||||
<IconButton onClick={handleOpenInTab} title={t('common:buttons.openInTab')}>
|
||||
<ExternalLink className="h-4 w-4" />
|
||||
</IconButton>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
|
||||
// 5. 提炼出高度复用的原子按钮，大幅精简 Tailwind 冗余，符合 shadcn 的灵巧风格
|
||||
function IconButton({
|
||||
children,
|
||||
onClick,
|
||||
title,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
onClick: () => void;
|
||||
title: string;
|
||||
}) {
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClick}
|
||||
title={title}
|
||||
aria-label={title}
|
||||
className="flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
|
||||
>
|
||||
{children}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
@@ -1,5 +1,5 @@
|
||||
import { beforeEach, describe, expect, it, vi } from 'vitest';
|
||||
import { act, render, screen, waitFor } from '@testing-library/react';
|
||||
import { act, render, screen } from '@testing-library/react';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
|
||||
// unmock the globally-mocked component so we test the real implementation
|
||||
@@ -45,29 +45,6 @@ describe('CopyButton', () => {
|
||||
expect(mockedToast.success).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('复制成功后图标切换为 Check，1.5 秒后恢复', async () => {
|
||||
mockedCopy.mockResolvedValue(true);
|
||||
const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
|
||||
|
||||
render(<CopyButton text="test" />);
|
||||
|
||||
// 点击后复制成功，按钮获得 emerald 样式（说明切到了 Check 状态）
|
||||
await user.click(screen.getByRole('button'));
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByRole('button').className).toContain('text-emerald');
|
||||
});
|
||||
|
||||
// 1.5 秒后样式恢复
|
||||
act(() => {
|
||||
vi.advanceTimersByTime(1500);
|
||||
});
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByRole('button').className).not.toContain('text-emerald');
|
||||
});
|
||||
});
|
||||
|
||||
it('复制空文本时弹出 error toast', async () => {
|
||||
const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
|
||||
|
||||
@@ -91,15 +68,10 @@ describe('CopyButton', () => {
|
||||
expect(mockedToast.error).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
// ==================== 新增测试 ====================
|
||||
|
||||
it('初始渲染时显示 Copy 图标且无 emerald 样式', () => {
|
||||
it('初始渲染时带有默认 aria-label', () => {
|
||||
render(<CopyButton text="initial" />);
|
||||
|
||||
const button = screen.getByRole('button');
|
||||
expect(button.className).not.toContain('text-emerald');
|
||||
// 通过 aria-label 确认按钮存在，图标由 lucide 渲染为 svg
|
||||
expect(button).toHaveAttribute('aria-label');
|
||||
expect(screen.getByRole('button')).toHaveAttribute('aria-label', '复制');
|
||||
});
|
||||
|
||||
it('自定义 tooltip 会覆盖默认 title 和 aria-label', () => {
|
||||
@@ -142,15 +114,12 @@ describe('CopyButton', () => {
|
||||
|
||||
await user.click(screen.getByRole('button'));
|
||||
|
||||
// 在 1.5 秒超时到期前卸载组件
|
||||
act(() => {
|
||||
vi.advanceTimersByTime(500);
|
||||
});
|
||||
|
||||
// 卸载不应抛出 "Can't perform a React state update on an unmounted component" 警告
|
||||
expect(() => unmount()).not.toThrow();
|
||||
|
||||
// 前进剩余时间，确认没有异常
|
||||
act(() => {
|
||||
vi.advanceTimersByTime(2000);
|
||||
});
|
||||
@@ -164,23 +133,15 @@ describe('CopyButton', () => {
|
||||
|
||||
const button = screen.getByRole('button');
|
||||
|
||||
// 快速点击 3 次
|
||||
await user.click(button);
|
||||
await user.click(button);
|
||||
await user.click(button);
|
||||
|
||||
// copyTextToClipboard 应该被调用 3 次（每次点击都执行）
|
||||
expect(mockedCopy).toHaveBeenCalledTimes(3);
|
||||
|
||||
// 但 setTimeout 相关的 clearTimeout + setTimeout 组合应正常工作
|
||||
// advance 1.5 秒后，copied 状态应恢复为 false
|
||||
act(() => {
|
||||
vi.advanceTimersByTime(1500);
|
||||
});
|
||||
|
||||
await waitFor(() => {
|
||||
expect(button.className).not.toContain('text-emerald');
|
||||
});
|
||||
});
|
||||
|
||||
it('其他 button props 通过 ...props 透传', () => {
|
||||
|
||||
@@ -0,0 +1,48 @@
|
||||
import { describe, expect, it } from 'vitest';
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import EmptyPlaceholder from '@/components/EmptyPlaceholder';
|
||||
|
||||
describe('EmptyPlaceholder 组件', () => {
|
||||
it('应渲染字符串提示文本', () => {
|
||||
render(<EmptyPlaceholder>请输入内容</EmptyPlaceholder>);
|
||||
|
||||
expect(screen.getByText('请输入内容')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('应应用规范空状态容器样式', () => {
|
||||
const { container } = render(<EmptyPlaceholder>提示</EmptyPlaceholder>);
|
||||
|
||||
const placeholder = container.firstChild;
|
||||
expect(placeholder).toHaveClass(
|
||||
'rounded-xl',
|
||||
'bg-muted/30',
|
||||
'border-dashed',
|
||||
'border-border/80',
|
||||
'min-h-[120px]',
|
||||
);
|
||||
});
|
||||
|
||||
it('应支持 className 自定义容器样式', () => {
|
||||
const { container } = render(
|
||||
<EmptyPlaceholder className="flex-1 min-h-[320px]">提示</EmptyPlaceholder>,
|
||||
);
|
||||
|
||||
expect(container.firstChild).toHaveClass('flex-1', 'min-h-[320px]');
|
||||
});
|
||||
|
||||
it('应支持 messageClassName 自定义文本样式', () => {
|
||||
render(<EmptyPlaceholder messageClassName="text-sm max-w-none">提示</EmptyPlaceholder>);
|
||||
|
||||
expect(screen.getByText('提示')).toHaveClass('text-sm', 'max-w-none');
|
||||
});
|
||||
|
||||
it('应支持 ReactNode 类型的 children', () => {
|
||||
render(
|
||||
<EmptyPlaceholder>
|
||||
<span data-testid="custom-content">自定义内容</span>
|
||||
</EmptyPlaceholder>,
|
||||
);
|
||||
|
||||
expect(screen.getByTestId('custom-content')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
@@ -12,7 +12,7 @@ const mockRouterValue = {
|
||||
isLoaded: true,
|
||||
navigateTo: vi.fn(),
|
||||
syncNavigation: vi.fn(),
|
||||
goBack: vi.fn(),
|
||||
goHome: vi.fn(),
|
||||
setVisiblePages: vi.fn(),
|
||||
setPageOrder: vi.fn(),
|
||||
};
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { beforeEach, describe, expect, it, vi } from 'vitest';
|
||||
import { fireEvent, render, screen } from '@testing-library/react';
|
||||
import { StorageCleanerConfirm } from '@/pages/StorageCleaner/StorageCleanerConfirm';
|
||||
import { StorageCleanerConfirm } from '@/pages/StorageCleaner/components/StorageCleanerConfirm';
|
||||
import type { StorageCleanerOptions } from '@/types/storage';
|
||||
import React from 'react';
|
||||
|
||||
@@ -94,7 +94,7 @@ describe('StorageCleanerConfirm 组件', () => {
|
||||
renderComponent({ options: partialOptions });
|
||||
|
||||
expect(screen.getByText(/Local Storage/)).toBeInTheDocument();
|
||||
expect(screen.getByText(/站点存储/)).toBeInTheDocument();
|
||||
expect(screen.getByText(/IndexedDB/)).toBeInTheDocument();
|
||||
expect(screen.queryByText(/Session Storage/)).not.toBeInTheDocument();
|
||||
expect(screen.queryByText(/Cookies$/)).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
@@ -18,12 +18,12 @@ describe('TextInputArea 组件', () => {
|
||||
|
||||
it('默认显示清空按钮', () => {
|
||||
render(<TextInputArea value="有内容" onChange={() => {}} />);
|
||||
expect(screen.getByRole('button', { name: 'textInputArea.clear' })).toBeInTheDocument();
|
||||
expect(screen.getByRole('button', { name: '清空' })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('无内容时清空按钮应隐藏', () => {
|
||||
render(<TextInputArea value="" onChange={() => {}} />);
|
||||
expect(screen.queryByRole('button', { name: 'textInputArea.clear' })).not.toBeInTheDocument();
|
||||
expect(screen.queryByRole('button', { name: '清空' })).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('disabled 时清空按钮应隐藏', () => {
|
||||
@@ -57,7 +57,7 @@ describe('TextInputArea 组件', () => {
|
||||
const handleChange = vi.fn();
|
||||
render(<TextInputArea value="内容" onChange={handleChange} />);
|
||||
|
||||
fireEvent.click(screen.getByRole('button', { name: 'textInputArea.clear' }));
|
||||
fireEvent.click(screen.getByRole('button', { name: '清空' }));
|
||||
|
||||
expect(handleChange).toHaveBeenCalledWith('');
|
||||
});
|
||||
@@ -81,7 +81,7 @@ describe('TextInputArea 组件', () => {
|
||||
it('清空按钮应清空内容', () => {
|
||||
render(<TextInputArea defaultValue="内容" />);
|
||||
|
||||
fireEvent.click(screen.getByRole('button', { name: 'textInputArea.clear' }));
|
||||
fireEvent.click(screen.getByRole('button', { name: '清空' }));
|
||||
|
||||
expect(screen.getByRole('textbox')).toHaveValue('');
|
||||
});
|
||||
@@ -90,14 +90,12 @@ describe('TextInputArea 组件', () => {
|
||||
describe('allowCopy 复制功能', () => {
|
||||
it('allowCopy 且有内容时显示复制按钮', () => {
|
||||
render(<TextInputArea value="可复制的内容" onChange={() => {}} allowCopy />);
|
||||
expect(screen.getByRole('button', { name: 'textInputArea.copyContent' })).toBeInTheDocument();
|
||||
expect(screen.getByRole('button', { name: '复制内容' })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('allowCopy 但无内容时隐藏复制按钮', () => {
|
||||
render(<TextInputArea value="" onChange={() => {}} allowCopy />);
|
||||
expect(
|
||||
screen.queryByRole('button', { name: 'textInputArea.copyContent' }),
|
||||
).not.toBeInTheDocument();
|
||||
expect(screen.queryByRole('button', { name: '复制内容' })).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('allowCopy=false 时不显示复制按钮', () => {
|
||||
@@ -113,7 +111,7 @@ describe('TextInputArea 组件', () => {
|
||||
|
||||
render(<TextInputArea value="测试" onChange={() => {}} allowCopy />);
|
||||
|
||||
await user.click(screen.getByRole('button', { name: 'textInputArea.copyContent' }));
|
||||
await user.click(screen.getByRole('button', { name: '复制内容' }));
|
||||
|
||||
expect(writeTextSpy).toHaveBeenCalledWith('测试');
|
||||
});
|
||||
@@ -126,7 +124,7 @@ describe('TextInputArea 组件', () => {
|
||||
|
||||
render(<TextInputArea value="测试" onChange={() => {}} allowCopy />);
|
||||
|
||||
await user.click(screen.getByRole('button', { name: 'textInputArea.copyContent' }));
|
||||
await user.click(screen.getByRole('button', { name: '复制内容' }));
|
||||
|
||||
expect(writeTextSpy).toHaveBeenCalledWith('测试');
|
||||
});
|
||||
@@ -158,6 +156,7 @@ describe('TextInputArea 组件', () => {
|
||||
fireEvent.change(textarea, { target: { value: '123456' } });
|
||||
|
||||
expect(handleChange).not.toHaveBeenCalledWith('123456');
|
||||
expect(screen.getByText('内容不能超过 5 个字符')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('未超出 maxLength 的输入应正常触发', () => {
|
||||
@@ -370,7 +369,7 @@ describe('TextInputArea 组件', () => {
|
||||
const writeTextSpy = vi.spyOn(navigator.clipboard, 'writeText').mockResolvedValue(undefined);
|
||||
|
||||
render(<TextInputArea value="测试" onChange={() => {}} allowCopy />);
|
||||
await user.click(screen.getByRole('button', { name: 'textInputArea.copyContent' }));
|
||||
await user.click(screen.getByRole('button', { name: '复制内容' }));
|
||||
|
||||
expect(writeTextSpy).toHaveBeenCalledWith('测试');
|
||||
});
|
||||
@@ -381,7 +380,7 @@ describe('TextInputArea 组件', () => {
|
||||
const handleClear = vi.fn();
|
||||
render(<TextInputArea value="内容" onChange={() => {}} onClear={handleClear} />);
|
||||
|
||||
fireEvent.click(screen.getByRole('button', { name: 'textInputArea.clear' }));
|
||||
fireEvent.click(screen.getByRole('button', { name: '清空' }));
|
||||
|
||||
expect(handleClear).toHaveBeenCalledOnce();
|
||||
});
|
||||
@@ -389,7 +388,7 @@ describe('TextInputArea 组件', () => {
|
||||
it('不传 onClear 时清空按钮应正常工作', () => {
|
||||
render(<TextInputArea defaultValue="内容" />);
|
||||
|
||||
fireEvent.click(screen.getByRole('button', { name: 'textInputArea.clear' }));
|
||||
fireEvent.click(screen.getByRole('button', { name: '清空' }));
|
||||
|
||||
expect(screen.getByRole('textbox')).toHaveValue('');
|
||||
});
|
||||
|
||||
@@ -1,43 +0,0 @@
|
||||
# config/
|
||||
|
||||
应用级配置目录，存放功能特性的注册中心。
|
||||
|
||||
## 文件说明
|
||||
|
||||
| 文件 | 用途 |
|
||||
| -------------- | ---------------------------------------- |
|
||||
| `features.tsx` | 核心配置文件，定义所有工具功能的注册信息 |
|
||||
|
||||
## features.tsx
|
||||
|
||||
`FEATURES` 数组是路由和功能元数据的**单一事实来源**，每个功能定义包含：
|
||||
|
||||
- `key`：页面类型标识（`PageType`）
|
||||
- `labelKey` / `descriptionKey`：i18n 翻译键
|
||||
- `themeColorKey`：主题色（`primary/success/warning/error/secondary/info`）
|
||||
- `icon`：lucide-react 图标组件
|
||||
- `defaultVisible`：默认是否可见
|
||||
- `components`：三种渲染模式的懒加载组件（`popup`、`sidepanel`、`tab`）
|
||||
|
||||
## 已注册功能（10 个）
|
||||
|
||||
| key | 图标 | 说明 |
|
||||
| -------------------- | ----------------- | ----------------- |
|
||||
| `dashboard` | — | 仪表盘首页 |
|
||||
| `timestamp` | Clock | 时间戳转换工具 |
|
||||
| `storageCleaner` | Database | 存储清理工具 |
|
||||
| `qrCode` | QrCode | 二维码工具 |
|
||||
| `textStatistics` | FileText | 文本统计工具 |
|
||||
| `jwt` | Key | JWT 解析工具 |
|
||||
| `jsonDiff` | GitCompareArrows | JSON 差异比较工具 |
|
||||
| `base64Converter` | ArrowLeftRight | Base64 转换器 |
|
||||
| `rightClickRestorer` | MousePointerClick | 右键菜单恢复工具 |
|
||||
| `testDataGenerator` | FileSpreadsheet | 测试数据生成器 |
|
||||
|
||||
## 导出函数
|
||||
|
||||
- `getFeatureByKey(key)` — 根据 key 获取功能配置
|
||||
- `getDefaultVisibleFeatureKeys()` — 获取默认可见的功能 key 列表
|
||||
- `getAllFeatureKeys()` — 获取所有功能 key 列表
|
||||
- `getDefaultPageOrder()` — 获取默认页面排序（不含 dashboard）
|
||||
- `getEntryPointType()` — 判断当前入口类型（popup/sidepanel/tab）
|
||||
@@ -0,0 +1,85 @@
|
||||
import { beforeEach, describe, expect, it, vi } from 'vitest';
|
||||
|
||||
const pageLoadTracker = vi.hoisted(() => ({
|
||||
loaded: [] as string[],
|
||||
}));
|
||||
|
||||
vi.mock('@/pages/Dashboard', () => {
|
||||
pageLoadTracker.loaded.push('Dashboard');
|
||||
return { default: () => null };
|
||||
});
|
||||
vi.mock('@/pages/Timestamp', () => {
|
||||
pageLoadTracker.loaded.push('Timestamp');
|
||||
return { default: () => null };
|
||||
});
|
||||
vi.mock('@/pages/StorageCleaner', () => {
|
||||
pageLoadTracker.loaded.push('StorageCleaner');
|
||||
return { default: () => null };
|
||||
});
|
||||
vi.mock('@/pages/QrCode', () => {
|
||||
pageLoadTracker.loaded.push('QrCode');
|
||||
return { default: () => null };
|
||||
});
|
||||
vi.mock('@/pages/TextStatistics', () => {
|
||||
pageLoadTracker.loaded.push('TextStatistics');
|
||||
return { default: () => null };
|
||||
});
|
||||
vi.mock('@/pages/Jwt', () => {
|
||||
pageLoadTracker.loaded.push('Jwt');
|
||||
return { default: () => null };
|
||||
});
|
||||
vi.mock('@/pages/JsonTools', () => {
|
||||
pageLoadTracker.loaded.push('JsonTools');
|
||||
return { default: () => null };
|
||||
});
|
||||
vi.mock('@/pages/Base64Converter', () => {
|
||||
pageLoadTracker.loaded.push('Base64Converter');
|
||||
return { default: () => null };
|
||||
});
|
||||
vi.mock('@/pages/RightClickRestorer', () => {
|
||||
pageLoadTracker.loaded.push('RightClickRestorer');
|
||||
return { default: () => null };
|
||||
});
|
||||
vi.mock('@/pages/TestDataGenerator', () => {
|
||||
pageLoadTracker.loaded.push('TestDataGenerator');
|
||||
return { default: () => null };
|
||||
});
|
||||
|
||||
describe('features 懒加载', () => {
|
||||
beforeEach(() => {
|
||||
pageLoadTracker.loaded.length = 0;
|
||||
vi.resetModules();
|
||||
});
|
||||
|
||||
it('仅导入工具函数时不应加载任何页面模块', async () => {
|
||||
const { getAllFeatureKeys, getDefaultPageOrder } = await import('@/config/features');
|
||||
|
||||
getAllFeatureKeys();
|
||||
getDefaultPageOrder();
|
||||
|
||||
expect(pageLoadTracker.loaded).toEqual([]);
|
||||
});
|
||||
|
||||
it('访问 FEATURES 元数据时不应加载任何页面模块', async () => {
|
||||
const { FEATURES } = await import('@/config/features');
|
||||
|
||||
expect(FEATURES).toHaveLength(10);
|
||||
expect(pageLoadTracker.loaded).toEqual([]);
|
||||
});
|
||||
|
||||
it('渲染 lazy 组件时才应加载对应页面模块', async () => {
|
||||
const React = await import('react');
|
||||
const { render, waitFor } = await import('@testing-library/react');
|
||||
const { FEATURES } = await import('@/config/features');
|
||||
|
||||
const DashboardPage = FEATURES.find((f) => f.key === 'dashboard')!.components.popup;
|
||||
|
||||
render(
|
||||
React.createElement(React.Suspense, { fallback: null }, React.createElement(DashboardPage)),
|
||||
);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(pageLoadTracker.loaded).toEqual(['Dashboard']);
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -9,27 +9,26 @@ import {
|
||||
|
||||
describe('features', () => {
|
||||
describe('FEATURES', () => {
|
||||
it('should have 10 features defined', () => {
|
||||
it('应该有10个功能定义', () => {
|
||||
expect(FEATURES).toHaveLength(10);
|
||||
});
|
||||
|
||||
it('should have all required properties for each feature', () => {
|
||||
it('应该有每个功能的所有必需属性', () => {
|
||||
FEATURES.forEach((feature) => {
|
||||
expect(feature).toHaveProperty('key');
|
||||
expect(feature).toHaveProperty('labelKey');
|
||||
expect(feature).toHaveProperty('descriptionKey');
|
||||
expect(feature).toHaveProperty('label');
|
||||
expect(feature).toHaveProperty('description');
|
||||
expect(feature).toHaveProperty('defaultVisible');
|
||||
expect(feature).toHaveProperty('components');
|
||||
expect(typeof feature.key).toBe('string');
|
||||
expect(typeof feature.labelKey).toBe('string');
|
||||
expect(typeof feature.descriptionKey).toBe('string');
|
||||
expect(typeof feature.label).toBe('string');
|
||||
expect(typeof feature.description).toBe('string');
|
||||
expect(typeof feature.defaultVisible).toBe('boolean');
|
||||
expect(typeof feature.components).toBe('object');
|
||||
expect(feature.components).toHaveProperty('popup');
|
||||
expect(feature.components).toHaveProperty('sidepanel');
|
||||
expect(feature.components).toHaveProperty('tab');
|
||||
|
||||
// Optional UI properties for non-hidden features
|
||||
if (feature.key !== 'dashboard') {
|
||||
expect(feature).toHaveProperty('icon');
|
||||
expect(feature).toHaveProperty('themeColorKey');
|
||||
@@ -38,7 +37,7 @@ describe('features', () => {
|
||||
});
|
||||
});
|
||||
|
||||
it('should have unique keys for each feature', () => {
|
||||
it('应该有每个功能的唯一key', () => {
|
||||
const keys = FEATURES.map((f) => f.key);
|
||||
const uniqueKeys = new Set(keys);
|
||||
expect(uniqueKeys.size).toBe(keys.length);
|
||||
@@ -46,36 +45,36 @@ describe('features', () => {
|
||||
});
|
||||
|
||||
describe('getFeatureByKey', () => {
|
||||
it('should return dashboard feature', () => {
|
||||
it('应该返回dashboard功能', () => {
|
||||
const feature = getFeatureByKey('dashboard');
|
||||
expect(feature).toBeDefined();
|
||||
expect(feature?.key).toBe('dashboard');
|
||||
expect(feature?.labelKey).toBe('dashboard_title');
|
||||
expect(feature?.label).toBe('仪表盘');
|
||||
});
|
||||
|
||||
it('should return timestamp feature', () => {
|
||||
it('应该返回时间戳功能', () => {
|
||||
const feature = getFeatureByKey('timestamp');
|
||||
expect(feature).toBeDefined();
|
||||
expect(feature?.key).toBe('timestamp');
|
||||
expect(feature?.labelKey).toBe('timestamp_title');
|
||||
expect(feature?.label).toBe('时间戳');
|
||||
expect(feature?.themeColorKey).toBeDefined();
|
||||
});
|
||||
|
||||
it('should return storageCleaner feature', () => {
|
||||
it('应该返回存储清理功能', () => {
|
||||
const feature = getFeatureByKey('storageCleaner');
|
||||
expect(feature).toBeDefined();
|
||||
expect(feature?.key).toBe('storageCleaner');
|
||||
expect(feature?.labelKey).toBe('storageCleaner_title');
|
||||
expect(feature?.label).toBe('存储清理');
|
||||
});
|
||||
|
||||
it('should return undefined for invalid key', () => {
|
||||
it('应该返回undefined用于无效的key', () => {
|
||||
const feature = getFeatureByKey('invalid' as any);
|
||||
expect(feature).toBeUndefined();
|
||||
});
|
||||
});
|
||||
|
||||
describe('getDefaultVisibleFeatureKeys', () => {
|
||||
it('should return only visible features', () => {
|
||||
it('应该返回仅可见的功能', () => {
|
||||
const visibleKeys = getDefaultVisibleFeatureKeys();
|
||||
visibleKeys.forEach((key) => {
|
||||
const feature = getFeatureByKey(key);
|
||||
@@ -83,7 +82,7 @@ describe('features', () => {
|
||||
});
|
||||
});
|
||||
|
||||
it('should include dashboard, timestamp, storageCleaner, qrCode', () => {
|
||||
it('应该包含仪表盘、时间戳、存储清理、二维码', () => {
|
||||
const visibleKeys = getDefaultVisibleFeatureKeys();
|
||||
expect(visibleKeys).toContain('dashboard');
|
||||
expect(visibleKeys).toContain('timestamp');
|
||||
@@ -93,7 +92,7 @@ describe('features', () => {
|
||||
});
|
||||
|
||||
describe('getAllFeatureKeys', () => {
|
||||
it('should return all feature keys', () => {
|
||||
it('应该返回所有功能key', () => {
|
||||
const allKeys = getAllFeatureKeys();
|
||||
expect(allKeys).toHaveLength(10);
|
||||
expect(allKeys).toContain('dashboard');
|
||||
@@ -102,7 +101,7 @@ describe('features', () => {
|
||||
expect(allKeys).toContain('qrCode');
|
||||
expect(allKeys).toContain('textStatistics');
|
||||
expect(allKeys).toContain('jwt');
|
||||
expect(allKeys).toContain('jsonDiff');
|
||||
expect(allKeys).toContain('jsonTools');
|
||||
expect(allKeys).toContain('base64Converter');
|
||||
expect(allKeys).toContain('rightClickRestorer');
|
||||
expect(allKeys).toContain('testDataGenerator');
|
||||
@@ -110,19 +109,19 @@ describe('features', () => {
|
||||
});
|
||||
|
||||
describe('getDefaultPageOrder', () => {
|
||||
it('should exclude dashboard from page order', () => {
|
||||
it('应该排除仪表盘从页面顺序', () => {
|
||||
const pageOrder = getDefaultPageOrder();
|
||||
expect(pageOrder).not.toContain('dashboard');
|
||||
});
|
||||
|
||||
it('should include timestamp, storageCleaner, qrCode in page order', () => {
|
||||
it('应该包含时间戳、存储清理、二维码在页面顺序', () => {
|
||||
const pageOrder = getDefaultPageOrder();
|
||||
expect(pageOrder).toContain('timestamp');
|
||||
expect(pageOrder).toContain('storageCleaner');
|
||||
expect(pageOrder).toContain('qrCode');
|
||||
});
|
||||
|
||||
it('should have 9 items in page order', () => {
|
||||
it('应该有9个项目在页面顺序', () => {
|
||||
const pageOrder = getDefaultPageOrder();
|
||||
expect(pageOrder).toHaveLength(9);
|
||||
});
|
||||
|
||||
+23
-23
@@ -29,8 +29,8 @@ const TestDataGeneratorPage = lazy(() => import('@/pages/TestDataGenerator'));
|
||||
|
||||
export interface FeatureConfig {
|
||||
key: PageType;
|
||||
labelKey: string;
|
||||
descriptionKey: string;
|
||||
label: string;
|
||||
description: string;
|
||||
themeColorKey?: PaletteColorKey;
|
||||
icon?: ComponentType<LucideProps>;
|
||||
defaultVisible: boolean;
|
||||
@@ -44,8 +44,8 @@ export interface FeatureConfig {
|
||||
export const FEATURES: FeatureConfig[] = [
|
||||
{
|
||||
key: 'dashboard',
|
||||
labelKey: 'dashboard_title',
|
||||
descriptionKey: '',
|
||||
label: '仪表盘',
|
||||
description: '',
|
||||
defaultVisible: true,
|
||||
components: {
|
||||
popup: DashboardPage,
|
||||
@@ -55,8 +55,8 @@ export const FEATURES: FeatureConfig[] = [
|
||||
},
|
||||
{
|
||||
key: 'timestamp',
|
||||
labelKey: 'timestamp_title',
|
||||
descriptionKey: 'timestamp_description',
|
||||
label: '时间戳',
|
||||
description: 'Unix 毫秒数转换与格式化',
|
||||
themeColorKey: 'primary',
|
||||
icon: Clock,
|
||||
defaultVisible: true,
|
||||
@@ -68,8 +68,8 @@ export const FEATURES: FeatureConfig[] = [
|
||||
},
|
||||
{
|
||||
key: 'storageCleaner',
|
||||
labelKey: 'storageCleaner_title',
|
||||
descriptionKey: 'storageCleaner_description',
|
||||
label: '存储清理',
|
||||
description: '清理缓存、Cookies 及本地存储',
|
||||
themeColorKey: 'warning',
|
||||
icon: Database,
|
||||
defaultVisible: true,
|
||||
@@ -81,8 +81,8 @@ export const FEATURES: FeatureConfig[] = [
|
||||
},
|
||||
{
|
||||
key: 'qrCode',
|
||||
labelKey: 'qrCode_title',
|
||||
descriptionKey: 'qrCode_description',
|
||||
label: '二维码工具',
|
||||
description: '生成当前选中的 URL 的二维码',
|
||||
themeColorKey: 'success',
|
||||
icon: QrCode,
|
||||
defaultVisible: true,
|
||||
@@ -94,8 +94,8 @@ export const FEATURES: FeatureConfig[] = [
|
||||
},
|
||||
{
|
||||
key: 'textStatistics',
|
||||
labelKey: 'textStatistics_title',
|
||||
descriptionKey: 'textStatistics_description',
|
||||
label: '文本统计',
|
||||
description: '实时分析文本字符、单词及字节',
|
||||
themeColorKey: 'secondary',
|
||||
icon: FileText,
|
||||
defaultVisible: true,
|
||||
@@ -107,8 +107,8 @@ export const FEATURES: FeatureConfig[] = [
|
||||
},
|
||||
{
|
||||
key: 'jwt',
|
||||
labelKey: 'jwt_title',
|
||||
descriptionKey: 'jwt_description',
|
||||
label: 'JWT 解析',
|
||||
description: 'JSON Web Token 解码与查看',
|
||||
themeColorKey: 'info',
|
||||
icon: Key,
|
||||
defaultVisible: true,
|
||||
@@ -119,9 +119,9 @@ export const FEATURES: FeatureConfig[] = [
|
||||
},
|
||||
},
|
||||
{
|
||||
key: 'jsonDiff',
|
||||
labelKey: 'jsonDiff_title',
|
||||
descriptionKey: 'jsonDiff_description',
|
||||
key: 'jsonTools',
|
||||
label: 'JSON 工具',
|
||||
description: '差异比较、格式化、YAML/TOML 转换及压缩',
|
||||
themeColorKey: 'primary',
|
||||
icon: GitCompareArrows,
|
||||
defaultVisible: true,
|
||||
@@ -133,8 +133,8 @@ export const FEATURES: FeatureConfig[] = [
|
||||
},
|
||||
{
|
||||
key: 'base64Converter',
|
||||
labelKey: 'base64Converter_title',
|
||||
descriptionKey: 'base64Converter_description',
|
||||
label: 'Base64 转换器',
|
||||
description: '文本、文件与图像的 Base64 编码转换',
|
||||
themeColorKey: 'info',
|
||||
icon: ArrowLeftRight,
|
||||
defaultVisible: true,
|
||||
@@ -146,8 +146,8 @@ export const FEATURES: FeatureConfig[] = [
|
||||
},
|
||||
{
|
||||
key: 'rightClickRestorer',
|
||||
labelKey: 'rightClickRestorer_title',
|
||||
descriptionKey: 'rightClickRestorer_description',
|
||||
label: '右键恢复',
|
||||
description: '检测并恢复被网站禁用的浏览器右键菜单',
|
||||
themeColorKey: 'success',
|
||||
icon: MousePointerClick,
|
||||
defaultVisible: true,
|
||||
@@ -159,8 +159,8 @@ export const FEATURES: FeatureConfig[] = [
|
||||
},
|
||||
{
|
||||
key: 'testDataGenerator',
|
||||
labelKey: 'testDataGenerator_title',
|
||||
descriptionKey: 'testDataGenerator_description',
|
||||
label: '测试数据生成器',
|
||||
description: '自定义规则批量生成测试数据',
|
||||
themeColorKey: 'warning',
|
||||
icon: FileSpreadsheet,
|
||||
defaultVisible: true,
|
||||
|
||||
@@ -1,51 +0,0 @@
|
||||
# entrypoints/
|
||||
|
||||
WXT 框架要求的扩展生命周期入口点，对应 Chrome Extension 的各个上下文。
|
||||
|
||||
## 入口文件
|
||||
|
||||
| 文件 | 用途 |
|
||||
| ------------------------------- | --------------------------------------------------------------------------------------------- |
|
||||
| `background.ts` | Service Worker 入口：注册右键菜单、监听菜单点击、处理消息通信、管理侧边栏状态、注入主环境脚本 |
|
||||
| `content.ts` | Content Script 入口：注入所有页面（`<all_urls>`），在 `document_end` 时初始化消息处理器 |
|
||||
| `rightClickRestorer.content.ts` | 专用 Content Script：处理右键菜单恢复功能，注入浮动状态徽章 |
|
||||
|
||||
## 子目录
|
||||
|
||||
### popup/
|
||||
|
||||
Popup 弹窗页面（点击扩展图标弹出）。
|
||||
|
||||
| 文件 | 用途 |
|
||||
| ------------ | ------------------------------------------------------------------------------ |
|
||||
| `index.html` | HTML 入口 |
|
||||
| `main.tsx` | React 挂载点 |
|
||||
| `App.tsx` | 根组件，组装 `RouterProvider` + `TopBar` + `ErrorBoundary` + `RouterContainer` |
|
||||
|
||||
### sidepanel/
|
||||
|
||||
侧边栏页面，结构与 popup 类似，额外通知 background 侧边栏开启/关闭状态。
|
||||
|
||||
### options/
|
||||
|
||||
设置页面，支持：
|
||||
|
||||
- 拖拽排序功能顺序（`@dnd-kit`）
|
||||
- 功能可见性管理（显示/隐藏）
|
||||
- Popup/Sidepanel/Tab 三种模式独立配置
|
||||
|
||||
### content/
|
||||
|
||||
Content Script 内部分模块：
|
||||
|
||||
| 文件 | 用途 |
|
||||
| ----------------------- | ------------------------------------------------------------------- |
|
||||
| `messageHandler.ts` | 消息处理器初始化入口 |
|
||||
| `contextMenuHandler.ts` | 右键菜单点击事件处理，执行时间戳转换/文本统计并通过 UI Popover 展示 |
|
||||
| `uiPopover.ts` | 在页面中注入浮层 Popover UI，展示右键菜单操作结果 |
|
||||
|
||||
## 架构说明
|
||||
|
||||
- `background.ts` 是扩展的核心协调者，处理跨上下文通信
|
||||
- `content.ts` 注入到所有页面，负责接收和处理来自 background 的消息
|
||||
- `popup/`、`sidepanel/`、`options/` 共享同一套页面组件（来自 `pages/`），通过 `RouterProvider` 的不同配置实现独立路由
|
||||
@@ -36,7 +36,7 @@ describe('background 菜单注册与分流', () => {
|
||||
expect(chrome.contextMenus.create).toHaveBeenCalledWith(
|
||||
expect.objectContaining({
|
||||
id: 'jwt',
|
||||
title: '🔑 解析 JWT',
|
||||
title: '解析 JWT',
|
||||
parentId: 'testing-tools-parent',
|
||||
}),
|
||||
);
|
||||
@@ -48,7 +48,7 @@ describe('background 菜单注册与分流', () => {
|
||||
expect(chrome.contextMenus.create).toHaveBeenCalledWith(
|
||||
expect.objectContaining({
|
||||
id: 'qrCode-page',
|
||||
title: '🔗 网页链接转二维码',
|
||||
title: '网页链接转二维码',
|
||||
contexts: ['page'],
|
||||
}),
|
||||
);
|
||||
|
||||
@@ -41,14 +41,11 @@ export default defineBackground(() => {
|
||||
try {
|
||||
await browser.action.openPopup();
|
||||
} catch (err) {
|
||||
console.warn(
|
||||
'[Context Menu] 自动打开 popup 失败，请手动点击扩展图标，暂存数据已安全保留:',
|
||||
err,
|
||||
);
|
||||
console.warn('[Context Menu] 自动打开 popup 失败，请手动点击扩展图标，数据已暂存:', err);
|
||||
}
|
||||
});
|
||||
|
||||
// 监听扩展图标点击事件，安全激活侧边栏
|
||||
// 扩展图标点击时打开侧边栏
|
||||
browser.action.onClicked.addListener(async (tab) => {
|
||||
if (tab.id) {
|
||||
try {
|
||||
@@ -65,8 +62,8 @@ export default defineBackground(() => {
|
||||
const tabId = sender?.tab?.id;
|
||||
|
||||
if (!tabId) {
|
||||
console.warn('[RightClickRestorer] Injection request missing tabId');
|
||||
return { success: false, message: 'Missing tabId' };
|
||||
console.warn('[RightClickRestorer] 注入请求缺少 tabId');
|
||||
return { success: false, message: '缺少 tabId' };
|
||||
}
|
||||
|
||||
try {
|
||||
@@ -79,7 +76,7 @@ export default defineBackground(() => {
|
||||
return { success: true };
|
||||
} catch (err) {
|
||||
const errorMsg = err instanceof Error ? err.message : String(err);
|
||||
console.error('[RightClickRestorer] executeScript failed:', errorMsg);
|
||||
console.error('[RightClickRestorer] 执行脚本失败:', errorMsg);
|
||||
return { success: false, message: errorMsg };
|
||||
}
|
||||
});
|
||||
|
||||
@@ -1,22 +1,20 @@
|
||||
import type { ContextMenuClickedPayload } from '@/utils/messages';
|
||||
import { MessageAction, onMessage } from '@/utils/messages';
|
||||
import { getTextStats } from '@/utils/textStatistics';
|
||||
import { getMessage } from '@/utils/chromeI18n';
|
||||
import { hidePopover, showTextStatsResult, showTimestampResult } from './uiPopover';
|
||||
|
||||
function convertTimestamp(input: string): string {
|
||||
const invalidText = getMessage('invalidTimestamp') || 'Invalid Timestamp';
|
||||
const num = Number(input.trim());
|
||||
|
||||
if (isNaN(num)) {
|
||||
return invalidText;
|
||||
return '无效时间戳';
|
||||
}
|
||||
|
||||
// 1e12 判定毫秒级/秒级时间戳兼容
|
||||
// 1e12 区分毫秒/秒级时间戳
|
||||
const d = num > 1e12 ? new Date(num) : new Date(num * 1000);
|
||||
|
||||
if (isNaN(d.getTime())) {
|
||||
return invalidText;
|
||||
return '无效时间戳';
|
||||
}
|
||||
|
||||
const year = d.getFullYear();
|
||||
|
||||
@@ -137,12 +137,11 @@ function escapeHtml(text: string): string {
|
||||
}
|
||||
|
||||
function positionPopover(popover: HTMLElement, x: number, y: number): void {
|
||||
// 此时借助 visibility: hidden，元素在隐藏状态下拥有真实的布局高宽
|
||||
const rect = popover.getBoundingClientRect();
|
||||
const viewportWidth = window.innerWidth;
|
||||
const viewportHeight = window.innerHeight;
|
||||
|
||||
let left = x + 8; // 微微追加水平偏置，防范直接遮挡用户的鼠标落点
|
||||
let left = x + 8;
|
||||
let top = y + 8;
|
||||
|
||||
if (left + rect.width > viewportWidth - 16) {
|
||||
@@ -178,7 +177,7 @@ function showPopover(
|
||||
|
||||
const titleSpan = document.createElement('span');
|
||||
titleSpan.className = 'popover-title';
|
||||
titleSpan.textContent = title; // ✅ 强安全性护航
|
||||
titleSpan.textContent = title;
|
||||
|
||||
const closeBtn = document.createElement('button');
|
||||
closeBtn.className = 'popover-close';
|
||||
@@ -194,10 +193,9 @@ function showPopover(
|
||||
|
||||
const contentContainer = document.createElement('div');
|
||||
contentContainer.className = 'popover-content';
|
||||
contentContainer.innerHTML = contentHtml; // 内部拼装的方法已提前完成全消毒转义
|
||||
contentContainer.innerHTML = contentHtml;
|
||||
popover.appendChild(contentContainer);
|
||||
|
||||
// 提前移除激活类名，使 visibility: hidden 起效以供测量
|
||||
popover.classList.remove('visible');
|
||||
|
||||
requestAnimationFrame(() => {
|
||||
@@ -226,7 +224,6 @@ export function hidePopover(): void {
|
||||
}
|
||||
|
||||
export function showTimestampResult(x: number, y: number, timestamp: string, result: string): void {
|
||||
// 对外部传来的参数先全数塞入 escapeHtml 大闸进行纯氧化清洗
|
||||
const cleanTimestamp = escapeHtml(timestamp);
|
||||
const cleanResult = escapeHtml(result);
|
||||
|
||||
@@ -236,7 +233,7 @@ export function showTimestampResult(x: number, y: number, timestamp: string, res
|
||||
<div class="popover-label">转换结果</div>
|
||||
<div class="popover-value">${cleanResult}</div>
|
||||
`;
|
||||
showPopover(x, y, content, '⏰ 时间戳转换');
|
||||
showPopover(x, y, content, '转换结果');
|
||||
}
|
||||
|
||||
export function showTextStatsResult(
|
||||
@@ -246,7 +243,6 @@ export function showTextStatsResult(
|
||||
stats: { characters: number; words: number; lines: number; bytes: number },
|
||||
): void {
|
||||
const truncatedText = text.length > 50 ? text.substring(0, 50) + '...' : text;
|
||||
// 对选中的脏文本先进行严格转义
|
||||
const cleanText = escapeHtml(truncatedText);
|
||||
|
||||
const content = `
|
||||
@@ -271,5 +267,5 @@ export function showTextStatsResult(
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
showPopover(x, y, content, '📊 文本统计');
|
||||
showPopover(x, y, content, '统计结果');
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import RouterProvider from '@/providers/RouterProvider';
|
||||
import TopBar from '@/components/TopBar';
|
||||
import TopBar from '@/layout/TopBar';
|
||||
import RouterContainer from '@/components/RouterContainer';
|
||||
import ErrorBoundary from '@/components/ErrorBoundary';
|
||||
import { getEntryPointType } from '@/config/features';
|
||||
|
||||
@@ -5,6 +5,19 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Testing Tools - 标签页</title>
|
||||
<meta name="manifest.type" content="browser_action" />
|
||||
<script>
|
||||
(function () {
|
||||
try {
|
||||
var raw = localStorage.getItem('snapshot/app/themeMode');
|
||||
var mode = raw ? JSON.parse(raw) : 'system';
|
||||
if (mode !== 'light' && mode !== 'dark' && mode !== 'system') mode = 'system';
|
||||
var isDark =
|
||||
mode === 'dark' ||
|
||||
(mode === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches);
|
||||
if (isDark) document.documentElement.classList.add('dark');
|
||||
} catch (_error) {}
|
||||
})();
|
||||
</script>
|
||||
<style>
|
||||
/* Force initial popup size before React hydration */
|
||||
html, body {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { useEffect } from 'react';
|
||||
import RouterProvider from '@/providers/RouterProvider';
|
||||
import TopBar from '@/components/TopBar';
|
||||
import TopBar from '@/layout/TopBar';
|
||||
import RouterContainer from '@/components/RouterContainer';
|
||||
import ErrorBoundary from '@/components/ErrorBoundary';
|
||||
import { MessageAction, sendMessage } from '@/utils/messages';
|
||||
|
||||
@@ -4,6 +4,19 @@
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Testing Tools - Side Panel</title>
|
||||
<script>
|
||||
(function () {
|
||||
try {
|
||||
var raw = localStorage.getItem('snapshot/app/themeMode');
|
||||
var mode = raw ? JSON.parse(raw) : 'system';
|
||||
if (mode !== 'light' && mode !== 'dark' && mode !== 'system') mode = 'system';
|
||||
var isDark =
|
||||
mode === 'dark' ||
|
||||
(mode === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches);
|
||||
if (isDark) document.documentElement.classList.add('dark');
|
||||
} catch (_error) {}
|
||||
})();
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
|
||||
@@ -0,0 +1,26 @@
|
||||
# layout/
|
||||
|
||||
应用壳层布局组件目录，存放与扩展入口（popup / sidepanel / tab）绑定的布局 UI，与 `components/` 中的通用可复用组件区分。
|
||||
|
||||
## 组件列表
|
||||
|
||||
| 目录 | 用途 |
|
||||
| --------- | -------------------------------------------------------------- |
|
||||
| `TopBar/` | 顶部导航栏：搜索（含历史记录）、主题切换、返回导航、标签页打开 |
|
||||
|
||||
## 目录结构
|
||||
|
||||
遵循与 `pages/` 相同的 UI + Hook 分离模式：
|
||||
|
||||
```
|
||||
layout/TopBar/
|
||||
├── index.tsx # 布局入口
|
||||
├── useTopBar.ts # 业务逻辑 Hook
|
||||
├── constants.ts # 常量
|
||||
├── SearchInput.tsx # 搜索输入框
|
||||
├── SearchDropdown.tsx # 搜索结果/历史下拉面板
|
||||
├── SearchResultItem.tsx # 单条搜索结果项
|
||||
├── TopBarActions.tsx # 右侧操作按钮组
|
||||
└── __tests__/
|
||||
└── index.test.tsx
|
||||
```
|
||||
@@ -0,0 +1,45 @@
|
||||
import { type FeatureConfig } from '@/config/features';
|
||||
import SearchResultItem from './SearchResultItem';
|
||||
|
||||
interface SearchDropdownProps {
|
||||
searchQuery: string;
|
||||
searchResults: FeatureConfig[];
|
||||
recentFeatures: FeatureConfig[];
|
||||
selectedIndex: number;
|
||||
onSelect: (feature: FeatureConfig) => void;
|
||||
}
|
||||
|
||||
export default function SearchDropdown({
|
||||
searchQuery,
|
||||
searchResults,
|
||||
recentFeatures,
|
||||
selectedIndex,
|
||||
onSelect,
|
||||
}: SearchDropdownProps) {
|
||||
const isSearching = searchQuery.trim().length > 0;
|
||||
const items = isSearching ? searchResults : recentFeatures;
|
||||
|
||||
return (
|
||||
<div className="absolute left-0 right-0 top-full z-50 mt-1.5 max-h-80 overflow-y-auto rounded-lg border border-border bg-popover text-popover-foreground shadow-lg animate-in fade-in slide-in-from-top-2 duration-150">
|
||||
<ul role="listbox" className="p-1.5">
|
||||
{!isSearching && items.length > 0 && (
|
||||
<div className="px-3 py-1.5 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground/60">
|
||||
最近搜索
|
||||
</div>
|
||||
)}
|
||||
{isSearching && items.length === 0 ? (
|
||||
<li className="px-4 py-6 text-center text-sm text-muted-foreground">未找到相关工具</li>
|
||||
) : (
|
||||
items.map((feature, index) => (
|
||||
<SearchResultItem
|
||||
key={feature.key}
|
||||
feature={feature}
|
||||
selected={selectedIndex === index}
|
||||
onSelect={onSelect}
|
||||
/>
|
||||
))
|
||||
)}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,57 @@
|
||||
import { type RefObject } from 'react';
|
||||
import { Search, X } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { getSearchShortcutLabel } from './constants';
|
||||
|
||||
interface SearchInputProps {
|
||||
inputRef: RefObject<HTMLInputElement | null>;
|
||||
searchQuery: string;
|
||||
onSearchQueryChange: (value: string) => void;
|
||||
onFocus: () => void;
|
||||
onKeyDown: (e: React.KeyboardEvent) => void;
|
||||
onClear: () => void;
|
||||
}
|
||||
|
||||
export default function SearchInput({
|
||||
inputRef,
|
||||
searchQuery,
|
||||
onSearchQueryChange,
|
||||
onFocus,
|
||||
onKeyDown,
|
||||
onClear,
|
||||
}: SearchInputProps) {
|
||||
return (
|
||||
<div className="group relative">
|
||||
<Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground/60 transition-colors group-focus-within:text-muted-foreground" />
|
||||
<Input
|
||||
ref={inputRef}
|
||||
type="text"
|
||||
placeholder="搜索工具..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => onSearchQueryChange(e.target.value)}
|
||||
onFocus={onFocus}
|
||||
onKeyDown={onKeyDown}
|
||||
aria-label="搜索工具..."
|
||||
className="h-9 rounded-lg border-border/60 bg-muted/40 pl-9 pr-16 shadow-none focus-visible:ring-1 focus-visible:ring-offset-0 placeholder:text-muted-foreground/50"
|
||||
/>
|
||||
{!searchQuery && (
|
||||
<kbd className="pointer-events-none absolute right-3 top-1/2 hidden h-5 -translate-y-1/2 items-center gap-0.5 rounded border border-border/60 bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground/60 sm:inline-flex">
|
||||
{getSearchShortcutLabel()}
|
||||
</kbd>
|
||||
)}
|
||||
{searchQuery && (
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={onClear}
|
||||
aria-label="清除搜索"
|
||||
className="absolute right-1 top-1/2 h-7 w-7 -translate-y-1/2 text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
<X className="h-3 w-3" />
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
import { type FeatureConfig } from '@/config/features';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
interface SearchResultItemProps {
|
||||
feature: FeatureConfig;
|
||||
selected: boolean;
|
||||
onSelect: (feature: FeatureConfig) => void;
|
||||
}
|
||||
|
||||
export default function SearchResultItem({ feature, selected, onSelect }: SearchResultItemProps) {
|
||||
return (
|
||||
<li
|
||||
role="option"
|
||||
aria-selected={selected}
|
||||
onClick={() => onSelect(feature)}
|
||||
className={cn(
|
||||
'flex cursor-pointer items-center gap-3 rounded-md px-3 py-2.5 text-sm transition-colors',
|
||||
selected ? 'bg-accent text-accent-foreground' : 'hover:bg-muted/60',
|
||||
)}
|
||||
>
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-muted/80 text-muted-foreground">
|
||||
{feature.icon && <feature.icon className="h-4 w-4" />}
|
||||
</div>
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="truncate font-medium text-foreground">{feature.label}</p>
|
||||
<p className="mt-0.5 truncate text-xs text-muted-foreground">{feature.description}</p>
|
||||
</div>
|
||||
</li>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
import { type LucideIcon } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
|
||||
interface TopBarAction {
|
||||
id: string;
|
||||
icon: LucideIcon;
|
||||
title: string;
|
||||
onClick: () => void;
|
||||
}
|
||||
|
||||
interface TopBarActionsProps {
|
||||
actions: TopBarAction[];
|
||||
}
|
||||
|
||||
export default function TopBarActions({ actions }: TopBarActionsProps) {
|
||||
return (
|
||||
<div className="flex shrink-0 items-center gap-1">
|
||||
{actions.map(({ id, icon: Icon, title, onClick }) => (
|
||||
<Button
|
||||
key={id}
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={onClick}
|
||||
title={title}
|
||||
aria-label={title}
|
||||
className="h-8 w-8 text-muted-foreground"
|
||||
>
|
||||
<Icon className="h-4 w-4" />
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
import { afterEach, describe, expect, it, vi } from 'vitest';
|
||||
import { getSearchShortcutLabel } from '@/layout/TopBar/constants';
|
||||
|
||||
describe('getSearchShortcutLabel', () => {
|
||||
const originalUserAgent = navigator.userAgent;
|
||||
|
||||
afterEach(() => {
|
||||
vi.stubGlobal('navigator', { ...navigator, userAgent: originalUserAgent });
|
||||
});
|
||||
|
||||
it('macOS 应显示 ⌘K', () => {
|
||||
vi.stubGlobal('navigator', {
|
||||
...navigator,
|
||||
userAgent:
|
||||
'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36',
|
||||
});
|
||||
expect(getSearchShortcutLabel()).toBe('⌘K');
|
||||
});
|
||||
|
||||
it('Windows 应显示 Ctrl+K', () => {
|
||||
vi.stubGlobal('navigator', {
|
||||
...navigator,
|
||||
userAgent:
|
||||
'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36',
|
||||
});
|
||||
expect(getSearchShortcutLabel()).toBe('Ctrl+K');
|
||||
});
|
||||
|
||||
it('Linux 应显示 Ctrl+K', () => {
|
||||
vi.stubGlobal('navigator', {
|
||||
...navigator,
|
||||
userAgent:
|
||||
'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36',
|
||||
});
|
||||
expect(getSearchShortcutLabel()).toBe('Ctrl+K');
|
||||
});
|
||||
});
|
||||
+7
-7
@@ -2,7 +2,7 @@ import { beforeEach, describe, expect, it, vi } from 'vitest';
|
||||
import { fireEvent, render, screen } from '@testing-library/react';
|
||||
import type { PageType } from '@/types/storage';
|
||||
import React from 'react';
|
||||
import TopBar from '@/components/TopBar';
|
||||
import TopBar from '@/layout/TopBar';
|
||||
import { RouterProvider } from '@/providers/RouterProvider';
|
||||
import { ThemeModeProvider } from '@/providers/ThemeModeProvider';
|
||||
|
||||
@@ -27,7 +27,7 @@ const mockRouterValue = {
|
||||
isLoaded: true,
|
||||
navigateTo: vi.fn(),
|
||||
syncNavigation: vi.fn(),
|
||||
goBack: vi.fn(),
|
||||
goHome: vi.fn(),
|
||||
setVisiblePages: vi.fn(),
|
||||
setPageOrder: vi.fn(),
|
||||
};
|
||||
@@ -54,23 +54,23 @@ describe('TopBar 组件', () => {
|
||||
it('不在 dashboard 时应渲染返回按钮', () => {
|
||||
mockRouterValue.currentPage = 'timestamp';
|
||||
renderWithProvider(<TopBar />);
|
||||
expect(screen.getByLabelText('返回')).toBeInTheDocument();
|
||||
expect(screen.getByLabelText('返回首页')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('在 dashboard 上不应渲染返回按钮', () => {
|
||||
mockRouterValue.currentPage = 'dashboard';
|
||||
renderWithProvider(<TopBar />);
|
||||
expect(screen.queryByLabelText('返回')).not.toBeInTheDocument();
|
||||
expect(screen.queryByLabelText('返回首页')).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('交互测试', () => {
|
||||
it('点击返回按钮时应调用 goBack', () => {
|
||||
it('点击返回按钮时应调用 goHome', () => {
|
||||
mockRouterValue.currentPage = 'timestamp';
|
||||
renderWithProvider(<TopBar />);
|
||||
|
||||
fireEvent.click(screen.getByLabelText('返回'));
|
||||
expect(mockRouterValue.goBack).toHaveBeenCalledTimes(1);
|
||||
fireEvent.click(screen.getByLabelText('返回首页'));
|
||||
expect(mockRouterValue.goHome).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,9 @@
|
||||
export const SEARCH_HISTORY_LIMIT = 10;
|
||||
export const SEARCH_HISTORY_DISPLAY = 5;
|
||||
|
||||
export const isSearchHistory = (val: unknown): val is string[] =>
|
||||
Array.isArray(val) && val.every((item) => typeof item === 'string');
|
||||
|
||||
export function getSearchShortcutLabel(): string {
|
||||
return /Mac|iPhone|iPad|iPod/i.test(navigator.userAgent) ? '⌘K' : 'Ctrl+K';
|
||||
}
|
||||
@@ -0,0 +1,82 @@
|
||||
import { ArrowLeft, ExternalLink } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import SearchDropdown from './SearchDropdown';
|
||||
import SearchInput from './SearchInput';
|
||||
import TopBarActions from './TopBarActions';
|
||||
import { useTopBar } from './useTopBar';
|
||||
|
||||
export default function TopBar() {
|
||||
const {
|
||||
searchQuery,
|
||||
searchResults,
|
||||
recentFeatures,
|
||||
selectedIndex,
|
||||
isDashboard,
|
||||
ThemeIcon,
|
||||
themeTitle,
|
||||
showDropdown,
|
||||
containerRef,
|
||||
inputRef,
|
||||
handleSearchQueryChange,
|
||||
handleSearchFocus,
|
||||
handleSelectFeature,
|
||||
handleKeyDown,
|
||||
cycleThemeMode,
|
||||
handleOpenInTab,
|
||||
goHome,
|
||||
clearSearch,
|
||||
} = useTopBar();
|
||||
|
||||
const actions = [
|
||||
{ id: 'theme', icon: ThemeIcon, title: themeTitle, onClick: cycleThemeMode },
|
||||
{
|
||||
id: 'open-in-tab',
|
||||
icon: ExternalLink,
|
||||
title: '在标签页打开',
|
||||
onClick: () => {
|
||||
void handleOpenInTab();
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<header className="relative z-50 flex h-14 items-center justify-between border-b border-border bg-background px-4">
|
||||
<div className="flex w-10 items-center justify-start">
|
||||
{!isDashboard && (
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="icon"
|
||||
onClick={goHome}
|
||||
aria-label="返回首页"
|
||||
className="h-8 w-8 shadow-sm text-muted-foreground"
|
||||
>
|
||||
<ArrowLeft className="h-4 w-4" />
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div ref={containerRef} className="relative mx-4 max-w-md flex-1">
|
||||
<SearchInput
|
||||
inputRef={inputRef}
|
||||
searchQuery={searchQuery}
|
||||
onSearchQueryChange={handleSearchQueryChange}
|
||||
onFocus={handleSearchFocus}
|
||||
onKeyDown={handleKeyDown}
|
||||
onClear={clearSearch}
|
||||
/>
|
||||
{showDropdown && (
|
||||
<SearchDropdown
|
||||
searchQuery={searchQuery}
|
||||
searchResults={searchResults}
|
||||
recentFeatures={recentFeatures}
|
||||
selectedIndex={selectedIndex}
|
||||
onSelect={handleSelectFeature}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<TopBarActions actions={actions} />
|
||||
</header>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,175 @@
|
||||
import { useEffect, useMemo, useRef, useState, type RefObject } from 'react';
|
||||
import { Monitor, Moon, Sun } from 'lucide-react';
|
||||
import { useRouter } from '@/providers/RouterProvider';
|
||||
import { useThemeMode } from '@/providers/ThemeModeProvider';
|
||||
import { type FeatureConfig, FEATURES } from '@/config/features';
|
||||
import { useStorageState } from '@/utils/useStorageState';
|
||||
import { openExtensionPage } from '@/utils/chromeTabs';
|
||||
import { isSearchHistory, SEARCH_HISTORY_DISPLAY, SEARCH_HISTORY_LIMIT } from './constants';
|
||||
|
||||
export interface UseTopBarReturn {
|
||||
searchQuery: string;
|
||||
searchResults: FeatureConfig[];
|
||||
recentFeatures: FeatureConfig[];
|
||||
selectedIndex: number;
|
||||
isDashboard: boolean;
|
||||
ThemeIcon: typeof Sun;
|
||||
themeTitle: string;
|
||||
showDropdown: boolean;
|
||||
containerRef: RefObject<HTMLDivElement | null>;
|
||||
inputRef: RefObject<HTMLInputElement | null>;
|
||||
handleSearchQueryChange: (value: string) => void;
|
||||
handleSearchFocus: () => void;
|
||||
handleSelectFeature: (feature: FeatureConfig) => void;
|
||||
handleKeyDown: (e: React.KeyboardEvent) => void;
|
||||
cycleThemeMode: () => void;
|
||||
handleOpenInTab: () => Promise<void>;
|
||||
goHome: () => void;
|
||||
clearSearch: () => void;
|
||||
}
|
||||
|
||||
export function useTopBar(): UseTopBarReturn {
|
||||
const { currentPage, goHome, navigateTo } = useRouter();
|
||||
const { mode, setMode } = useThemeMode();
|
||||
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const [showResults, setShowResults] = useState(false);
|
||||
const [searchHistory, setSearchHistory] = useStorageState(
|
||||
'app/searchHistory',
|
||||
[],
|
||||
isSearchHistory,
|
||||
);
|
||||
const [selectedIndex, setSelectedIndex] = useState(-1);
|
||||
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
const handleOpenInTab = async () => {
|
||||
await openExtensionPage('popup.html', { mode: 'tab' });
|
||||
window.close();
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const handleClickOutside = (event: MouseEvent) => {
|
||||
if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
|
||||
setShowResults(false);
|
||||
}
|
||||
};
|
||||
document.addEventListener('mousedown', handleClickOutside);
|
||||
return () => document.removeEventListener('mousedown', handleClickOutside);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const handleGlobalKeyDown = (e: KeyboardEvent) => {
|
||||
if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
|
||||
e.preventDefault();
|
||||
inputRef.current?.focus();
|
||||
setShowResults(true);
|
||||
}
|
||||
};
|
||||
document.addEventListener('keydown', handleGlobalKeyDown);
|
||||
return () => document.removeEventListener('keydown', handleGlobalKeyDown);
|
||||
}, []);
|
||||
|
||||
const searchResults = useMemo(() => {
|
||||
const query = searchQuery.trim().toLowerCase();
|
||||
if (!query) return [];
|
||||
return FEATURES.filter((f) => {
|
||||
if (f.key === 'dashboard') return false;
|
||||
return f.label.toLowerCase().includes(query) || f.description.toLowerCase().includes(query);
|
||||
});
|
||||
}, [searchQuery]);
|
||||
|
||||
const displayedHistory = useMemo(() => {
|
||||
if (searchQuery.trim()) return [];
|
||||
return searchHistory
|
||||
.slice(0, SEARCH_HISTORY_DISPLAY)
|
||||
.map((key) => FEATURES.find((f) => f.key === key))
|
||||
.filter((feature): feature is FeatureConfig => !!feature && feature.key !== 'dashboard');
|
||||
}, [searchHistory, searchQuery]);
|
||||
|
||||
const saveToHistory = (featureKey: string) => {
|
||||
setSearchHistory((prev) =>
|
||||
[featureKey, ...prev.filter((h) => h !== featureKey)].slice(0, SEARCH_HISTORY_LIMIT),
|
||||
);
|
||||
};
|
||||
|
||||
const handleSelectFeature = (feature: FeatureConfig) => {
|
||||
navigateTo(feature.key);
|
||||
saveToHistory(feature.key);
|
||||
setSearchQuery('');
|
||||
setShowResults(false);
|
||||
};
|
||||
|
||||
const cycleThemeMode = () => {
|
||||
const nextMap = { light: 'dark', dark: 'system', system: 'light' } as const;
|
||||
setMode(nextMap[mode]);
|
||||
};
|
||||
|
||||
const ThemeIcon = mode === 'light' ? Sun : mode === 'dark' ? Moon : Monitor;
|
||||
|
||||
const themeTitle =
|
||||
mode === 'light' ? '切换到深色模式' : mode === 'dark' ? '切换到系统模式' : '切换到浅色模式';
|
||||
|
||||
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') {
|
||||
e.preventDefault();
|
||||
const items = searchQuery.trim() ? searchResults : displayedHistory;
|
||||
const feature =
|
||||
selectedIndex >= 0 && selectedIndex < totalItems
|
||||
? items[selectedIndex]
|
||||
: searchQuery.trim() && searchResults.length > 0
|
||||
? searchResults[0]
|
||||
: undefined;
|
||||
if (feature) handleSelectFeature(feature);
|
||||
} else if (e.key === 'Escape') {
|
||||
setShowResults(false);
|
||||
inputRef.current?.blur();
|
||||
}
|
||||
};
|
||||
|
||||
const clearSearch = () => {
|
||||
setSearchQuery('');
|
||||
setSelectedIndex(-1);
|
||||
};
|
||||
|
||||
const handleSearchQueryChange = (value: string) => {
|
||||
setSearchQuery(value);
|
||||
setShowResults(true);
|
||||
setSelectedIndex(-1);
|
||||
};
|
||||
|
||||
const handleSearchFocus = () => setShowResults(true);
|
||||
|
||||
const showDropdown =
|
||||
showResults && (searchQuery.trim().length > 0 || displayedHistory.length > 0);
|
||||
|
||||
return {
|
||||
searchQuery,
|
||||
searchResults,
|
||||
recentFeatures: displayedHistory,
|
||||
selectedIndex,
|
||||
showDropdown,
|
||||
isDashboard: currentPage === 'dashboard',
|
||||
ThemeIcon,
|
||||
themeTitle,
|
||||
containerRef,
|
||||
inputRef,
|
||||
handleSearchQueryChange,
|
||||
handleSearchFocus,
|
||||
handleSelectFeature,
|
||||
handleKeyDown,
|
||||
cycleThemeMode,
|
||||
handleOpenInTab,
|
||||
goHome,
|
||||
clearSearch,
|
||||
};
|
||||
}
|
||||
@@ -37,7 +37,6 @@ import { cn } from '@/lib/utils';
|
||||
| `business.ts` | 业务数据生成器（订单号、价格、日期、状态等） |
|
||||
| `technical.ts` | 技术数据生成器（UUID、IPv4、URL） |
|
||||
| `basic.ts` | 基础类型生成器（整数、浮点数、布尔值、字符串） |
|
||||
| `types.ts` | 生成器库内部类型与通用选项 |
|
||||
|
||||
使用示例：
|
||||
|
||||
|
||||
@@ -0,0 +1,22 @@
|
||||
import { randomInt, randomPick } from '@/lib/generators/random';
|
||||
|
||||
describe('generators/random', () => {
|
||||
it('randomInt 应返回闭区间内的整数', () => {
|
||||
vi.spyOn(Math, 'random').mockReturnValue(0.5);
|
||||
|
||||
expect(randomInt(1, 10)).toBe(6);
|
||||
expect(randomInt(5, 5)).toBe(5);
|
||||
});
|
||||
|
||||
it('randomPick 应对单元素数组返回该元素', () => {
|
||||
vi.spyOn(Math, 'random').mockReturnValue(0);
|
||||
|
||||
expect(randomPick(['only'])).toBe('only');
|
||||
});
|
||||
|
||||
it('randomPick 应返回数组中的元素', () => {
|
||||
vi.spyOn(Math, 'random').mockReturnValue(0.99);
|
||||
|
||||
expect(randomPick(['a', 'b', 'c'])).toBe('c');
|
||||
});
|
||||
});
|
||||
@@ -1,27 +1,6 @@
|
||||
/**
|
||||
* 基础类型生成器
|
||||
* 包含：随机整数、随机浮点数、随机字符串、从列表选择
|
||||
*/
|
||||
|
||||
import type { GeneratorDefinition } from '@/types/testDataGenerator';
|
||||
import { randomInt, randomPick } from './random';
|
||||
|
||||
/**
|
||||
* 生成随机整数
|
||||
*/
|
||||
function randomInt(min: number, max: number): number {
|
||||
return Math.floor(Math.random() * (max - min + 1)) + min;
|
||||
}
|
||||
|
||||
/**
|
||||
* 从数组中随机选择
|
||||
*/
|
||||
function randomPick<T>(arr: T[]): T {
|
||||
return arr[Math.floor(Math.random() * arr.length)];
|
||||
}
|
||||
|
||||
/**
|
||||
* 随机整数生成器
|
||||
*/
|
||||
export const randomIntGenerator: GeneratorDefinition = {
|
||||
id: 'randomInt',
|
||||
name: '随机整数',
|
||||
@@ -56,9 +35,6 @@ export const randomIntGenerator: GeneratorDefinition = {
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* 随机浮点数生成器
|
||||
*/
|
||||
export const randomFloat: GeneratorDefinition = {
|
||||
id: 'randomFloat',
|
||||
name: '随机浮点数',
|
||||
@@ -98,9 +74,6 @@ export const randomFloat: GeneratorDefinition = {
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* 随机字符串生成器
|
||||
*/
|
||||
export const randomString: GeneratorDefinition = {
|
||||
id: 'randomString',
|
||||
name: '随机字符串',
|
||||
@@ -179,9 +152,6 @@ export const randomString: GeneratorDefinition = {
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* 从列表选择生成器
|
||||
*/
|
||||
export const fromList: GeneratorDefinition = {
|
||||
id: 'fromList',
|
||||
name: '从列表选择',
|
||||
|
||||
@@ -1,27 +1,6 @@
|
||||
/**
|
||||
* 业务数据生成器
|
||||
* 包含：订单号、价格、日期、状态、数量、评分、折扣、库存
|
||||
*/
|
||||
|
||||
import type { GeneratorDefinition } from '@/types/testDataGenerator';
|
||||
import { randomInt, randomPick } from './random';
|
||||
|
||||
/**
|
||||
* 生成随机整数
|
||||
*/
|
||||
function randomInt(min: number, max: number): number {
|
||||
return Math.floor(Math.random() * (max - min + 1)) + min;
|
||||
}
|
||||
|
||||
/**
|
||||
* 从数组中随机选择
|
||||
*/
|
||||
function randomPick<T>(arr: T[]): T {
|
||||
return arr[Math.floor(Math.random() * arr.length)];
|
||||
}
|
||||
|
||||
/**
|
||||
* 格式化日期
|
||||
*/
|
||||
function formatDate(date: Date, format: string): string {
|
||||
const year = date.getFullYear();
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||||
@@ -39,9 +18,6 @@ function formatDate(date: Date, format: string): string {
|
||||
.replace('ss', seconds);
|
||||
}
|
||||
|
||||
/**
|
||||
* 订单号生成器
|
||||
*/
|
||||
export const orderId: GeneratorDefinition = {
|
||||
id: 'orderId',
|
||||
name: '订单号',
|
||||
@@ -81,9 +57,6 @@ export const orderId: GeneratorDefinition = {
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* 价格生成器
|
||||
*/
|
||||
export const price: GeneratorDefinition = {
|
||||
id: 'price',
|
||||
name: '价格',
|
||||
@@ -155,9 +128,6 @@ export const price: GeneratorDefinition = {
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* 生成心理定价（如 9.99, 19.9, 99）
|
||||
*/
|
||||
function generatePsychologicalPrice(min: number, max: number): number {
|
||||
const patterns = [
|
||||
() => {
|
||||
@@ -180,9 +150,6 @@ function generatePsychologicalPrice(min: number, max: number): number {
|
||||
return price;
|
||||
}
|
||||
|
||||
/**
|
||||
* 生成真实分布价格（对数正态分布）
|
||||
*/
|
||||
function generateRealisticPrice(min: number, max: number): number {
|
||||
const mean = (Math.log(min) + Math.log(max)) / 2;
|
||||
const stdDev = (Math.log(max) - Math.log(min)) / 4;
|
||||
@@ -195,9 +162,6 @@ function generateRealisticPrice(min: number, max: number): number {
|
||||
return Math.max(min, Math.min(max, value));
|
||||
}
|
||||
|
||||
/**
|
||||
* 日期生成器
|
||||
*/
|
||||
export const date: GeneratorDefinition = {
|
||||
id: 'date',
|
||||
name: '日期',
|
||||
@@ -248,9 +212,6 @@ export const date: GeneratorDefinition = {
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* 状态生成器
|
||||
*/
|
||||
export const status: GeneratorDefinition = {
|
||||
id: 'status',
|
||||
name: '状态',
|
||||
@@ -303,9 +264,6 @@ export const status: GeneratorDefinition = {
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* 数量生成器
|
||||
*/
|
||||
export const quantity: GeneratorDefinition = {
|
||||
id: 'quantity',
|
||||
name: '数量',
|
||||
@@ -352,9 +310,6 @@ export const quantity: GeneratorDefinition = {
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* 泊松分布随机数
|
||||
*/
|
||||
function poissonRandom(lambda: number): number {
|
||||
const L = Math.exp(-lambda);
|
||||
let k = 0;
|
||||
@@ -366,9 +321,6 @@ function poissonRandom(lambda: number): number {
|
||||
return k - 1;
|
||||
}
|
||||
|
||||
/**
|
||||
* 评分生成器
|
||||
*/
|
||||
export const rating: GeneratorDefinition = {
|
||||
id: 'rating',
|
||||
name: '评分',
|
||||
@@ -423,9 +375,6 @@ export const rating: GeneratorDefinition = {
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* 偏向高分的随机数（模拟真实评分分布）
|
||||
*/
|
||||
function skewedRandom(min: number, max: number): number {
|
||||
// 使用 Beta 分布模拟评分偏向
|
||||
const alpha = 3;
|
||||
@@ -434,13 +383,10 @@ function skewedRandom(min: number, max: number): number {
|
||||
v = 0;
|
||||
while (u === 0) u = Math.random();
|
||||
while (v === 0) v = Math.random();
|
||||
const x = Math.pow(u, 1 / alpha) / Math.pow(u, 1 / alpha) + Math.pow(v, 1 / beta);
|
||||
const x = Math.pow(u, 1 / alpha) / (Math.pow(u, 1 / alpha) + Math.pow(v, 1 / beta));
|
||||
return min + x * (max - min);
|
||||
}
|
||||
|
||||
/**
|
||||
* 折扣生成器
|
||||
*/
|
||||
export const discount: GeneratorDefinition = {
|
||||
id: 'discount',
|
||||
name: '折扣',
|
||||
@@ -492,9 +438,6 @@ export const discount: GeneratorDefinition = {
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* 生成心理折扣（如 5%, 10%, 20%, 30%）
|
||||
*/
|
||||
function generatePsychologicalDiscount(min: number, max: number): number {
|
||||
const psychologicalDiscounts = [5, 10, 15, 20, 25, 30, 40, 50, 60, 70, 80];
|
||||
const validDiscounts = psychologicalDiscounts.filter((d) => d >= min && d <= max);
|
||||
@@ -504,9 +447,6 @@ function generatePsychologicalDiscount(min: number, max: number): number {
|
||||
return randomInt(min, max);
|
||||
}
|
||||
|
||||
/**
|
||||
* 库存生成器
|
||||
*/
|
||||
export const stock: GeneratorDefinition = {
|
||||
id: 'stock',
|
||||
name: '库存',
|
||||
|
||||
@@ -1,17 +1,9 @@
|
||||
/**
|
||||
* 生成器库索引
|
||||
* 导出所有生成器和分类配置
|
||||
*/
|
||||
|
||||
import type { GeneratorDefinition, GeneratorCategory } from '@/types/testDataGenerator';
|
||||
import { personalGenerators } from './personal';
|
||||
import { businessGenerators } from './business';
|
||||
import { technicalGenerators } from './technical';
|
||||
import { basicGenerators } from './basic';
|
||||
|
||||
/**
|
||||
* 生成器分类配置
|
||||
*/
|
||||
export const generatorCategories: GeneratorCategory[] = [
|
||||
{ id: 'personal', name: '个人信息', icon: 'User' },
|
||||
{ id: 'business', name: '业务数据', icon: 'Briefcase' },
|
||||
@@ -19,9 +11,6 @@ export const generatorCategories: GeneratorCategory[] = [
|
||||
{ id: 'basic', name: '基础类型', icon: 'Hash' },
|
||||
];
|
||||
|
||||
/**
|
||||
* 所有生成器列表
|
||||
*/
|
||||
export const allGenerators: GeneratorDefinition[] = [
|
||||
...personalGenerators,
|
||||
...businessGenerators,
|
||||
@@ -29,23 +18,14 @@ export const allGenerators: GeneratorDefinition[] = [
|
||||
...basicGenerators,
|
||||
];
|
||||
|
||||
/**
|
||||
* 根据 ID 获取生成器
|
||||
*/
|
||||
export function getGeneratorById(id: string): GeneratorDefinition | undefined {
|
||||
return allGenerators.find((g) => g.id === id);
|
||||
}
|
||||
|
||||
/**
|
||||
* 根据分类 ID 获取生成器列表
|
||||
*/
|
||||
export function getGeneratorsByCategory(categoryId: string): GeneratorDefinition[] {
|
||||
return allGenerators.filter((g) => g.categoryId === categoryId);
|
||||
}
|
||||
|
||||
/**
|
||||
* 搜索生成器
|
||||
*/
|
||||
export function searchGenerators(query: string): GeneratorDefinition[] {
|
||||
const lowerQuery = query.toLowerCase();
|
||||
return allGenerators.filter(
|
||||
|
||||
@@ -1,11 +1,6 @@
|
||||
/**
|
||||
* 个人信息生成器
|
||||
* 包含：中文姓名、邮箱、手机号、身份证号、中文地址、年龄
|
||||
*/
|
||||
|
||||
import type { GeneratorDefinition } from '@/types/testDataGenerator';
|
||||
import { randomInt, randomPick } from './random';
|
||||
|
||||
// 中文姓氏
|
||||
const SURNAMES = [
|
||||
'王',
|
||||
'李',
|
||||
@@ -59,7 +54,6 @@ const SURNAMES = [
|
||||
'阎',
|
||||
];
|
||||
|
||||
// 中文名字常用字
|
||||
const NAME_CHARS = [
|
||||
'伟',
|
||||
'芳',
|
||||
@@ -113,10 +107,8 @@ const NAME_CHARS = [
|
||||
'慧',
|
||||
];
|
||||
|
||||
// 邮箱域名
|
||||
const EMAIL_DOMAINS = ['qq.com', '163.com', '126.com', 'gmail.com', 'outlook.com', 'hotmail.com'];
|
||||
|
||||
// 省份
|
||||
const PROVINCES = [
|
||||
'北京市',
|
||||
'天津市',
|
||||
@@ -152,7 +144,6 @@ const PROVINCES = [
|
||||
'新疆维吾尔自治区',
|
||||
];
|
||||
|
||||
// 城市
|
||||
const CITIES: Record<string, string[]> = {
|
||||
北京市: ['东城区', '西城区', '朝阳区', '海淀区'],
|
||||
上海市: ['黄浦区', '徐汇区', '长宁区', '静安区'],
|
||||
@@ -162,23 +153,6 @@ const CITIES: Record<string, string[]> = {
|
||||
四川省: ['成都市', '绵阳市', '德阳市', '宜宾市'],
|
||||
};
|
||||
|
||||
/**
|
||||
* 生成随机整数
|
||||
*/
|
||||
function randomInt(min: number, max: number): number {
|
||||
return Math.floor(Math.random() * (max - min + 1)) + min;
|
||||
}
|
||||
|
||||
/**
|
||||
* 从数组中随机选择
|
||||
*/
|
||||
function randomPick<T>(arr: T[]): T {
|
||||
return arr[Math.floor(Math.random() * arr.length)];
|
||||
}
|
||||
|
||||
/**
|
||||
* 中文姓名生成器
|
||||
*/
|
||||
export const chineseName: GeneratorDefinition = {
|
||||
id: 'chineseName',
|
||||
name: '中文姓名',
|
||||
@@ -192,9 +166,6 @@ export const chineseName: GeneratorDefinition = {
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* 邮箱生成器
|
||||
*/
|
||||
export const email: GeneratorDefinition = {
|
||||
id: 'email',
|
||||
name: '邮箱',
|
||||
@@ -221,9 +192,6 @@ export const email: GeneratorDefinition = {
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* 手机号生成器
|
||||
*/
|
||||
export const chinesePhone: GeneratorDefinition = {
|
||||
id: 'chinesePhone',
|
||||
name: '手机号',
|
||||
@@ -254,9 +222,6 @@ export const chinesePhone: GeneratorDefinition = {
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* 身份证号生成器
|
||||
*/
|
||||
export const idCard: GeneratorDefinition = {
|
||||
id: 'idCard',
|
||||
name: '身份证号',
|
||||
@@ -281,20 +246,12 @@ export const idCard: GeneratorDefinition = {
|
||||
generate: (params) => {
|
||||
const regions = ['110101', '310101', '440103', '440305', '510104', '330102'];
|
||||
const region = params.region === 'random' ? randomPick(regions) : (params.region as string);
|
||||
|
||||
// 出生日期 1960-2005年
|
||||
const year = randomInt(1960, 2005);
|
||||
const month = String(randomInt(1, 12)).padStart(2, '0');
|
||||
const day = String(randomInt(1, 28)).padStart(2, '0');
|
||||
const birthday = `${year}${month}${day}`;
|
||||
|
||||
// 顺序码
|
||||
const sequence = String(randomInt(1, 999)).padStart(3, '0');
|
||||
|
||||
// 前17位
|
||||
const prefix17 = region + birthday + sequence;
|
||||
|
||||
// 校验码
|
||||
const weights = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];
|
||||
const checkCodes = ['1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2'];
|
||||
let sum = 0;
|
||||
@@ -330,9 +287,6 @@ export const idCard: GeneratorDefinition = {
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* 中文地址生成器
|
||||
*/
|
||||
export const chineseAddress: GeneratorDefinition = {
|
||||
id: 'chineseAddress',
|
||||
name: '中文地址',
|
||||
@@ -361,9 +315,6 @@ export const chineseAddress: GeneratorDefinition = {
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* 年龄生成器
|
||||
*/
|
||||
export const age: GeneratorDefinition = {
|
||||
id: 'age',
|
||||
name: '年龄',
|
||||
@@ -415,9 +366,6 @@ export const age: GeneratorDefinition = {
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* 正态分布随机数
|
||||
*/
|
||||
function normalRandom(min: number, max: number): number {
|
||||
const mean = (min + max) / 2;
|
||||
const stdDev = (max - min) / 6;
|
||||
@@ -430,9 +378,6 @@ function normalRandom(min: number, max: number): number {
|
||||
return Math.max(min, Math.min(max, value));
|
||||
}
|
||||
|
||||
/**
|
||||
* 人口统计分布随机数（模拟真实年龄分布）
|
||||
*/
|
||||
function demographicRandom(): number {
|
||||
const ageGroups = [
|
||||
{ min: 0, max: 14, weight: 0.18 },
|
||||
|
||||
@@ -0,0 +1,7 @@
|
||||
export function randomInt(min: number, max: number): number {
|
||||
return Math.floor(Math.random() * (max - min + 1)) + min;
|
||||
}
|
||||
|
||||
export function randomPick<T>(arr: readonly T[]): T {
|
||||
return arr[Math.floor(Math.random() * arr.length)];
|
||||
}
|
||||
@@ -1,27 +1,6 @@
|
||||
/**
|
||||
* 技术数据生成器
|
||||
* 包含：UUID、IPv4、URL
|
||||
*/
|
||||
|
||||
import type { GeneratorDefinition } from '@/types/testDataGenerator';
|
||||
import { randomInt, randomPick } from './random';
|
||||
|
||||
/**
|
||||
* 生成随机整数
|
||||
*/
|
||||
function randomInt(min: number, max: number): number {
|
||||
return Math.floor(Math.random() * (max - min + 1)) + min;
|
||||
}
|
||||
|
||||
/**
|
||||
* 从数组中随机选择
|
||||
*/
|
||||
function randomPick<T>(arr: T[]): T {
|
||||
return arr[Math.floor(Math.random() * arr.length)];
|
||||
}
|
||||
|
||||
/**
|
||||
* UUID 生成器
|
||||
*/
|
||||
export const uuid: GeneratorDefinition = {
|
||||
id: 'uuid',
|
||||
name: 'UUID',
|
||||
@@ -78,9 +57,6 @@ export const uuid: GeneratorDefinition = {
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* 生成 UUID v4
|
||||
*/
|
||||
function generateUUIDv4(): string {
|
||||
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
|
||||
const r = (Math.random() * 16) | 0;
|
||||
@@ -89,9 +65,6 @@ function generateUUIDv4(): string {
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 生成 UUID v1（简化版本，模拟时间戳）
|
||||
*/
|
||||
function generateUUIDv1(): string {
|
||||
const now = Date.now();
|
||||
const timeLow = (now & 0xffffffff).toString(16).padStart(8, '0');
|
||||
@@ -105,9 +78,6 @@ function generateUUIDv1(): string {
|
||||
return `${timeLow}-${timeMid}-${timeHi.toString(16)}-${clockSeq.toString(16)}-${node}`;
|
||||
}
|
||||
|
||||
/**
|
||||
* IPv4 生成器
|
||||
*/
|
||||
export const ipv4: GeneratorDefinition = {
|
||||
id: 'ipv4',
|
||||
name: 'IPv4',
|
||||
@@ -142,16 +112,10 @@ export const ipv4: GeneratorDefinition = {
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* 生成完全随机 IPv4
|
||||
*/
|
||||
function generateRandomIPv4(): string {
|
||||
return Array.from({ length: 4 }, () => randomInt(0, 255)).join('.');
|
||||
}
|
||||
|
||||
/**
|
||||
* 生成内网 IPv4
|
||||
*/
|
||||
function generatePrivateIPv4(): string {
|
||||
const ranges = [
|
||||
{ prefix: '10', second: () => randomInt(0, 255) },
|
||||
@@ -166,9 +130,6 @@ function generatePrivateIPv4(): string {
|
||||
return `${range.prefix}.${range.second()}.${randomInt(1, 254)}.${randomInt(1, 254)}`;
|
||||
}
|
||||
|
||||
/**
|
||||
* 生成公网 IPv4
|
||||
*/
|
||||
function generatePublicIPv4(): string {
|
||||
let first: number;
|
||||
do {
|
||||
@@ -178,9 +139,6 @@ function generatePublicIPv4(): string {
|
||||
return `${first}.${randomInt(0, 255)}.${randomInt(0, 255)}.${randomInt(1, 254)}`;
|
||||
}
|
||||
|
||||
/**
|
||||
* URL 生成器
|
||||
*/
|
||||
export const url: GeneratorDefinition = {
|
||||
id: 'url',
|
||||
name: 'URL',
|
||||
@@ -250,8 +208,6 @@ export const url: GeneratorDefinition = {
|
||||
path = `/${randomPick(['about', 'contact', 'products', 'services', 'blog'])}`;
|
||||
}
|
||||
}
|
||||
|
||||
// 添加查询参数
|
||||
let query = '';
|
||||
if (Math.random() > 0.5) {
|
||||
const params = new URLSearchParams();
|
||||
|
||||
@@ -1,162 +0,0 @@
|
||||
import { useCallback, useEffect, useMemo, useState } from 'react';
|
||||
import TextInputArea from '@/components/TextInputArea';
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
import { CopyButton } from '@/components/CopyButton';
|
||||
import { base64ToText, textToBase64 } from '@/utils/base64Converter';
|
||||
import SwitchButtonGroup from '@/components/SwitchButtonGroup';
|
||||
import { useContextMenuData } from '@/utils/useContextMenuData';
|
||||
import { Button } from '@/components/ui/button';
|
||||
|
||||
const IMAGE_DATA_URI_PATTERN = /^\s*data:image\//i;
|
||||
|
||||
const ERROR_MESSAGE_TO_I18N: Record<string, string> = {
|
||||
'Invalid Base64 string': 'invalidBase64',
|
||||
'Input appears to be binary data (e.g. an image). Please use the Image tab instead.':
|
||||
'binaryDataDetected',
|
||||
};
|
||||
|
||||
interface TextModeProps {
|
||||
onSwitchToImageMode?: () => void;
|
||||
}
|
||||
|
||||
export default function TextMode({ onSwitchToImageMode }: TextModeProps = {}) {
|
||||
const { t } = useI18n('base64Converter');
|
||||
|
||||
const [input, setInput] = useState('');
|
||||
const [debouncedInput, setDebouncedInput] = useState('');
|
||||
const [direction, setDirection] = useState<'encode' | 'decode'>('encode');
|
||||
|
||||
useEffect(() => {
|
||||
const handle = setTimeout(() => {
|
||||
setDebouncedInput(input);
|
||||
}, 200);
|
||||
return () => clearTimeout(handle);
|
||||
}, [input]);
|
||||
|
||||
const handleContextMenuData = useCallback((payload: string) => {
|
||||
setInput(payload);
|
||||
setDebouncedInput(payload);
|
||||
setDirection('decode');
|
||||
}, []);
|
||||
|
||||
useContextMenuData({ featureKey: 'base64Converter', onData: handleContextMenuData });
|
||||
|
||||
const conversionPipeline = useMemo(() => {
|
||||
const trimmed = debouncedInput.trim();
|
||||
if (!trimmed) return { output: '', error: null };
|
||||
|
||||
try {
|
||||
if (direction === 'encode') {
|
||||
const result = textToBase64(debouncedInput);
|
||||
return { output: result.output, error: null };
|
||||
} else {
|
||||
const decoded = base64ToText(trimmed);
|
||||
return { output: decoded, error: null };
|
||||
}
|
||||
} catch (e) {
|
||||
const message = e instanceof Error ? e.message : '';
|
||||
const i18nKey = ERROR_MESSAGE_TO_I18N[message];
|
||||
return {
|
||||
output: '',
|
||||
error: i18nKey ? t(i18nKey) : message || t('conversionFailed'),
|
||||
};
|
||||
}
|
||||
}, [debouncedInput, direction, t]);
|
||||
|
||||
const output = conversionPipeline.output;
|
||||
const error = conversionPipeline.error;
|
||||
|
||||
const placeholder =
|
||||
direction === 'encode' ? t('textInputPlaceholder') : t('base64InputPlaceholder');
|
||||
const outputLabel = direction === 'encode' ? t('base64Output') : t('textOutput');
|
||||
|
||||
const showImageHint = useMemo(
|
||||
() => direction === 'decode' && IMAGE_DATA_URI_PATTERN.test(input),
|
||||
[direction, input],
|
||||
);
|
||||
|
||||
const handleDirectionChange = (value: 'encode' | 'decode') => {
|
||||
if (value === direction) return;
|
||||
setDirection(value);
|
||||
setInput('');
|
||||
setDebouncedInput('');
|
||||
};
|
||||
|
||||
const handleClear = () => {
|
||||
setInput('');
|
||||
setDebouncedInput('');
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="w-full flex flex-col space-y-4 px-2">
|
||||
{/* 受控方向切流中枢 */}
|
||||
<div className="flex h-11 items-center px-1.5 bg-secondary/40 rounded-xl border border-border/60 w-fit">
|
||||
<SwitchButtonGroup
|
||||
value={direction}
|
||||
options={[
|
||||
{ value: 'encode', label: t('encode') },
|
||||
{ value: 'decode', label: t('decode') },
|
||||
]}
|
||||
onChange={handleDirectionChange}
|
||||
size="small"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 高性能受控文本输入端 */}
|
||||
<TextInputArea
|
||||
placeholder={placeholder}
|
||||
value={input}
|
||||
onChange={setInput}
|
||||
externalError={error || undefined}
|
||||
showClear={true}
|
||||
allowCopy={true}
|
||||
minRows={5}
|
||||
maxRows={10}
|
||||
onClear={handleClear}
|
||||
/>
|
||||
|
||||
{/* 图片 URI 类型劫持警告引导区：
|
||||
- 💡 修复点：彻底废除原生亮色硬编码 hover:bg-blue-100 类名，
|
||||
- 完美向全站 shadcn 暗黑生态看齐，采用标准的 bg-primary/10 混合变体。
|
||||
*/}
|
||||
{showImageHint && (
|
||||
<div className="flex items-center justify-between p-3.5 rounded-xl bg-primary/10 border border-primary/20">
|
||||
<span className="text-xs font-semibold text-primary tracking-tight">
|
||||
{t('imageDataUriHint')}
|
||||
</span>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={onSwitchToImageMode}
|
||||
className="h-7 rounded-md text-xs font-bold text-primary hover:text-primary hover:bg-primary/20 dark:hover:bg-primary/10 px-2.5"
|
||||
>
|
||||
{t('switchToImageMode')}
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 5. 编码/解码核心数据承载流卡片 */}
|
||||
{output && (
|
||||
<div className="p-4 rounded-2xl bg-card border border-border shadow-sm flex flex-col space-y-3">
|
||||
<div className="flex justify-between items-center select-none">
|
||||
<span className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground/90">
|
||||
{outputLabel}
|
||||
</span>
|
||||
<CopyButton
|
||||
text={output}
|
||||
className="h-6 px-2 rounded-md border text-[10px] font-bold"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<TextInputArea
|
||||
readOnly
|
||||
value={output.length > 2000 ? `${output.substring(0, 2000)}...` : output}
|
||||
showClear={false}
|
||||
minRows={4}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
+2
-2
@@ -1,6 +1,6 @@
|
||||
import { beforeEach, describe, expect, it, vi } from 'vitest';
|
||||
import { fireEvent, render, screen } from '@testing-library/react';
|
||||
import DecodeResultPaper from '@/components/DecodeResultPaper';
|
||||
import DecodeResultPaper from '../components/DecodeResultPaper';
|
||||
|
||||
describe('DecodeResultPaper 组件', () => {
|
||||
const defaultProps = {
|
||||
@@ -27,7 +27,7 @@ describe('DecodeResultPaper 组件', () => {
|
||||
expect(screen.getByText(/image\/png/)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('应通过 formatFileSize 渲染文件大小', () => {
|
||||
it('应通过 formatBytes 渲染文件大小', () => {
|
||||
render(<DecodeResultPaper {...{ ...defaultProps, blobSize: 1536 }} />);
|
||||
expect(screen.getByText(/1\.5 KB/)).toBeInTheDocument();
|
||||
});
|
||||
@@ -1,6 +1,6 @@
|
||||
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
|
||||
import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
|
||||
import TextMode from '../TextMode';
|
||||
import TextMode from '../components/TextMode';
|
||||
|
||||
// Mock CopyButton
|
||||
vi.mock('@/components/CopyButton', () => ({
|
||||
@@ -76,7 +76,7 @@ describe('TextMode', () => {
|
||||
});
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('Base64 字符串无效')).toBeInTheDocument();
|
||||
expect(screen.getByText('无效的 Base64 字符串')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -118,7 +118,7 @@ describe('TextMode', () => {
|
||||
expect(screen.getByRole('button', { name: 'SGVsbG8=' })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
fireEvent.click(screen.getByRole('button', { name: 'textInputArea.clear' }));
|
||||
fireEvent.click(screen.getByRole('button', { name: '清空' }));
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.queryByRole('button', { name: 'SGVsbG8=' })).not.toBeInTheDocument();
|
||||
@@ -182,9 +182,7 @@ describe('TextMode', () => {
|
||||
});
|
||||
|
||||
await waitFor(() => {
|
||||
expect(
|
||||
screen.getByText('输入似乎是二进制数据（如图片）。请切换到「图像」选项卡。'),
|
||||
).toBeInTheDocument();
|
||||
expect(screen.getByText('检测到二进制数据（如图像），请使用图像选项卡')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -12,7 +12,7 @@ vi.mock('@/config/features', async (importOriginal) => {
|
||||
});
|
||||
|
||||
// Mock 子组件
|
||||
vi.mock('../TextMode', () => ({
|
||||
vi.mock('../components/TextMode', () => ({
|
||||
default: ({ onSwitchToImageMode }: { onSwitchToImageMode?: () => void }) => (
|
||||
<div data-testid="text-mode">
|
||||
TextMode
|
||||
@@ -21,7 +21,7 @@ vi.mock('../TextMode', () => ({
|
||||
),
|
||||
}));
|
||||
|
||||
vi.mock('../Base64ConverterSection', () => ({
|
||||
vi.mock('../components/Base64ConverterSection', () => ({
|
||||
default: ({ mode }: { mode: string }) => <div data-testid={`${mode}-mode`}>{mode}</div>,
|
||||
}));
|
||||
|
||||
|
||||
+25
-27
@@ -1,14 +1,14 @@
|
||||
import { Image as ImageIcon, Trash2, Upload } from 'lucide-react';
|
||||
import TextInputArea from '@/components/TextInputArea';
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
import { CopyButton } from '@/components/CopyButton';
|
||||
import DecodeResultPaper from '@/components/DecodeResultPaper';
|
||||
import DecodeResultPaper from './DecodeResultPaper';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { downloadBlob, formatFileSize } from '@/utils/base64Converter';
|
||||
import { downloadBlob } from '@/utils/base64Converter';
|
||||
import { formatBytes } from '@/utils/format';
|
||||
import { useStorageState } from '@/utils/useStorageState';
|
||||
import type { Base64ConvertDirection } from '@/types/storage';
|
||||
import SwitchButtonGroup from '@/components/SwitchButtonGroup';
|
||||
import { useBase64Converter } from './useBase64Converter';
|
||||
import { useBase64Converter } from '../useBase64Converter';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
const isValidDirection = (val: unknown): val is Base64ConvertDirection =>
|
||||
@@ -19,8 +19,6 @@ interface Base64ConverterSectionProps {
|
||||
}
|
||||
|
||||
export default function Base64ConverterSection({ mode }: Base64ConverterSectionProps) {
|
||||
const { t } = useI18n('base64Converter');
|
||||
|
||||
const [direction, setDirection] = useStorageState(
|
||||
`base64Converter/${mode}Mode/direction`,
|
||||
'encode',
|
||||
@@ -42,12 +40,12 @@ export default function Base64ConverterSection({ mode }: Base64ConverterSectionP
|
||||
decodedFileName,
|
||||
setCustomFileName,
|
||||
resetAll,
|
||||
safeFileSelect,
|
||||
handleFileSelect,
|
||||
maxFileSizeStr,
|
||||
} = useBase64Converter({ mode });
|
||||
|
||||
const handleDirectionChange = (next: Base64ConvertDirection) => {
|
||||
if (!next || next === direction) return;
|
||||
if (next === direction) return;
|
||||
resetAll();
|
||||
setDirection(next);
|
||||
};
|
||||
@@ -62,8 +60,8 @@ export default function Base64ConverterSection({ mode }: Base64ConverterSectionP
|
||||
<SwitchButtonGroup
|
||||
value={direction}
|
||||
options={[
|
||||
{ value: 'encode', label: t('encode') },
|
||||
{ value: 'decode', label: t('decode') },
|
||||
{ value: 'encode', label: '编码' },
|
||||
{ value: 'decode', label: '解码' },
|
||||
]}
|
||||
onChange={handleDirectionChange}
|
||||
size="small"
|
||||
@@ -82,7 +80,7 @@ export default function Base64ConverterSection({ mode }: Base64ConverterSectionP
|
||||
e.preventDefault();
|
||||
setIsDragging(false);
|
||||
const file = e.dataTransfer.files[0];
|
||||
if (file) safeFileSelect(file);
|
||||
if (file) void handleFileSelect(file);
|
||||
}}
|
||||
onClick={() => fileInputRef.current?.click()}
|
||||
className={cn(
|
||||
@@ -101,7 +99,7 @@ export default function Base64ConverterSection({ mode }: Base64ConverterSectionP
|
||||
hidden
|
||||
onChange={(e) => {
|
||||
const file = e.target.files?.[0];
|
||||
if (file) safeFileSelect(file);
|
||||
if (file) void handleFileSelect(file);
|
||||
}}
|
||||
/>
|
||||
{isLoading ? (
|
||||
@@ -122,10 +120,10 @@ export default function Base64ConverterSection({ mode }: Base64ConverterSectionP
|
||||
{info.name}
|
||||
</span>
|
||||
<span className="text-xs text-muted-foreground/80 font-mono tabular-nums">
|
||||
{formatFileSize(info.size)} · {info.type}
|
||||
{formatBytes(info.size)} · {info.type}
|
||||
</span>
|
||||
<span className="text-[11px] font-medium text-primary/80 mt-1">
|
||||
{t('clickOrDropToReplace')}
|
||||
点击或拖拽以替换文件
|
||||
</span>
|
||||
</div>
|
||||
) : (
|
||||
@@ -136,14 +134,14 @@ export default function Base64ConverterSection({ mode }: Base64ConverterSectionP
|
||||
<Upload className="w-8 h-8 text-muted-foreground/60" />
|
||||
)}
|
||||
<span className="text-xs font-bold text-foreground/80">
|
||||
{mode === 'image' ? t('clickOrDropToImage') : t('clickOrDropToFile')}
|
||||
{mode === 'image' ? '点击或拖拽图像到此处' : '点击或拖拽文件到此处'}
|
||||
</span>
|
||||
<span className="text-[10px] font-medium text-muted-foreground/60">
|
||||
{t('maxFileSize', { max: maxFileSizeStr })}
|
||||
{`最大文件大小：${maxFileSizeStr}`}
|
||||
</span>
|
||||
{mode === 'image' && (
|
||||
<span className="text-[10px] font-medium text-muted-foreground/50">
|
||||
{t('supportedFormats')}
|
||||
{'支持 PNG、JPG、WEBP、GIF、BMP、SVG 等格式'}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
@@ -160,17 +158,17 @@ export default function Base64ConverterSection({ mode }: Base64ConverterSectionP
|
||||
<div className="p-4 rounded-2xl bg-card border border-border shadow-sm flex flex-col space-y-3">
|
||||
<div className="flex justify-between items-center select-none">
|
||||
<span className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground/90">
|
||||
{t('base64Output')}
|
||||
Base64 编码结果
|
||||
</span>
|
||||
<div className="flex gap-2">
|
||||
<CopyButton
|
||||
text={result.rawBase64}
|
||||
tooltip={t('copyRaw')}
|
||||
tooltip="复制纯 Base64"
|
||||
className="h-6 px-2 rounded-md border text-[10px] font-bold"
|
||||
/>
|
||||
<CopyButton
|
||||
text={result.output}
|
||||
tooltip={t('copyDataUri')}
|
||||
tooltip="复制 Data URI"
|
||||
className="h-6 px-2 rounded-md border text-[10px] font-bold"
|
||||
/>
|
||||
</div>
|
||||
@@ -188,16 +186,16 @@ export default function Base64ConverterSection({ mode }: Base64ConverterSectionP
|
||||
<div className="flex items-center justify-between font-mono text-[10px] text-muted-foreground/70 select-none pt-1">
|
||||
<div className="flex gap-4 items-center tabular-nums">
|
||||
<span>
|
||||
{t('originalSize')}:{' '}
|
||||
原始大小:{' '}
|
||||
<span className="font-semibold text-foreground/80">
|
||||
{formatFileSize(result.originalBytes)}
|
||||
{formatBytes(result.originalBytes)}
|
||||
</span>
|
||||
</span>
|
||||
<span className="text-border/60">|</span>
|
||||
<span>
|
||||
{t('encodedSize')}:{' '}
|
||||
编码大小:{' '}
|
||||
<span className="font-semibold text-foreground/80">
|
||||
{formatFileSize(result.outputBytes)}
|
||||
{formatBytes(result.outputBytes)}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
@@ -208,7 +206,7 @@ export default function Base64ConverterSection({ mode }: Base64ConverterSectionP
|
||||
className="h-7 rounded-md text-muted-foreground hover:text-destructive text-[11px] gap-1 px-2"
|
||||
>
|
||||
<Trash2 className="w-3.5 h-3.5" />
|
||||
{t('clear')}
|
||||
清空
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -217,7 +215,7 @@ export default function Base64ConverterSection({ mode }: Base64ConverterSectionP
|
||||
) : (
|
||||
<div className="flex flex-col space-y-4">
|
||||
<TextInputArea
|
||||
placeholder={t('decodeBase64Placeholder')}
|
||||
placeholder="输入需要解码的 Base64 或 data URI..."
|
||||
value={decodeInput}
|
||||
onChange={setDecodeInput}
|
||||
externalError={decodeError || undefined}
|
||||
@@ -228,7 +226,7 @@ export default function Base64ConverterSection({ mode }: Base64ConverterSectionP
|
||||
/>
|
||||
{decoded && (
|
||||
<DecodeResultPaper
|
||||
title={mode === 'image' ? t('decodedImageOutput') : t('decodedFileOutput')}
|
||||
title={mode === 'image' ? '解码图像' : '解码文件'}
|
||||
mimeType={decoded.mimeType}
|
||||
blobSize={decoded.blob.size}
|
||||
fileName={decodedFileName}
|
||||
@@ -0,0 +1,53 @@
|
||||
import { Download } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { formatBytes } from '@/utils/format';
|
||||
|
||||
interface DecodeResultPaperProps {
|
||||
title: string;
|
||||
mimeType: string;
|
||||
blobSize: number;
|
||||
fileName: string;
|
||||
onFileNameChange: (name: string) => void;
|
||||
onDownload: () => void;
|
||||
children?: React.ReactNode;
|
||||
}
|
||||
|
||||
export default function DecodeResultPaper({
|
||||
title,
|
||||
mimeType,
|
||||
blobSize,
|
||||
fileName,
|
||||
onFileNameChange,
|
||||
onDownload,
|
||||
children,
|
||||
}: DecodeResultPaperProps) {
|
||||
return (
|
||||
<div className="p-4 rounded-xl bg-primary/10 border border-primary/30">
|
||||
<span className="block mb-2 text-xs font-bold text-muted-foreground">{title}</span>
|
||||
|
||||
{children}
|
||||
|
||||
<div className="flex gap-4 mb-3">
|
||||
<span className="text-xs text-muted-foreground">推断的 MIME 类型: {mimeType}</span>
|
||||
<span className="text-xs text-muted-foreground">解码大小: {formatBytes(blobSize)}</span>
|
||||
</div>
|
||||
|
||||
<div className="mb-3">
|
||||
<Label className="block text-xs font-medium text-muted-foreground mb-1">解码后文件名</Label>
|
||||
<Input value={fileName} onChange={(e) => onFileNameChange(e.target.value)} />
|
||||
</div>
|
||||
|
||||
<Button
|
||||
variant="default"
|
||||
onClick={onDownload}
|
||||
disabled={!fileName.trim()}
|
||||
className="w-full rounded-lg font-bold"
|
||||
>
|
||||
<Download className="mr-2 h-4 w-4" />
|
||||
下载
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,90 @@
|
||||
import TextInputArea from '@/components/TextInputArea';
|
||||
import { CopyButton } from '@/components/CopyButton';
|
||||
import SwitchButtonGroup from '@/components/SwitchButtonGroup';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { useTextMode } from '../useTextMode';
|
||||
|
||||
interface TextModeProps {
|
||||
onSwitchToImageMode?: () => void;
|
||||
}
|
||||
|
||||
export default function TextMode({ onSwitchToImageMode }: TextModeProps) {
|
||||
const {
|
||||
input,
|
||||
setInput,
|
||||
direction,
|
||||
handleDirectionChange,
|
||||
placeholder,
|
||||
output,
|
||||
outputLabel,
|
||||
error,
|
||||
showImageHint,
|
||||
handleClear,
|
||||
} = useTextMode();
|
||||
|
||||
return (
|
||||
<div className="w-full flex flex-col space-y-4 px-2">
|
||||
<div className="flex h-11 items-center px-1.5 bg-secondary/40 rounded-xl border border-border/60 w-fit">
|
||||
<SwitchButtonGroup
|
||||
value={direction}
|
||||
options={[
|
||||
{ value: 'encode', label: '编码' },
|
||||
{ value: 'decode', label: '解码' },
|
||||
]}
|
||||
onChange={handleDirectionChange}
|
||||
size="small"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<TextInputArea
|
||||
placeholder={placeholder}
|
||||
value={input}
|
||||
onChange={setInput}
|
||||
externalError={error || undefined}
|
||||
showClear={true}
|
||||
allowCopy={true}
|
||||
minRows={5}
|
||||
maxRows={10}
|
||||
onClear={handleClear}
|
||||
/>
|
||||
|
||||
{showImageHint && (
|
||||
<div className="flex items-center justify-between p-3.5 rounded-xl bg-primary/10 border border-primary/20">
|
||||
<span className="text-xs font-semibold text-primary tracking-tight">
|
||||
检测到图片的 data URI，请使用「图像」选项卡进行解码。
|
||||
</span>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={onSwitchToImageMode}
|
||||
className="h-7 rounded-md text-xs font-bold text-primary hover:text-primary hover:bg-primary/20 dark:hover:bg-primary/10 px-2.5"
|
||||
>
|
||||
切换到图像模式
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{output && (
|
||||
<div className="p-4 rounded-2xl bg-card border border-border shadow-sm flex flex-col space-y-3">
|
||||
<div className="flex justify-between items-center select-none">
|
||||
<span className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground/90">
|
||||
{outputLabel}
|
||||
</span>
|
||||
<CopyButton
|
||||
text={output}
|
||||
className="h-6 px-2 rounded-md border text-[10px] font-bold"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<TextInputArea
|
||||
readOnly
|
||||
value={output.length > 2000 ? `${output.substring(0, 2000)}...` : output}
|
||||
showClear={false}
|
||||
minRows={4}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,8 +1,7 @@
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
import { useStorageState } from '@/utils/useStorageState';
|
||||
import type { Base64ConverterPageMode } from '@/types/storage';
|
||||
import TextMode from './TextMode';
|
||||
import Base64ConverterSection from './Base64ConverterSection';
|
||||
import TextMode from './components/TextMode';
|
||||
import Base64ConverterSection from './components/Base64ConverterSection';
|
||||
import SwitchButtonGroup from '@/components/SwitchButtonGroup';
|
||||
|
||||
const VALID_PAGE_MODES: readonly Base64ConverterPageMode[] = ['text', 'file', 'image'];
|
||||
@@ -12,7 +11,6 @@ const isValidPageMode = (val: unknown): val is Base64ConverterPageMode =>
|
||||
type PageMode = Base64ConverterPageMode;
|
||||
|
||||
export default function Index() {
|
||||
const { t } = useI18n('base64Converter');
|
||||
const [pageMode, setPageMode] = useStorageState(
|
||||
'base64Converter/pageMode',
|
||||
'text',
|
||||
@@ -24,9 +22,9 @@ export default function Index() {
|
||||
<SwitchButtonGroup
|
||||
value={pageMode}
|
||||
options={[
|
||||
{ value: 'text', label: t('base64Converter:textMode') },
|
||||
{ value: 'file', label: t('base64Converter:fileMode') },
|
||||
{ value: 'image', label: t('base64Converter:imageMode') },
|
||||
{ value: 'text', label: '文本' },
|
||||
{ value: 'file', label: '文件' },
|
||||
{ value: 'image', label: '图像' },
|
||||
]}
|
||||
onChange={(value: PageMode) => setPageMode(value)}
|
||||
size="small"
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
import type { FileToBase64Result } from '@/utils/base64Converter';
|
||||
import {
|
||||
base64ToBlob,
|
||||
@@ -21,8 +20,6 @@ interface UseBase64ConverterProps {
|
||||
}
|
||||
|
||||
export function useBase64Converter({ mode }: UseBase64ConverterProps) {
|
||||
const { t } = useI18n('base64Converter');
|
||||
|
||||
const [result, setResult] = useState<FileToBase64Result | null>(null);
|
||||
const [info, setInfo] = useState<FileInfo | null>(null);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
@@ -62,7 +59,7 @@ export function useBase64Converter({ mode }: UseBase64ConverterProps) {
|
||||
setInfo(null);
|
||||
|
||||
if (!isFileSizeValid(file.size)) {
|
||||
setEncodeError(t('fileSizeExceeded', { max: `${MAX_FILE_SIZE / 1024 / 1024} MB` }));
|
||||
setEncodeError(`文件大小超出限制（最大 ${MAX_FILE_SIZE / 1024 / 1024} MB）`);
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -71,7 +68,7 @@ export function useBase64Converter({ mode }: UseBase64ConverterProps) {
|
||||
!isSupportedImageType(file.type) &&
|
||||
!isSupportedImageExtension(file.name)
|
||||
) {
|
||||
setEncodeError(t('unsupportedImageType'));
|
||||
setEncodeError('不支持的图像格式');
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -87,25 +84,16 @@ export function useBase64Converter({ mode }: UseBase64ConverterProps) {
|
||||
if (!cancelRef.current) setResult(res);
|
||||
} catch (e) {
|
||||
if (!cancelRef.current) {
|
||||
setEncodeError(e instanceof Error ? e.message : t('conversionFailed'));
|
||||
setEncodeError(e instanceof Error ? e.message : '转换失败');
|
||||
}
|
||||
} finally {
|
||||
if (!cancelRef.current) setIsLoading(false);
|
||||
}
|
||||
},
|
||||
[mode, t],
|
||||
[mode],
|
||||
);
|
||||
|
||||
const safeFileSelect = useCallback(
|
||||
(file: File) => {
|
||||
handleFileSelect(file).catch((err) => {
|
||||
console.error(`Base64 [${mode}] pipeline crash:`, err);
|
||||
});
|
||||
},
|
||||
[handleFileSelect, mode],
|
||||
);
|
||||
|
||||
const decodePipeline = useMemo(() => {
|
||||
const decodeResult = useMemo(() => {
|
||||
const cleanedInput = debouncedDecodeInput.replace(/^data:image\/[a-z+]+;base64,/i, '').trim();
|
||||
if (!cleanedInput) return { decoded: null, error: null };
|
||||
|
||||
@@ -116,13 +104,13 @@ export function useBase64Converter({ mode }: UseBase64ConverterProps) {
|
||||
const message = e instanceof Error ? e.message : '';
|
||||
return {
|
||||
decoded: null,
|
||||
error: message === 'Invalid Base64 string' ? t('invalidBase64') : t('conversionFailed'),
|
||||
error: message === 'Invalid Base64 string' ? 'Base64 字符串无效' : '转换失败',
|
||||
};
|
||||
}
|
||||
}, [debouncedDecodeInput, t]);
|
||||
}, [debouncedDecodeInput]);
|
||||
|
||||
const decoded = decodePipeline.decoded;
|
||||
const decodeError = decodePipeline.error;
|
||||
const decoded = decodeResult.decoded;
|
||||
const decodeError = decodeResult.error;
|
||||
|
||||
const decodedFileName = useMemo(() => {
|
||||
if (customFileName) return customFileName;
|
||||
@@ -147,7 +135,7 @@ export function useBase64Converter({ mode }: UseBase64ConverterProps) {
|
||||
decodedFileName,
|
||||
setCustomFileName,
|
||||
resetAll,
|
||||
safeFileSelect,
|
||||
handleFileSelect,
|
||||
maxFileSizeStr,
|
||||
};
|
||||
}
|
||||
|
||||
@@ -0,0 +1,86 @@
|
||||
import { useCallback, useEffect, useMemo, useState } from 'react';
|
||||
import { base64ToText, textToBase64 } from '@/utils/base64Converter';
|
||||
import { useContextMenuData } from '@/utils/useContextMenuData';
|
||||
|
||||
const IMAGE_DATA_URI_PATTERN = /^\s*data:image\//i;
|
||||
|
||||
const ERROR_MESSAGES: Record<string, string> = {
|
||||
'Invalid Base64 string': '无效的 Base64 字符串',
|
||||
'Input appears to be binary data (e.g. an image). Please use the Image tab instead.':
|
||||
'检测到二进制数据（如图像），请使用图像选项卡',
|
||||
};
|
||||
|
||||
export function useTextMode() {
|
||||
const [input, setInput] = useState('');
|
||||
const [debouncedInput, setDebouncedInput] = useState('');
|
||||
const [direction, setDirection] = useState<'encode' | 'decode'>('encode');
|
||||
|
||||
useEffect(() => {
|
||||
const handle = setTimeout(() => {
|
||||
setDebouncedInput(input);
|
||||
}, 200);
|
||||
return () => clearTimeout(handle);
|
||||
}, [input]);
|
||||
|
||||
const handleContextMenuData = useCallback((payload: string) => {
|
||||
setInput(payload);
|
||||
setDebouncedInput(payload);
|
||||
setDirection('decode');
|
||||
}, []);
|
||||
|
||||
useContextMenuData({ featureKey: 'base64Converter', onData: handleContextMenuData });
|
||||
|
||||
const conversion = useMemo(() => {
|
||||
const trimmed = debouncedInput.trim();
|
||||
if (!trimmed) return { output: '', error: null };
|
||||
|
||||
try {
|
||||
if (direction === 'encode') {
|
||||
const result = textToBase64(debouncedInput);
|
||||
return { output: result.output, error: null };
|
||||
}
|
||||
const decoded = base64ToText(trimmed);
|
||||
return { output: decoded, error: null };
|
||||
} catch (e) {
|
||||
const message = e instanceof Error ? e.message : '';
|
||||
return {
|
||||
output: '',
|
||||
error: ERROR_MESSAGES[message] || message || '转换失败',
|
||||
};
|
||||
}
|
||||
}, [debouncedInput, direction]);
|
||||
|
||||
const output = conversion.output;
|
||||
const error = conversion.error;
|
||||
|
||||
const placeholder =
|
||||
direction === 'encode' ? '输入需要编码为 Base64 的文本...' : '输入需要解码的 Base64 字符串...';
|
||||
const outputLabel = direction === 'encode' ? 'Base64 编码结果' : '解码文本结果';
|
||||
|
||||
const showImageHint = direction === 'decode' && IMAGE_DATA_URI_PATTERN.test(input);
|
||||
|
||||
const handleDirectionChange = (value: 'encode' | 'decode') => {
|
||||
if (value === direction) return;
|
||||
setDirection(value);
|
||||
setInput('');
|
||||
setDebouncedInput('');
|
||||
};
|
||||
|
||||
const handleClear = () => {
|
||||
setInput('');
|
||||
setDebouncedInput('');
|
||||
};
|
||||
|
||||
return {
|
||||
input,
|
||||
setInput,
|
||||
direction,
|
||||
handleDirectionChange,
|
||||
placeholder,
|
||||
output,
|
||||
outputLabel,
|
||||
error,
|
||||
showImageHint,
|
||||
handleClear,
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,49 @@
|
||||
import { describe, it, expect, vi, beforeEach } from 'vitest';
|
||||
import * as featureConfig from '@/config/features';
|
||||
import { resolveDashboardFeatures } from '../dashboardFeatures';
|
||||
|
||||
describe('resolveDashboardFeatures', () => {
|
||||
beforeEach(() => {
|
||||
vi.restoreAllMocks();
|
||||
});
|
||||
|
||||
it('应按 keys 顺序返回可见工具，并排除 dashboard', () => {
|
||||
const items = resolveDashboardFeatures(['jwt', 'timestamp'], ['dashboard', 'timestamp', 'jwt']);
|
||||
|
||||
expect(items.map((item) => item.key)).toEqual(['jwt', 'timestamp']);
|
||||
expect(items.map((item) => item.feature.label)).toEqual(['JWT 解析', '时间戳']);
|
||||
});
|
||||
|
||||
it('缺少 themeColorKey 但有 icon 的工具仍应显示', () => {
|
||||
const originalGetFeatureByKey = featureConfig.getFeatureByKey;
|
||||
vi.spyOn(featureConfig, 'getFeatureByKey').mockImplementation((key) => {
|
||||
const feature = originalGetFeatureByKey(key);
|
||||
if (key === 'timestamp' && feature) {
|
||||
return { ...feature, themeColorKey: undefined };
|
||||
}
|
||||
return feature;
|
||||
});
|
||||
|
||||
const items = resolveDashboardFeatures(['timestamp'], ['dashboard', 'timestamp']);
|
||||
|
||||
expect(items.map((item) => item.key)).toEqual(['timestamp']);
|
||||
});
|
||||
|
||||
it('应过滤不在 visiblePages 中的工具', () => {
|
||||
const items = resolveDashboardFeatures(['jwt', 'timestamp'], ['dashboard', 'timestamp']);
|
||||
|
||||
expect(items.map((item) => item.key)).toEqual(['timestamp']);
|
||||
});
|
||||
|
||||
it('visiblePages 无匹配工具时应返回空列表', () => {
|
||||
const items = resolveDashboardFeatures(['jwt', 'timestamp'], ['dashboard']);
|
||||
|
||||
expect(items).toEqual([]);
|
||||
});
|
||||
|
||||
it('应过滤缺少 icon 的工具', () => {
|
||||
const items = resolveDashboardFeatures(['dashboard', 'timestamp'], ['dashboard', 'timestamp']);
|
||||
|
||||
expect(items.map((item) => item.key)).toEqual(['timestamp']);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,95 @@
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { describe, it, expect, vi, beforeEach } from 'vitest';
|
||||
import { resolveDashboardFeatures, type DashboardFeatureItem } from '../dashboardFeatures';
|
||||
import Index from '../index';
|
||||
|
||||
const mockNavigateTo = vi.fn();
|
||||
const mockUseDashboard = vi.fn();
|
||||
|
||||
vi.mock('../useDashboard', () => ({
|
||||
useDashboard: () => mockUseDashboard(),
|
||||
}));
|
||||
|
||||
function buildFeatureItem(key: 'timestamp' | 'jwt'): DashboardFeatureItem {
|
||||
return resolveDashboardFeatures([key], [key])[0]!;
|
||||
}
|
||||
|
||||
describe('Dashboard 页面', () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
mockUseDashboard.mockReturnValue({
|
||||
visibleFeatures: [buildFeatureItem('timestamp'), buildFeatureItem('jwt')],
|
||||
recentFeatures: [],
|
||||
showRecent: false,
|
||||
navigateTo: mockNavigateTo,
|
||||
});
|
||||
});
|
||||
|
||||
it('应渲染全部工具网格', () => {
|
||||
render(<Index />);
|
||||
|
||||
expect(screen.getByText('全部工具')).toBeInTheDocument();
|
||||
expect(screen.getByRole('button', { name: '时间戳' })).toBeInTheDocument();
|
||||
expect(screen.getByRole('button', { name: 'JWT 解析' })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('点击工具卡片应触发 navigateTo', async () => {
|
||||
const user = userEvent.setup();
|
||||
render(<Index />);
|
||||
|
||||
await user.click(screen.getByRole('button', { name: '时间戳' }));
|
||||
|
||||
expect(mockNavigateTo).toHaveBeenCalledTimes(1);
|
||||
expect(mockNavigateTo).toHaveBeenCalledWith('timestamp');
|
||||
});
|
||||
|
||||
it('有最近使用数据时应显示最近使用区块', () => {
|
||||
mockUseDashboard.mockReturnValue({
|
||||
visibleFeatures: [buildFeatureItem('timestamp')],
|
||||
recentFeatures: [buildFeatureItem('jwt')],
|
||||
showRecent: true,
|
||||
navigateTo: mockNavigateTo,
|
||||
});
|
||||
|
||||
render(<Index />);
|
||||
|
||||
expect(screen.getByText('最近使用')).toBeInTheDocument();
|
||||
expect(screen.getByRole('button', { name: 'JWT 解析' })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('无最近使用数据时不应显示最近使用区块', () => {
|
||||
render(<Index />);
|
||||
|
||||
expect(screen.queryByText('最近使用')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('点击最近使用按钮应触发 navigateTo', async () => {
|
||||
const user = userEvent.setup();
|
||||
mockUseDashboard.mockReturnValue({
|
||||
visibleFeatures: [buildFeatureItem('timestamp')],
|
||||
recentFeatures: [buildFeatureItem('jwt')],
|
||||
showRecent: true,
|
||||
navigateTo: mockNavigateTo,
|
||||
});
|
||||
|
||||
render(<Index />);
|
||||
|
||||
await user.click(screen.getByRole('button', { name: 'JWT 解析' }));
|
||||
|
||||
expect(mockNavigateTo).toHaveBeenCalledWith('jwt');
|
||||
});
|
||||
|
||||
it('无可见工具时应显示空状态', () => {
|
||||
mockUseDashboard.mockReturnValue({
|
||||
visibleFeatures: [],
|
||||
recentFeatures: [],
|
||||
showRecent: false,
|
||||
navigateTo: mockNavigateTo,
|
||||
});
|
||||
|
||||
render(<Index />);
|
||||
|
||||
expect(screen.getByText('没有可用的工具')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,78 @@
|
||||
import { renderHook } from '@testing-library/react';
|
||||
import { describe, it, expect, vi, beforeEach } from 'vitest';
|
||||
import { useRouter } from '@/providers/RouterProvider';
|
||||
import { useDashboard } from '../useDashboard';
|
||||
import type { PageType } from '@/types/storage';
|
||||
|
||||
vi.mock('@/providers/RouterProvider', () => ({
|
||||
useRouter: vi.fn(),
|
||||
}));
|
||||
|
||||
const mockNavigateTo = vi.fn();
|
||||
|
||||
function mockRouterState(
|
||||
overrides: {
|
||||
visiblePages?: PageType[];
|
||||
pageOrder?: PageType[];
|
||||
recentlyUsedTools?: PageType[];
|
||||
} = {},
|
||||
) {
|
||||
vi.mocked(useRouter).mockReturnValue({
|
||||
currentPage: 'dashboard',
|
||||
visiblePages: overrides.visiblePages ?? ['dashboard', 'timestamp', 'jwt'],
|
||||
pageOrder: overrides.pageOrder ?? ['jwt', 'timestamp'],
|
||||
recentlyUsedTools: overrides.recentlyUsedTools ?? [],
|
||||
isLoaded: true,
|
||||
navigateTo: mockNavigateTo,
|
||||
goHome: vi.fn(),
|
||||
setVisiblePages: vi.fn(),
|
||||
setPageOrder: vi.fn(),
|
||||
});
|
||||
}
|
||||
|
||||
describe('useDashboard', () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
it('应透传 router 中的 navigateTo', () => {
|
||||
mockRouterState();
|
||||
|
||||
const { result } = renderHook(() => useDashboard());
|
||||
|
||||
expect(result.current.navigateTo).toBe(mockNavigateTo);
|
||||
});
|
||||
|
||||
it('recentlyUsedTools 有可见工具时应显示最近使用', () => {
|
||||
mockRouterState({
|
||||
visiblePages: ['dashboard', 'timestamp', 'jwt'],
|
||||
recentlyUsedTools: ['timestamp', 'jwt'],
|
||||
});
|
||||
|
||||
const { result } = renderHook(() => useDashboard());
|
||||
|
||||
expect(result.current.showRecent).toBe(true);
|
||||
expect(result.current.recentFeatures.map((item) => item.key)).toEqual(['timestamp', 'jwt']);
|
||||
});
|
||||
|
||||
it('recentlyUsedTools 为空时不应显示最近使用', () => {
|
||||
mockRouterState({ recentlyUsedTools: [] });
|
||||
|
||||
const { result } = renderHook(() => useDashboard());
|
||||
|
||||
expect(result.current.showRecent).toBe(false);
|
||||
expect(result.current.recentFeatures).toEqual([]);
|
||||
});
|
||||
|
||||
it('最近使用中的不可见工具应被过滤', () => {
|
||||
mockRouterState({
|
||||
visiblePages: ['dashboard', 'timestamp'],
|
||||
recentlyUsedTools: ['jwt', 'timestamp'],
|
||||
});
|
||||
|
||||
const { result } = renderHook(() => useDashboard());
|
||||
|
||||
expect(result.current.showRecent).toBe(true);
|
||||
expect(result.current.recentFeatures.map((item) => item.key)).toEqual(['timestamp']);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,34 @@
|
||||
import { getFeatureByKey, type FeatureConfig } from '@/config/features';
|
||||
import type { PageType } from '@/types/storage';
|
||||
|
||||
export type DashboardFeature = FeatureConfig & {
|
||||
icon: NonNullable<FeatureConfig['icon']>;
|
||||
};
|
||||
|
||||
export interface DashboardFeatureItem {
|
||||
key: PageType;
|
||||
feature: DashboardFeature;
|
||||
}
|
||||
|
||||
function isDashboardFeature(feature: FeatureConfig): feature is DashboardFeature {
|
||||
return feature.icon != null;
|
||||
}
|
||||
|
||||
export function resolveDashboardFeatures(
|
||||
keys: PageType[],
|
||||
visiblePages: PageType[],
|
||||
): DashboardFeatureItem[] {
|
||||
const visibleSet = new Set(visiblePages);
|
||||
const items: DashboardFeatureItem[] = [];
|
||||
|
||||
for (const key of keys) {
|
||||
if (!visibleSet.has(key)) continue;
|
||||
|
||||
const feature = getFeatureByKey(key);
|
||||
if (!feature || !isDashboardFeature(feature)) continue;
|
||||
|
||||
items.push({ key, feature });
|
||||
}
|
||||
|
||||
return items;
|
||||
}
|
||||
@@ -1,43 +1,24 @@
|
||||
import { useRouter } from '@/providers/RouterProvider';
|
||||
import { getFeatureByKey } from '@/config/features';
|
||||
import type { PageType } from '@/types/storage';
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { useDashboard } from './useDashboard';
|
||||
|
||||
export default function Index() {
|
||||
const { navigateTo, visiblePages, pageOrder, recentlyUsedTools } = useRouter();
|
||||
const { t } = useI18n(['features']);
|
||||
|
||||
const visibleSet = new Set<string>(visiblePages);
|
||||
|
||||
const visibleFeatures = pageOrder
|
||||
.filter((key) => visibleSet.has(key))
|
||||
.map((key) => ({ key, feature: getFeatureByKey(key) }))
|
||||
.filter((item) => item.feature?.themeColorKey && item.feature.icon != null);
|
||||
|
||||
const recentFeatures = recentlyUsedTools
|
||||
.filter((key) => visibleSet.has(key))
|
||||
.map((key) => ({ key, feature: getFeatureByKey(key) }))
|
||||
.filter((item) => item.feature?.themeColorKey && item.feature.icon != null);
|
||||
|
||||
const showRecent = recentFeatures.length > 0;
|
||||
const { visibleFeatures, recentFeatures, showRecent, navigateTo } = useDashboard();
|
||||
|
||||
return (
|
||||
<div className={cn('flex flex-col gap-4 p-3.5 w-full h-auto select-none')}>
|
||||
{/* 最近使用 */}
|
||||
{showRecent && (
|
||||
<div className="flex flex-col gap-2">
|
||||
<h3 className="text-xs font-semibold text-muted-foreground/80 uppercase tracking-wider">
|
||||
{t('dashboard_recentlyUsed')}
|
||||
最近使用
|
||||
</h3>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{recentFeatures.map(({ key, feature }) => {
|
||||
const IconComponent = feature!.icon!;
|
||||
const IconComponent = feature.icon;
|
||||
return (
|
||||
<button
|
||||
key={key}
|
||||
type="button"
|
||||
onClick={() => navigateTo(key as PageType)}
|
||||
onClick={() => navigateTo(key)}
|
||||
className={cn(
|
||||
'inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-medium',
|
||||
'border border-border/60 bg-card text-card-foreground',
|
||||
@@ -46,7 +27,7 @@ export default function Index() {
|
||||
)}
|
||||
>
|
||||
<IconComponent className="h-3.5 w-3.5 text-muted-foreground/70" />
|
||||
{t(feature!.labelKey)}
|
||||
{feature.label}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
@@ -54,40 +35,45 @@ export default function Index() {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 全部工具 — 紧凑 Grid */}
|
||||
<div className="flex flex-col gap-2">
|
||||
<h3 className="text-xs font-semibold text-muted-foreground/80 uppercase tracking-wider">
|
||||
{t('dashboard_allTools')}
|
||||
全部工具
|
||||
</h3>
|
||||
<div className={cn('grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6 gap-2')}>
|
||||
{visibleFeatures.map(({ key, feature }) => {
|
||||
const IconComponent = feature!.icon!;
|
||||
return (
|
||||
<button
|
||||
key={key}
|
||||
type="button"
|
||||
onClick={() => navigateTo(key as PageType)}
|
||||
className={cn(
|
||||
'group flex flex-col items-center justify-center gap-1.5',
|
||||
'py-3 px-2 rounded-xl border border-border/50 bg-card',
|
||||
'hover:bg-muted/40 hover:border-primary/30',
|
||||
'transition-colors cursor-pointer',
|
||||
)}
|
||||
>
|
||||
<IconComponent
|
||||
{visibleFeatures.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground py-4 text-center">没有可用的工具</p>
|
||||
) : (
|
||||
<div
|
||||
className={cn('grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6 gap-2')}
|
||||
>
|
||||
{visibleFeatures.map(({ key, feature }) => {
|
||||
const IconComponent = feature.icon;
|
||||
return (
|
||||
<button
|
||||
key={key}
|
||||
type="button"
|
||||
onClick={() => navigateTo(key)}
|
||||
className={cn(
|
||||
'h-5 w-5 text-muted-foreground/70',
|
||||
'group-hover:text-foreground',
|
||||
'transition-colors',
|
||||
'group flex flex-col items-center justify-center gap-1.5',
|
||||
'py-3 px-2 rounded-xl border border-border/50 bg-card',
|
||||
'hover:bg-muted/40 hover:border-primary/30',
|
||||
'transition-colors cursor-pointer',
|
||||
)}
|
||||
/>
|
||||
<span className="text-[11px] font-medium text-muted-foreground/80 group-hover:text-foreground leading-tight text-center truncate w-full transition-colors">
|
||||
{t(feature!.labelKey)}
|
||||
</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
>
|
||||
<IconComponent
|
||||
className={cn(
|
||||
'h-5 w-5 text-muted-foreground/70',
|
||||
'group-hover:text-foreground',
|
||||
'transition-colors',
|
||||
)}
|
||||
/>
|
||||
<span className="text-[11px] font-medium text-muted-foreground/80 group-hover:text-foreground leading-tight text-center truncate w-full transition-colors">
|
||||
{feature.label}
|
||||
</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -0,0 +1,29 @@
|
||||
import { useMemo } from 'react';
|
||||
import { useRouter } from '@/providers/RouterProvider';
|
||||
import type { PageType } from '@/types/storage';
|
||||
import { resolveDashboardFeatures, type DashboardFeatureItem } from './dashboardFeatures';
|
||||
|
||||
export interface UseDashboardReturn {
|
||||
visibleFeatures: DashboardFeatureItem[];
|
||||
recentFeatures: DashboardFeatureItem[];
|
||||
showRecent: boolean;
|
||||
navigateTo: (page: PageType) => void;
|
||||
}
|
||||
|
||||
export function useDashboard(): UseDashboardReturn {
|
||||
const { navigateTo, visiblePages, pageOrder, recentlyUsedTools } = useRouter();
|
||||
|
||||
const visibleFeatures = useMemo(
|
||||
() => resolveDashboardFeatures(pageOrder, visiblePages),
|
||||
[pageOrder, visiblePages],
|
||||
);
|
||||
|
||||
const recentFeatures = useMemo(
|
||||
() => resolveDashboardFeatures(recentlyUsedTools, visiblePages),
|
||||
[recentlyUsedTools, visiblePages],
|
||||
);
|
||||
|
||||
const showRecent = recentFeatures.length > 0;
|
||||
|
||||
return { visibleFeatures, recentFeatures, showRecent, navigateTo };
|
||||
}
|
||||
@@ -1,131 +0,0 @@
|
||||
import React, { useEffect, useMemo, useState } from 'react';
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
import { formatBytes } from '@/utils/format';
|
||||
import { CopyButton } from '@/components/CopyButton';
|
||||
import TextInputArea from '@/components/TextInputArea';
|
||||
import { validateJson } from '@/utils/jsonFormatter';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
export interface ConvertResult {
|
||||
output: string;
|
||||
originalBytes: number;
|
||||
outputBytes: number;
|
||||
}
|
||||
|
||||
export type ConvertFunction = (text: string) => ConvertResult;
|
||||
|
||||
interface JsonConvertSectionProps extends React.HTMLAttributes<HTMLDivElement> {
|
||||
translationPrefix: string;
|
||||
convertFunction: ConvertFunction;
|
||||
}
|
||||
|
||||
export default function JsonConvertSection({
|
||||
translationPrefix,
|
||||
convertFunction,
|
||||
className,
|
||||
...props
|
||||
}: JsonConvertSectionProps) {
|
||||
const { t } = useI18n('jsonFormat');
|
||||
|
||||
const [input, setInput] = useState('');
|
||||
const [debouncedInput, setDebouncedInput] = useState('');
|
||||
|
||||
const pk = translationPrefix;
|
||||
|
||||
// Debounce input
|
||||
useEffect(() => {
|
||||
const handle = setTimeout(() => {
|
||||
setDebouncedInput(input);
|
||||
}, 250);
|
||||
return () => clearTimeout(handle);
|
||||
}, [input]);
|
||||
|
||||
const error = useMemo(() => {
|
||||
return validateJson(debouncedInput);
|
||||
}, [debouncedInput]);
|
||||
|
||||
const conversionPipeline = useMemo(() => {
|
||||
const trimmed = debouncedInput.trim();
|
||||
if (!trimmed || error) return null;
|
||||
|
||||
try {
|
||||
return convertFunction(debouncedInput);
|
||||
} catch (e) {
|
||||
// 捕获可能从外部转换器（如 YAML.stringify）中抛出的底层异常
|
||||
return {
|
||||
isRuntimeError: true,
|
||||
errorMessage: e instanceof Error ? e.message : String(e),
|
||||
};
|
||||
}
|
||||
}, [debouncedInput, error, convertFunction]);
|
||||
|
||||
const runtimeError =
|
||||
conversionPipeline && 'isRuntimeError' in conversionPipeline
|
||||
? conversionPipeline.errorMessage
|
||||
: null;
|
||||
const result =
|
||||
conversionPipeline && !('isRuntimeError' in conversionPipeline)
|
||||
? (conversionPipeline as ConvertResult)
|
||||
: null;
|
||||
|
||||
return (
|
||||
<div className={cn('w-full flex flex-col gap-4', className)} {...props}>
|
||||
{/* 输入区 */}
|
||||
<TextInputArea
|
||||
placeholder={t(`jsonFormat:${pk}InputPlaceholder`)}
|
||||
value={input}
|
||||
onChange={setInput}
|
||||
externalError={error || runtimeError || undefined}
|
||||
showClear={true}
|
||||
allowCopy={true}
|
||||
minRows={7}
|
||||
maxRows={14}
|
||||
onClear={() => setInput('')}
|
||||
/>
|
||||
|
||||
{/* Result display */}
|
||||
{result && result.output ? (
|
||||
<div className="relative rounded-xl border border-border bg-card text-card-foreground shadow-sm overflow-hidden">
|
||||
<div className="flex h-9 items-center justify-between px-4 border-b border-border bg-muted/50 select-none">
|
||||
<div className="flex gap-4 items-center">
|
||||
<span className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground/90">
|
||||
{t(`jsonFormat:${pk}OutputLabel`)}
|
||||
</span>
|
||||
|
||||
<div className="hidden sm:flex gap-3 items-center font-mono text-[10px] text-muted-foreground/70 tabular-nums">
|
||||
<span>
|
||||
{t('jsonFormat:originalSize')}:{' '}
|
||||
<span className="font-semibold text-foreground/80">
|
||||
{formatBytes(result.originalBytes)}
|
||||
</span>
|
||||
</span>
|
||||
<span className="text-border/60">|</span>
|
||||
<span>
|
||||
{t('jsonFormat:formattedSize')}:{' '}
|
||||
<span className="font-semibold text-foreground/80">
|
||||
{formatBytes(result.outputBytes)}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<CopyButton
|
||||
text={result.output}
|
||||
className="h-6 w-6 rounded-md border text-muted-foreground"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="p-4 font-mono text-xs text-foreground/90 whitespace-pre-wrap break-all max-h-[380px] overflow-y-auto leading-relaxed select-text">
|
||||
{result.output}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="p-8 rounded-xl bg-muted/30 border border-dashed border-border/80 text-center flex flex-col items-center justify-center min-h-[120px] select-none">
|
||||
<p className="text-xs font-semibold text-muted-foreground/80 tracking-wide max-w-[240px] leading-relaxed">
|
||||
{error ? t('jsonFormat:fixErrorHint') : t(`jsonFormat:${pk}EmptyHint`)}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,163 +0,0 @@
|
||||
import { useEffect, useMemo, useState } from 'react';
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
import {
|
||||
formatJson,
|
||||
type JsonFormatOptions,
|
||||
type JsonFormatResult,
|
||||
validateJson,
|
||||
} from '@/utils/jsonFormatter';
|
||||
import { formatBytes } from '@/utils/format';
|
||||
import { CopyButton } from '@/components/CopyButton';
|
||||
import SwitchButtonGroup from '@/components/SwitchButtonGroup';
|
||||
import TextInputArea from '@/components/TextInputArea';
|
||||
import { Checkbox } from '@/components/ui/checkbox';
|
||||
import { Label } from '@/components/ui/label';
|
||||
|
||||
export default function JsonFormatSection() {
|
||||
const { t } = useI18n('jsonFormat');
|
||||
|
||||
const [input, setInput] = useState('');
|
||||
const [debouncedInput, setDebouncedInput] = useState('');
|
||||
const [indentSize, setIndentSize] = useState<number>(2);
|
||||
const [sortKeys, setSortKeys] = useState(false);
|
||||
|
||||
// Debounce input
|
||||
useEffect(() => {
|
||||
const handle = setTimeout(() => {
|
||||
setDebouncedInput(input);
|
||||
}, 250);
|
||||
return () => clearTimeout(handle);
|
||||
}, [input]);
|
||||
|
||||
const error = useMemo(() => {
|
||||
return validateJson(debouncedInput);
|
||||
}, [debouncedInput]);
|
||||
|
||||
// Real-time formatting pipeline
|
||||
const formattedPipeline = useMemo(() => {
|
||||
const trimmed = debouncedInput.trim();
|
||||
if (!trimmed || error) return null;
|
||||
|
||||
try {
|
||||
const options: JsonFormatOptions = { indentSize, sortKeys };
|
||||
return formatJson(debouncedInput, options);
|
||||
} catch (e) {
|
||||
return {
|
||||
isRuntimeError: true,
|
||||
errorMessage: e instanceof SyntaxError ? e.message : String(e),
|
||||
};
|
||||
}
|
||||
}, [debouncedInput, error, indentSize, sortKeys]);
|
||||
|
||||
const runtimeError =
|
||||
formattedPipeline && 'isRuntimeError' in formattedPipeline
|
||||
? formattedPipeline.errorMessage
|
||||
: null;
|
||||
const result =
|
||||
formattedPipeline && !('isRuntimeError' in formattedPipeline)
|
||||
? (formattedPipeline as JsonFormatResult)
|
||||
: null;
|
||||
|
||||
return (
|
||||
<div className="w-full flex flex-col gap-4">
|
||||
{/* 工具控制栏 */}
|
||||
<div className="flex h-10 items-center justify-between px-1.5 bg-secondary/40 rounded-xl border border-border/60">
|
||||
<div className="flex gap-4 items-center w-full">
|
||||
{/* 缩进配置区 */}
|
||||
<div className="flex gap-2 items-center shrink-0 select-none">
|
||||
<span className="text-[10px] font-bold text-muted-foreground/90 uppercase tracking-wider">
|
||||
{t('jsonFormat:indentSize')}
|
||||
</span>
|
||||
<SwitchButtonGroup
|
||||
value={indentSize}
|
||||
onChange={(v) => setIndentSize(Number(v))}
|
||||
options={[2, 4, 6, 8].map((size) => ({ value: size, label: String(size) }))}
|
||||
size="small"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="h-4 w-px bg-border/60" />
|
||||
|
||||
{/* 键名排序区 */}
|
||||
<div
|
||||
onClick={() => setSortKeys(!sortKeys)}
|
||||
className="flex items-center gap-2 cursor-pointer select-none group py-1"
|
||||
>
|
||||
<Checkbox
|
||||
id="sort-keys-checkbox"
|
||||
checked={sortKeys}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
onCheckedChange={(checked) => setSortKeys(checked === true)}
|
||||
className="h-3.5 w-3.5 rounded border-input data-[state=checked]:bg-primary shadow-sm"
|
||||
/>
|
||||
<Label
|
||||
htmlFor="sort-keys-checkbox"
|
||||
className="text-xs font-bold text-foreground/80 cursor-pointer tracking-tight group-hover:text-foreground"
|
||||
>
|
||||
{t('jsonFormat:sortKeys')}
|
||||
</Label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 满血版输入终端 */}
|
||||
<TextInputArea
|
||||
placeholder={t('jsonFormat:inputPlaceholder')}
|
||||
value={input}
|
||||
onChange={setInput}
|
||||
externalError={error || runtimeError || undefined}
|
||||
showClear={true}
|
||||
allowCopy={true}
|
||||
minRows={8}
|
||||
maxRows={15}
|
||||
onClear={() => setInput('')}
|
||||
/>
|
||||
|
||||
{/* 格式化结果流面板展示 */}
|
||||
{result && result.formatted ? (
|
||||
<div className="relative rounded-xl border border-border bg-card text-card-foreground shadow-sm overflow-hidden">
|
||||
{/* 结果栏头部 */}
|
||||
<div className="flex h-9 items-center justify-between px-4 border-b border-border bg-muted/50 select-none">
|
||||
<div className="flex gap-4 items-center">
|
||||
<span className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground/90">
|
||||
{t('jsonFormat:outputLabel')}
|
||||
</span>
|
||||
|
||||
<div className="hidden sm:flex gap-3 items-center font-mono text-[10px] text-muted-foreground/70 tabular-nums">
|
||||
<span>
|
||||
{t('jsonFormat:originalSize')}:{' '}
|
||||
<span className="font-semibold text-foreground/80">
|
||||
{formatBytes(result.originalBytes)}
|
||||
</span>
|
||||
</span>
|
||||
<span className="text-border/60">|</span>
|
||||
<span>
|
||||
{t('jsonFormat:formattedSize')}:{' '}
|
||||
<span className="font-semibold text-foreground/80">
|
||||
{formatBytes(result.formattedBytes)}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<CopyButton
|
||||
text={result.formatted}
|
||||
className="h-6 w-6 rounded-md border text-muted-foreground"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="p-4 font-mono text-xs text-foreground/90 whitespace-pre-wrap break-all max-h-[420px] overflow-y-auto leading-relaxed select-text">
|
||||
{result.formatted}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
/* 空状态指示引导区 */
|
||||
<div className="p-8 rounded-xl bg-muted/30 border border-dashed border-border/80 text-center flex flex-col items-center justify-center min-h-[120px] select-none">
|
||||
<p className="text-xs font-semibold text-muted-foreground/80 tracking-wide max-w-[240px] leading-relaxed">
|
||||
{error ? t('jsonFormat:fixErrorHint') : t('jsonFormat:emptyHint')}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import { describe, it, expect } from 'vitest';
|
||||
import Index from '../index';
|
||||
|
||||
describe('JsonTools 页面', () => {
|
||||
it('应该渲染模式切换按钮', () => {
|
||||
render(<Index />);
|
||||
expect(screen.getAllByRole('button').length).toBeGreaterThan(0);
|
||||
});
|
||||
});
|
||||
+3
-10
@@ -1,6 +1,5 @@
|
||||
import React from 'react';
|
||||
import { ChevronLeft, ChevronRight } from 'lucide-react';
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
export interface DiffNavigatorProps extends React.HTMLAttributes<HTMLDivElement> {
|
||||
@@ -19,8 +18,6 @@ export default function DiffNavigator({
|
||||
className,
|
||||
...props
|
||||
}: DiffNavigatorProps) {
|
||||
const { t } = useI18n('jsonDiff');
|
||||
|
||||
const isFirst = currentIndex <= 0;
|
||||
const isLast = currentIndex >= total - 1;
|
||||
|
||||
@@ -33,9 +30,7 @@ export default function DiffNavigator({
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<span className="text-xs font-semibold text-muted-foreground/90">
|
||||
{t('jsonDiff:noDiffs')}
|
||||
</span>
|
||||
<span className="text-xs font-semibold text-muted-foreground/90">无差异</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -48,11 +43,10 @@ export default function DiffNavigator({
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{/* 上一处差异按钮 */}
|
||||
<button
|
||||
type="button"
|
||||
disabled={isFirst}
|
||||
aria-label={t('jsonDiff:previousDiff')}
|
||||
aria-label="上一个"
|
||||
onClick={onPrev}
|
||||
className={cn(
|
||||
'p-1 rounded-md text-muted-foreground hover:bg-accent hover:text-foreground',
|
||||
@@ -68,11 +62,10 @@ export default function DiffNavigator({
|
||||
{total}
|
||||
</span>
|
||||
|
||||
{/* 下一处差异按钮 */}
|
||||
<button
|
||||
type="button"
|
||||
disabled={isLast}
|
||||
aria-label={t('jsonDiff:nextDiff')}
|
||||
aria-label="下一个"
|
||||
onClick={onNext}
|
||||
className={cn(
|
||||
'p-1 rounded-md text-muted-foreground hover:bg-accent hover:text-foreground',
|
||||
@@ -1,8 +1,7 @@
|
||||
import React from 'react';
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
import { cn } from '@/lib/utils';
|
||||
import JsonTree from './JsonTree';
|
||||
import type { DiffNode, DiffResult as DiffResultType, DiffType, ViewMode } from './types';
|
||||
import type { DiffNode, DiffResult as DiffResultType, DiffType, ViewMode } from '../types';
|
||||
|
||||
export interface DiffResultProps extends React.HTMLAttributes<HTMLDivElement> {
|
||||
result: DiffResultType;
|
||||
@@ -17,8 +16,6 @@ export default function DiffResult({
|
||||
className,
|
||||
...props
|
||||
}: DiffResultProps) {
|
||||
const { t } = useI18n('jsonDiff');
|
||||
|
||||
if (viewMode === 'sideBySide') {
|
||||
return (
|
||||
<div
|
||||
@@ -26,11 +23,11 @@ export default function DiffResult({
|
||||
{...props}
|
||||
>
|
||||
<div className="flex-1 min-w-0">
|
||||
<SectionLabel text={t('jsonDiff:leftLabel')} />
|
||||
<SectionLabel text="原始 JSON" />
|
||||
<JsonTree node={result.root} side="left" activePath={activePath} />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<SectionLabel text={t('jsonDiff:rightLabel')} />
|
||||
<SectionLabel text="目标 JSON" />
|
||||
<JsonTree node={result.root} side="right" activePath={activePath} />
|
||||
</div>
|
||||
</div>
|
||||
@@ -136,7 +133,6 @@ const UnifiedView = ({ node, depth, activePath }: UnifiedViewProps) => {
|
||||
);
|
||||
}
|
||||
|
||||
// 容器节点整块渲染处理
|
||||
if (node.type === 'added') {
|
||||
return (
|
||||
<UnifiedRow
|
||||
@@ -0,0 +1,103 @@
|
||||
import React, { useEffect, useMemo, useState } from 'react';
|
||||
import EmptyPlaceholder from '@/components/EmptyPlaceholder';
|
||||
import TextInputArea from '@/components/TextInputArea';
|
||||
import JsonResultPanel from './JsonResultPanel';
|
||||
import { validateJson } from '@/utils/jsonFormatter';
|
||||
import { cn } from '@/lib/utils';
|
||||
import type { ConvertFunction, ConvertResult } from '../types';
|
||||
|
||||
const CONVERT_LABELS: Record<
|
||||
string,
|
||||
{ inputPlaceholder: string; outputLabel: string; emptyHint: string }
|
||||
> = {
|
||||
yaml: {
|
||||
inputPlaceholder: '输入需要转换的 JSON...',
|
||||
outputLabel: 'YAML 结果',
|
||||
emptyHint: '输入 JSON 后点击转换',
|
||||
},
|
||||
toml: {
|
||||
inputPlaceholder: '输入需要转换的 JSON...',
|
||||
outputLabel: 'TOML 结果',
|
||||
emptyHint: '输入 JSON 后点击转换',
|
||||
},
|
||||
minify: {
|
||||
inputPlaceholder: '输入需要压缩的 JSON...',
|
||||
outputLabel: '压缩结果',
|
||||
emptyHint: '输入 JSON 后点击压缩',
|
||||
},
|
||||
};
|
||||
|
||||
interface JsonConvertSectionProps extends React.HTMLAttributes<HTMLDivElement> {
|
||||
mode: string;
|
||||
convertFunction: ConvertFunction;
|
||||
}
|
||||
|
||||
export default function JsonConvertSection({
|
||||
mode,
|
||||
convertFunction,
|
||||
className,
|
||||
...props
|
||||
}: JsonConvertSectionProps) {
|
||||
const [input, setInput] = useState('');
|
||||
const [debouncedInput, setDebouncedInput] = useState('');
|
||||
|
||||
const labels = CONVERT_LABELS[mode] ?? CONVERT_LABELS.yaml;
|
||||
|
||||
useEffect(() => {
|
||||
const handle = setTimeout(() => {
|
||||
setDebouncedInput(input);
|
||||
}, 250);
|
||||
return () => clearTimeout(handle);
|
||||
}, [input]);
|
||||
|
||||
const error = useMemo(() => {
|
||||
return validateJson(debouncedInput);
|
||||
}, [debouncedInput]);
|
||||
|
||||
const { result, runtimeError } = useMemo((): {
|
||||
result: ConvertResult | null;
|
||||
runtimeError: string | null;
|
||||
} => {
|
||||
const trimmed = debouncedInput.trim();
|
||||
if (!trimmed || error) return { result: null, runtimeError: null };
|
||||
|
||||
try {
|
||||
return { result: convertFunction(debouncedInput), runtimeError: null };
|
||||
} catch (e) {
|
||||
return {
|
||||
result: null,
|
||||
runtimeError: e instanceof Error ? e.message : String(e),
|
||||
};
|
||||
}
|
||||
}, [debouncedInput, error, convertFunction]);
|
||||
|
||||
return (
|
||||
<div className={cn('w-full flex flex-col gap-4', className)} {...props}>
|
||||
<TextInputArea
|
||||
placeholder={labels.inputPlaceholder}
|
||||
value={input}
|
||||
onChange={setInput}
|
||||
externalError={error || runtimeError || undefined}
|
||||
showClear={true}
|
||||
allowCopy={true}
|
||||
minRows={7}
|
||||
maxRows={14}
|
||||
onClear={() => setInput('')}
|
||||
/>
|
||||
|
||||
{result?.output ? (
|
||||
<JsonResultPanel
|
||||
title={labels.outputLabel}
|
||||
content={result.output}
|
||||
originalBytes={result.originalBytes}
|
||||
outputBytes={result.outputBytes}
|
||||
maxHeight="380px"
|
||||
/>
|
||||
) : (
|
||||
<EmptyPlaceholder>
|
||||
{error ? '请修正上方 JSON 的语法错误以开启实时流式格式化' : labels.emptyHint}
|
||||
</EmptyPlaceholder>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,115 @@
|
||||
import { useEffect, useMemo, useState } from 'react';
|
||||
import {
|
||||
formatJson,
|
||||
type JsonFormatOptions,
|
||||
type JsonFormatResult,
|
||||
validateJson,
|
||||
} from '@/utils/jsonFormatter';
|
||||
import EmptyPlaceholder from '@/components/EmptyPlaceholder';
|
||||
import SwitchButtonGroup from '@/components/SwitchButtonGroup';
|
||||
import TextInputArea from '@/components/TextInputArea';
|
||||
import JsonResultPanel from './JsonResultPanel';
|
||||
import { Checkbox } from '@/components/ui/checkbox';
|
||||
import { Label } from '@/components/ui/label';
|
||||
|
||||
export default function JsonFormatSection() {
|
||||
const [input, setInput] = useState('');
|
||||
const [debouncedInput, setDebouncedInput] = useState('');
|
||||
const [indentSize, setIndentSize] = useState<number>(2);
|
||||
const [sortKeys, setSortKeys] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const handle = setTimeout(() => {
|
||||
setDebouncedInput(input);
|
||||
}, 250);
|
||||
return () => clearTimeout(handle);
|
||||
}, [input]);
|
||||
|
||||
const error = useMemo(() => {
|
||||
return validateJson(debouncedInput);
|
||||
}, [debouncedInput]);
|
||||
|
||||
const { result, runtimeError } = useMemo((): {
|
||||
result: JsonFormatResult | null;
|
||||
runtimeError: string | null;
|
||||
} => {
|
||||
const trimmed = debouncedInput.trim();
|
||||
if (!trimmed || error) return { result: null, runtimeError: null };
|
||||
|
||||
try {
|
||||
const options: JsonFormatOptions = { indentSize, sortKeys };
|
||||
return { result: formatJson(debouncedInput, options), runtimeError: null };
|
||||
} catch (e) {
|
||||
return {
|
||||
result: null,
|
||||
runtimeError: e instanceof SyntaxError ? e.message : String(e),
|
||||
};
|
||||
}
|
||||
}, [debouncedInput, error, indentSize, sortKeys]);
|
||||
|
||||
return (
|
||||
<div className="w-full flex flex-col gap-4">
|
||||
<div className="flex h-10 items-center justify-between px-1.5 bg-secondary/40 rounded-xl border border-border/60">
|
||||
<div className="flex gap-4 items-center w-full">
|
||||
<div className="flex gap-2 items-center shrink-0 select-none">
|
||||
<span className="text-[10px] font-bold text-muted-foreground/90 uppercase tracking-wider">
|
||||
缩进
|
||||
</span>
|
||||
<SwitchButtonGroup
|
||||
value={indentSize}
|
||||
onChange={(v) => setIndentSize(Number(v))}
|
||||
options={[2, 4, 6, 8].map((size) => ({ value: size, label: String(size) }))}
|
||||
size="small"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="h-4 w-px bg-border/60" />
|
||||
|
||||
<div
|
||||
onClick={() => setSortKeys(!sortKeys)}
|
||||
className="flex items-center gap-2 cursor-pointer select-none group py-1"
|
||||
>
|
||||
<Checkbox
|
||||
id="sort-keys-checkbox"
|
||||
checked={sortKeys}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
onCheckedChange={(checked) => setSortKeys(checked === true)}
|
||||
className="h-3.5 w-3.5 rounded border-input data-[state=checked]:bg-primary shadow-sm"
|
||||
/>
|
||||
<Label
|
||||
htmlFor="sort-keys-checkbox"
|
||||
className="text-xs font-bold text-foreground/80 cursor-pointer tracking-tight group-hover:text-foreground"
|
||||
>
|
||||
键名排序
|
||||
</Label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<TextInputArea
|
||||
placeholder="输入需要格式化的 JSON..."
|
||||
value={input}
|
||||
onChange={setInput}
|
||||
externalError={error || runtimeError || undefined}
|
||||
showClear={true}
|
||||
allowCopy={true}
|
||||
minRows={8}
|
||||
maxRows={15}
|
||||
onClear={() => setInput('')}
|
||||
/>
|
||||
|
||||
{result?.formatted ? (
|
||||
<JsonResultPanel
|
||||
title="格式化结果"
|
||||
content={result.formatted}
|
||||
originalBytes={result.originalBytes}
|
||||
outputBytes={result.formattedBytes}
|
||||
/>
|
||||
) : (
|
||||
<EmptyPlaceholder>
|
||||
{error ? '请修正上方 JSON 的语法错误以开启实时流式格式化' : '输入 JSON 后点击格式化'}
|
||||
</EmptyPlaceholder>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,53 @@
|
||||
import { formatBytes } from '@/utils/format';
|
||||
import { CopyButton } from '@/components/CopyButton';
|
||||
|
||||
export interface JsonResultPanelProps {
|
||||
title: string;
|
||||
content: string;
|
||||
originalBytes: number;
|
||||
outputBytes: number;
|
||||
outputSizeLabel?: string;
|
||||
maxHeight?: string;
|
||||
}
|
||||
|
||||
export default function JsonResultPanel({
|
||||
title,
|
||||
content,
|
||||
originalBytes,
|
||||
outputBytes,
|
||||
outputSizeLabel = '格式化后大小',
|
||||
maxHeight = '420px',
|
||||
}: JsonResultPanelProps) {
|
||||
return (
|
||||
<div className="relative rounded-xl border border-border bg-card text-card-foreground shadow-sm overflow-hidden">
|
||||
<div className="flex h-9 items-center justify-between px-4 border-b border-border bg-muted/50 select-none">
|
||||
<div className="flex gap-4 items-center">
|
||||
<span className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground/90">
|
||||
{title}
|
||||
</span>
|
||||
|
||||
<div className="hidden sm:flex gap-3 items-center font-mono text-[10px] text-muted-foreground/70 tabular-nums">
|
||||
<span>
|
||||
原始大小:{' '}
|
||||
<span className="font-semibold text-foreground/80">{formatBytes(originalBytes)}</span>
|
||||
</span>
|
||||
<span className="text-border/60">|</span>
|
||||
<span>
|
||||
{outputSizeLabel}:{' '}
|
||||
<span className="font-semibold text-foreground/80">{formatBytes(outputBytes)}</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<CopyButton text={content} className="h-6 w-6 rounded-md border text-muted-foreground" />
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="p-4 font-mono text-xs text-foreground/90 whitespace-pre-wrap break-all overflow-y-auto leading-relaxed select-text"
|
||||
style={{ maxHeight }}
|
||||
>
|
||||
{content}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,6 +1,6 @@
|
||||
import React, { useEffect, useMemo, useRef, useState } from 'react';
|
||||
import { ChevronDown, ChevronRight } from 'lucide-react'; // 用正统的矢量箭头平替原生的字符 '▾' '▸'
|
||||
import type { DiffNode, DiffType } from './types';
|
||||
import { ChevronDown, ChevronRight } from 'lucide-react';
|
||||
import type { DiffNode, DiffType } from '../types';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
export type TreeSide = 'left' | 'right';
|
||||
@@ -82,14 +82,12 @@ const NodeRow = React.memo(
|
||||
? false
|
||||
: onActivePath || depth < defaultExpandDepth;
|
||||
|
||||
// 当激活路径精准定位到本行时，平滑滚动至容器中心
|
||||
useEffect(() => {
|
||||
if (activePath === node.path) {
|
||||
rowRef.current?.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
||||
}
|
||||
}, [activePath, node.path]);
|
||||
|
||||
// 占位空行分支：必须加 h-[22px] 锁定绝对等高，防止两侧文本高度塌陷发生高低错位
|
||||
if (!shouldRenderOnSide(node.type, side)) {
|
||||
return (
|
||||
<div
|
||||
@@ -124,7 +122,6 @@ const NodeRow = React.memo(
|
||||
|
||||
return (
|
||||
<div ref={rowRef} className="w-full flex flex-col">
|
||||
{/* 大容器开端行 */}
|
||||
<div
|
||||
onClick={() => setOverride(expanded ? 'closed' : 'open')}
|
||||
className={cn(
|
||||
@@ -135,7 +132,6 @@ const NodeRow = React.memo(
|
||||
)}
|
||||
style={indentStyle}
|
||||
>
|
||||
{/* 折叠小箭头：升级为精巧的 Lucide SVG 矢量微动效 */}
|
||||
<span className="w-3.5 h-3.5 flex items-center justify-center text-muted-foreground/80 shrink-0">
|
||||
{expanded ? (
|
||||
<ChevronDown className="h-3 w-3" />
|
||||
@@ -164,7 +160,6 @@ const NodeRow = React.memo(
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 容器子节点递归区 */}
|
||||
{expanded && (
|
||||
<div className={indentClass}>
|
||||
{node.children.map((child, idx) => (
|
||||
@@ -181,7 +176,6 @@ const NodeRow = React.memo(
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 大容器收尾行 */}
|
||||
{expanded && (
|
||||
<div
|
||||
className="text-muted-foreground/80 font-mono text-xs py-0.5 h-[22px] leading-relaxed"
|
||||
@@ -195,7 +189,6 @@ const NodeRow = React.memo(
|
||||
);
|
||||
}
|
||||
|
||||
// 叶子数据行分支
|
||||
return (
|
||||
<div
|
||||
ref={rowRef}
|
||||
@@ -207,7 +200,7 @@ const NodeRow = React.memo(
|
||||
)}
|
||||
style={indentStyle}
|
||||
>
|
||||
<span className="w-3.5 shrink-0" /> {/* 与上方的折叠键轴线严格对齐 */}
|
||||
<span className="w-3.5 shrink-0" />
|
||||
{!isRoot && (
|
||||
<span className="text-foreground/90 font-bold tracking-tight">{node.key}:</span>
|
||||
)}
|
||||
@@ -231,7 +224,6 @@ export default function JsonTree({
|
||||
...props
|
||||
}: JsonTreeProps) {
|
||||
return (
|
||||
/* 最外层承载器：统一收拢至标准的 bg-card 与等宽 tabular-nums 控制轴 */
|
||||
<div
|
||||
className={cn(
|
||||
'rounded-xl border border-border bg-card text-card-foreground font-mono text-xs shadow-sm overflow-x-auto min-h-[200px] max-h-[520px] overflow-y-auto p-2.5 tabular-nums select-text',
|
||||
@@ -1,10 +1,10 @@
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
import JsonDiffInput from './JsonDiffInput';
|
||||
import DiffResult from './DiffResult';
|
||||
import DiffNavigator from './DiffNavigator';
|
||||
import JsonFormatSection from './JsonFormatSection';
|
||||
import JsonConvertSection from './JsonConvertSection';
|
||||
import JsonDiffInput from './components/JsonDiffInput';
|
||||
import DiffResult from './components/DiffResult';
|
||||
import DiffNavigator from './components/DiffNavigator';
|
||||
import JsonFormatSection from './components/JsonFormatSection';
|
||||
import JsonConvertSection from './components/JsonConvertSection';
|
||||
import SwitchButtonGroup from '@/components/SwitchButtonGroup';
|
||||
import EmptyPlaceholder from '@/components/EmptyPlaceholder';
|
||||
import { useJsonTools } from './useJsonTools';
|
||||
import type { JsonToolsPageMode } from '@/types/storage';
|
||||
import type { ViewMode } from './types';
|
||||
@@ -12,7 +12,6 @@ import type { ViewMode } from './types';
|
||||
type PageMode = JsonToolsPageMode;
|
||||
|
||||
export default function Index() {
|
||||
const { t } = useI18n(['jsonDiff', 'jsonFormat']);
|
||||
const {
|
||||
pageMode,
|
||||
setPageMode,
|
||||
@@ -41,11 +40,11 @@ export default function Index() {
|
||||
value={pageMode}
|
||||
onChange={(v: PageMode) => setPageMode(v)}
|
||||
options={[
|
||||
{ value: 'diff', label: t('jsonFormat:diffMode') },
|
||||
{ value: 'format', label: t('jsonFormat:formatMode') },
|
||||
{ value: 'yaml', label: t('jsonFormat:yamlMode') },
|
||||
{ value: 'toml', label: t('jsonFormat:tomlMode') },
|
||||
{ value: 'minify', label: t('jsonFormat:minifyMode') },
|
||||
{ value: 'diff', label: '差异比较' },
|
||||
{ value: 'format', label: '格式化' },
|
||||
{ value: 'yaml', label: 'YAML' },
|
||||
{ value: 'toml', label: 'TOML' },
|
||||
{ value: 'minify', label: '压缩' },
|
||||
]}
|
||||
size="small"
|
||||
className="w-full sm:w-auto"
|
||||
@@ -58,8 +57,8 @@ export default function Index() {
|
||||
value={viewMode}
|
||||
onChange={(v: ViewMode) => setViewMode(v)}
|
||||
options={[
|
||||
{ value: 'sideBySide', label: t('jsonDiff:sideBySideMode') },
|
||||
{ value: 'unified', label: t('jsonDiff:unifiedMode') },
|
||||
{ value: 'sideBySide', label: '并排' },
|
||||
{ value: 'unified', label: '统一' },
|
||||
]}
|
||||
size="small"
|
||||
/>
|
||||
@@ -67,16 +66,16 @@ export default function Index() {
|
||||
|
||||
<div className="flex flex-col md:flex-row gap-4 w-full items-stretch">
|
||||
<JsonDiffInput
|
||||
label={t('jsonDiff:leftLabel')}
|
||||
placeholder={t('jsonDiff:leftPlaceholder')}
|
||||
label="原始 JSON"
|
||||
placeholder="输入原始 JSON..."
|
||||
value={leftInput}
|
||||
onChange={setLeftInput}
|
||||
error={leftError}
|
||||
minRows={9}
|
||||
/>
|
||||
<JsonDiffInput
|
||||
label={t('jsonDiff:rightLabel')}
|
||||
placeholder={t('jsonDiff:rightPlaceholder')}
|
||||
label="目标 JSON"
|
||||
placeholder="输入目标 JSON..."
|
||||
value={rightInput}
|
||||
onChange={setRightInput}
|
||||
error={rightError}
|
||||
@@ -97,21 +96,21 @@ export default function Index() {
|
||||
<DiffResult result={diffResult} viewMode={viewMode} activePath={activePath} />
|
||||
</div>
|
||||
) : (
|
||||
<div className="p-8 rounded-xl bg-muted/30 border border-dashed border-border/80 text-center flex flex-col items-center justify-center min-h-[140px]">
|
||||
<p className="text-xs font-semibold text-muted-foreground/80 tracking-wide max-w-[260px] leading-relaxed">
|
||||
{leftError || rightError ? t('jsonDiff:fixErrorHint') : t('jsonDiff:emptyHint')}
|
||||
</p>
|
||||
</div>
|
||||
<EmptyPlaceholder className="min-h-[140px]" messageClassName="max-w-[260px]">
|
||||
{leftError || rightError
|
||||
? '请修正上方 JSON 的语法错误以开启实时流式比对'
|
||||
: '输入两侧 JSON 后点击比较'}
|
||||
</EmptyPlaceholder>
|
||||
)}
|
||||
</div>
|
||||
) : pageMode === 'format' ? (
|
||||
<JsonFormatSection />
|
||||
) : pageMode === 'yaml' ? (
|
||||
<JsonConvertSection translationPrefix="yaml" convertFunction={yamlConvert} />
|
||||
<JsonConvertSection mode="yaml" convertFunction={yamlConvert} />
|
||||
) : pageMode === 'toml' ? (
|
||||
<JsonConvertSection translationPrefix="toml" convertFunction={tomlConvert} />
|
||||
<JsonConvertSection mode="toml" convertFunction={tomlConvert} />
|
||||
) : (
|
||||
<JsonConvertSection translationPrefix="minify" convertFunction={minifyConvert} />
|
||||
<JsonConvertSection mode="minify" convertFunction={minifyConvert} />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -53,3 +53,13 @@ export interface DiffResult {
|
||||
/** 差异核心总计数（等价于 diffPaths.length），注入 tabular-nums 配合渲染 */
|
||||
diffCount: number;
|
||||
}
|
||||
|
||||
/** JSON 转换结果 */
|
||||
export interface ConvertResult {
|
||||
output: string;
|
||||
originalBytes: number;
|
||||
outputBytes: number;
|
||||
}
|
||||
|
||||
/** JSON 转换函数类型 */
|
||||
export type ConvertFunction = (text: string) => ConvertResult;
|
||||
|
||||
@@ -1,19 +1,16 @@
|
||||
import { useCallback, useEffect, useMemo, useState } from 'react';
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
import { useStorageState } from '@/utils/useStorageState';
|
||||
import { diffJson } from './diffEngine';
|
||||
import { diffJson } from '@/utils/diffEngine';
|
||||
import { jsonToYaml } from '@/utils/jsonToYaml';
|
||||
import { jsonToToml } from '@/utils/jsonToToml';
|
||||
import { minifyJson } from '@/utils/jsonFormatter';
|
||||
import { isValidPageMode, tryParse } from './constants';
|
||||
import type { JsonToolsPageMode } from '@/types/storage';
|
||||
import type { ConvertFunction } from './JsonConvertSection';
|
||||
import type { ViewMode } from './types';
|
||||
import type { ConvertFunction, ViewMode } from './types';
|
||||
|
||||
export interface UseJsonToolsReturn {
|
||||
pageMode: JsonToolsPageMode;
|
||||
setPageMode: (mode: JsonToolsPageMode) => void;
|
||||
// Diff mode state
|
||||
leftInput: string;
|
||||
rightInput: string;
|
||||
setLeftInput: (val: string) => void;
|
||||
@@ -28,23 +25,19 @@ export interface UseJsonToolsReturn {
|
||||
handlePrev: () => void;
|
||||
handleNext: () => void;
|
||||
activePath: string | undefined;
|
||||
// Convert functions
|
||||
yamlConvert: ConvertFunction;
|
||||
tomlConvert: ConvertFunction;
|
||||
minifyConvert: ConvertFunction;
|
||||
}
|
||||
|
||||
export function useJsonTools(): UseJsonToolsReturn {
|
||||
const { t } = useI18n(['jsonDiff', 'jsonFormat']);
|
||||
const [pageMode, setPageMode] = useStorageState('jsonTools/pageMode', 'diff', isValidPageMode);
|
||||
|
||||
// Diff inputs
|
||||
const [leftInput, setLeftInput] = useState('');
|
||||
const [rightInput, setRightInput] = useState('');
|
||||
const [debouncedLeft, setDebouncedLeft] = useState('');
|
||||
const [debouncedRight, setDebouncedRight] = useState('');
|
||||
|
||||
// Debounce
|
||||
useEffect(() => {
|
||||
const handle = setTimeout(() => {
|
||||
setDebouncedLeft(leftInput);
|
||||
@@ -53,14 +46,13 @@ export function useJsonTools(): UseJsonToolsReturn {
|
||||
return () => clearTimeout(handle);
|
||||
}, [leftInput, rightInput]);
|
||||
|
||||
// Parse debounced inputs
|
||||
const parseState = useMemo(() => {
|
||||
const invalidMsg = t('jsonDiff:invalidJson');
|
||||
const invalidMsg = '无效的 JSON 格式';
|
||||
return {
|
||||
left: tryParse(debouncedLeft, invalidMsg),
|
||||
right: tryParse(debouncedRight, invalidMsg),
|
||||
};
|
||||
}, [debouncedLeft, debouncedRight, t]);
|
||||
}, [debouncedLeft, debouncedRight]);
|
||||
|
||||
const leftError = parseState.left.error;
|
||||
const rightError = parseState.right.error;
|
||||
@@ -68,7 +60,6 @@ export function useJsonTools(): UseJsonToolsReturn {
|
||||
const [viewMode, setViewMode] = useState<ViewMode>('sideBySide');
|
||||
const [currentDiffIndex, setCurrentDiffIndex] = useState(0);
|
||||
|
||||
// Real-time diff computation
|
||||
const diffResult = useMemo(() => {
|
||||
const { left, right } = parseState;
|
||||
if (left.error || right.error || debouncedLeft.trim() === '' || debouncedRight.trim() === '') {
|
||||
@@ -91,7 +82,6 @@ export function useJsonTools(): UseJsonToolsReturn {
|
||||
|
||||
const activePath = diffResult && total > 0 ? diffResult.diffPaths[currentDiffIndex] : undefined;
|
||||
|
||||
// Convert functions
|
||||
const yamlConvert: ConvertFunction = useCallback((text: string) => {
|
||||
const r = jsonToYaml(text);
|
||||
return { output: r.output, originalBytes: r.originalBytes, outputBytes: r.outputBytes };
|
||||
|
||||
@@ -1,38 +0,0 @@
|
||||
import { CopyButton } from '@/components/CopyButton';
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
import { stringifyJson } from '@/utils/jwt';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
interface JwtSectionProps {
|
||||
title: string;
|
||||
content: unknown;
|
||||
colorClass: string;
|
||||
bgClass: string;
|
||||
borderClass: string;
|
||||
}
|
||||
|
||||
export default function JwtSection({
|
||||
title,
|
||||
content,
|
||||
colorClass,
|
||||
bgClass,
|
||||
borderClass,
|
||||
}: JwtSectionProps) {
|
||||
const { t } = useI18n('jwt');
|
||||
return (
|
||||
<div className={cn('p-4 rounded-xl border border-solid', bgClass, borderClass)}>
|
||||
<div className="flex justify-between items-center mb-2 select-none">
|
||||
<span className={cn('text-xs font-bold tracking-wider uppercase', colorClass)}>
|
||||
{title}
|
||||
</span>
|
||||
<CopyButton
|
||||
text={JSON.stringify(content)}
|
||||
className="h-6 w-6 rounded-md border text-muted-foreground"
|
||||
/>
|
||||
</div>
|
||||
<pre className="m-0 p-3 bg-muted/30 dark:bg-muted/10 rounded-lg text-xs font-mono overflow-x-auto whitespace-pre-wrap break-all border border-border/50 text-foreground/90 leading-relaxed select-text">
|
||||
{content ? stringifyJson(content) : t('jwt:invalidFormat')}
|
||||
</pre>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
import { CopyButton } from '@/components/CopyButton';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
interface JwtCopyBlockProps {
|
||||
title: string;
|
||||
copyText: string;
|
||||
titleClassName?: string;
|
||||
containerClassName?: string;
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
export default function JwtCopyBlock({
|
||||
title,
|
||||
copyText,
|
||||
titleClassName,
|
||||
containerClassName,
|
||||
children,
|
||||
}: JwtCopyBlockProps) {
|
||||
return (
|
||||
<div className={cn('p-4 rounded-xl border shadow-sm', containerClassName)}>
|
||||
<div className="flex justify-between items-center mb-2 select-none">
|
||||
<span className={cn('text-xs font-bold tracking-wider uppercase', titleClassName)}>
|
||||
{title}
|
||||
</span>
|
||||
<CopyButton text={copyText} className="h-6 w-6 rounded-md border text-muted-foreground" />
|
||||
</div>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,49 @@
|
||||
import { stringifyJson } from '@/utils/jwt';
|
||||
import type { JwtResult } from '@/utils/jwt';
|
||||
import { cn } from '@/lib/utils';
|
||||
import {
|
||||
JWT_JSON_CONTENT_CLASS,
|
||||
JWT_SECTION_CONFIG,
|
||||
JWT_SIGNATURE_SECTION,
|
||||
JWT_TEXT_CONTENT_CLASS,
|
||||
} from '../constants';
|
||||
import JwtCopyBlock from './JwtCopyBlock';
|
||||
|
||||
interface JwtResultViewProps {
|
||||
result: JwtResult;
|
||||
}
|
||||
|
||||
export default function JwtResultView({ result }: JwtResultViewProps) {
|
||||
return (
|
||||
<div className="flex flex-col gap-4">
|
||||
{JWT_SECTION_CONFIG.map(({ contentKey, title, colorClass, bgClass, borderClass }) => {
|
||||
const content = result[contentKey];
|
||||
|
||||
return (
|
||||
<JwtCopyBlock
|
||||
key={contentKey}
|
||||
title={title}
|
||||
copyText={JSON.stringify(content)}
|
||||
titleClassName={colorClass}
|
||||
containerClassName={cn('border-solid', bgClass, borderClass)}
|
||||
>
|
||||
<pre className={JWT_JSON_CONTENT_CLASS}>
|
||||
{content ? stringifyJson(content) : '无法解析'}
|
||||
</pre>
|
||||
</JwtCopyBlock>
|
||||
);
|
||||
})}
|
||||
|
||||
<JwtCopyBlock
|
||||
title={JWT_SIGNATURE_SECTION.title}
|
||||
copyText={result.signature || ''}
|
||||
titleClassName={JWT_SIGNATURE_SECTION.titleClassName}
|
||||
containerClassName={JWT_SIGNATURE_SECTION.containerClassName}
|
||||
>
|
||||
<span className={JWT_TEXT_CONTENT_CLASS}>
|
||||
{result.signature || JWT_SIGNATURE_SECTION.emptyLabel}
|
||||
</span>
|
||||
</JwtCopyBlock>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,41 @@
|
||||
export const JWT_INPUT_PLACEHOLDER = '在此粘贴 JWT 令牌 (Encoded JWT)...';
|
||||
|
||||
export type JwtSectionContentKey = 'header' | 'payload';
|
||||
|
||||
export interface JwtSectionConfig {
|
||||
contentKey: JwtSectionContentKey;
|
||||
title: string;
|
||||
colorClass: string;
|
||||
borderClass: string;
|
||||
bgClass: string;
|
||||
}
|
||||
|
||||
export const JWT_SECTION_CONFIG: JwtSectionConfig[] = [
|
||||
{
|
||||
contentKey: 'header',
|
||||
title: 'HEADER: 算法 & 令牌类型',
|
||||
colorClass: 'text-[#fb015b] dark:text-rose-400',
|
||||
borderClass: 'border-[#fb015b]/20 dark:border-rose-500/20',
|
||||
bgClass: 'bg-[#fb015b]/5 dark:bg-rose-500/5',
|
||||
},
|
||||
{
|
||||
contentKey: 'payload',
|
||||
title: 'PAYLOAD: 数据',
|
||||
colorClass: 'text-[#a03aff] dark:text-purple-400',
|
||||
borderClass: 'border-[#a03aff]/20 dark:border-purple-500/20',
|
||||
bgClass: 'bg-[#a03aff]/5 dark:bg-purple-500/5',
|
||||
},
|
||||
];
|
||||
|
||||
export const JWT_SIGNATURE_SECTION = {
|
||||
title: '签名',
|
||||
titleClassName: 'text-muted-foreground/90',
|
||||
containerClassName: 'border border-border bg-secondary/40',
|
||||
emptyLabel: '无签名',
|
||||
} as const;
|
||||
|
||||
export const JWT_JSON_CONTENT_CLASS =
|
||||
'm-0 p-3 bg-muted/30 dark:bg-muted/10 rounded-lg text-xs font-mono overflow-x-auto whitespace-pre-wrap break-all border border-border/50 text-foreground/90 leading-relaxed select-text';
|
||||
|
||||
export const JWT_TEXT_CONTENT_CLASS =
|
||||
'block text-xs font-mono break-all text-foreground/80 bg-muted/30 dark:bg-muted/10 p-3 rounded-lg border border-border/50 leading-relaxed select-text';
|
||||
+15
-60
@@ -1,71 +1,26 @@
|
||||
import TextInputArea from '@/components/TextInputArea';
|
||||
import { CopyButton } from '@/components/CopyButton';
|
||||
import JwtSection from './JwtSection';
|
||||
import JwtResultView from './components/JwtResultView';
|
||||
import { JWT_INPUT_PLACEHOLDER } from './constants';
|
||||
import { useJwt } from './useJwt';
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
|
||||
export default function Index() {
|
||||
const { t } = useI18n(['jwt', 'jsonFormat']);
|
||||
const { jwtInput, result, handleChange, handleClear } = useJwt();
|
||||
|
||||
return (
|
||||
<div className="p-4 w-full flex flex-col space-y-4 select-none">
|
||||
<div className="flex flex-col gap-4">
|
||||
<TextInputArea
|
||||
minRows={5}
|
||||
maxRows={10}
|
||||
placeholder={t('jwt_placeholder')}
|
||||
value={jwtInput}
|
||||
onChange={handleChange}
|
||||
allowCopy={true}
|
||||
showClear={true}
|
||||
externalError={result?.error || undefined}
|
||||
onClear={handleClear}
|
||||
/>
|
||||
<div className="p-4 w-full flex flex-col gap-4 select-none">
|
||||
<TextInputArea
|
||||
minRows={5}
|
||||
maxRows={10}
|
||||
placeholder={JWT_INPUT_PLACEHOLDER}
|
||||
value={jwtInput}
|
||||
onChange={handleChange}
|
||||
allowCopy={true}
|
||||
showClear={true}
|
||||
externalError={result?.error || undefined}
|
||||
onClear={handleClear}
|
||||
/>
|
||||
|
||||
{result && !result.error && (
|
||||
<div className="flex flex-col gap-4">
|
||||
<JwtSection
|
||||
title={t('jwt:headerTitle')}
|
||||
content={result.header}
|
||||
colorClass="text-[#fb015b] dark:text-rose-400"
|
||||
borderClass="border-[#fb015b]/20 dark:border-rose-500/20"
|
||||
bgClass="bg-[#fb015b]/5 dark:bg-rose-500/5"
|
||||
/>
|
||||
|
||||
<JwtSection
|
||||
title={t('jwt:payloadTitle')}
|
||||
content={result.payload}
|
||||
colorClass="text-[#a03aff] dark:text-purple-400"
|
||||
borderClass="border-[#a03aff]/20 dark:border-purple-500/20"
|
||||
bgClass="bg-[#a03aff]/5 dark:bg-purple-500/5"
|
||||
/>
|
||||
|
||||
<div className="p-4 rounded-xl border border-border bg-secondary/40 shadow-sm">
|
||||
<div className="flex justify-between items-center mb-2">
|
||||
<span className="text-xs font-bold tracking-wider text-muted-foreground/90 uppercase">
|
||||
{t('jwt:signatureTitle')}
|
||||
</span>
|
||||
<CopyButton
|
||||
text={result.signature || ''}
|
||||
className="h-6 w-6 rounded-md border text-muted-foreground"
|
||||
/>
|
||||
</div>
|
||||
<span className="block text-xs font-mono break-all text-foreground/80 bg-muted/30 dark:bg-muted/10 p-3 rounded-lg border border-border/50 leading-relaxed select-text">
|
||||
{result.signature || t('jwt:noSignature')}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{result?.error && (
|
||||
<div className="p-6 rounded-xl bg-muted/30 border border-dashed border-border text-center">
|
||||
<p className="text-xs font-semibold text-muted-foreground/80">
|
||||
{t('jsonFormat:invalidJson')}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{result && !result.error && <JwtResultView result={result} />}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
+8
-37
@@ -1,13 +1,11 @@
|
||||
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
|
||||
import { act, fireEvent, render, screen } from '@testing-library/react';
|
||||
import ImageUploader from '@/components/ImageUploader';
|
||||
import ImageUploader from '../components/ImageUploader';
|
||||
|
||||
// 配置多端一致性常驻桩（WXT 规范）
|
||||
const storageOnChangedMock = { addListener: vi.fn(), removeListener: vi.fn() };
|
||||
(globalThis as any).chrome = { storage: { onChanged: storageOnChangedMock } };
|
||||
(globalThis as any).browser = { storage: { onChanged: storageOnChangedMock } };
|
||||
|
||||
// 模拟 URL API
|
||||
const mockCreateObjectURL = vi.fn();
|
||||
const mockRevokeObjectURL = vi.fn();
|
||||
Object.defineProperty(window.URL, 'createObjectURL', { value: mockCreateObjectURL });
|
||||
@@ -23,7 +21,6 @@ vi.mock('sonner', () => ({
|
||||
describe('ImageUploader 组件', () => {
|
||||
const mockOnFileChange = vi.fn();
|
||||
const mockOnClearFile = vi.fn();
|
||||
const mockOnPreviewUrlChange = vi.fn();
|
||||
const mockOnDraggingChange = vi.fn();
|
||||
|
||||
const defaultProps = {
|
||||
@@ -31,7 +28,6 @@ describe('ImageUploader 组件', () => {
|
||||
onFileChange: mockOnFileChange,
|
||||
onClearFile: mockOnClearFile,
|
||||
previewUrl: '',
|
||||
onPreviewUrlChange: mockOnPreviewUrlChange,
|
||||
dragging: false,
|
||||
onDraggingChange: mockOnDraggingChange,
|
||||
};
|
||||
@@ -95,7 +91,7 @@ describe('ImageUploader 组件', () => {
|
||||
});
|
||||
|
||||
describe('文件选择交互', () => {
|
||||
it('选择文件时应调用 onFileChange 和 onPreviewUrlChange', async () => {
|
||||
it('选择文件时应调用 onFileChange', async () => {
|
||||
render(<ImageUploader {...defaultProps} />);
|
||||
const input = document.getElementById('qr-code-upload') as HTMLInputElement;
|
||||
const mockFile = new File(['test'], 'test.png', { type: 'image/png' });
|
||||
@@ -105,8 +101,7 @@ describe('ImageUploader 组件', () => {
|
||||
});
|
||||
|
||||
expect(mockOnFileChange).toHaveBeenCalledWith(mockFile);
|
||||
expect(mockCreateObjectURL).toHaveBeenCalledWith(mockFile);
|
||||
expect(mockOnPreviewUrlChange).toHaveBeenCalledWith('blob:test-url');
|
||||
expect(mockOnFileChange).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -127,7 +122,7 @@ describe('ImageUploader 组件', () => {
|
||||
expect(mockOnDraggingChange).toHaveBeenCalledWith(false);
|
||||
});
|
||||
|
||||
it('放置文件时应调用 onFileChange 和 onPreviewUrlChange', () => {
|
||||
it('放置文件时应调用 onFileChange', () => {
|
||||
const { container } = render(<ImageUploader {...defaultProps} />);
|
||||
const dropzone = container.firstChild as HTMLElement;
|
||||
const mockFile = new File(['test'], 'test.png', { type: 'image/png' });
|
||||
@@ -146,6 +141,7 @@ describe('ImageUploader 组件', () => {
|
||||
|
||||
expect(mockOnDraggingChange).toHaveBeenCalledWith(false);
|
||||
expect(mockOnFileChange).toHaveBeenCalledWith(mockFile);
|
||||
expect(mockOnFileChange).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -165,37 +161,12 @@ describe('ImageUploader 组件', () => {
|
||||
});
|
||||
|
||||
describe('粘贴功能', () => {
|
||||
it('监听粘贴事件', () => {
|
||||
it('不应注册 document 粘贴事件监听（由 ParsePanel 统一处理）', () => {
|
||||
const addEventListenerSpy = vi.spyOn(document, 'addEventListener');
|
||||
render(<ImageUploader {...defaultProps} />);
|
||||
|
||||
expect(addEventListenerSpy).toHaveBeenCalledWith('paste', expect.any(Function));
|
||||
});
|
||||
|
||||
it('组件卸载时应移除粘贴事件监听', () => {
|
||||
const removeEventListenerSpy = vi.spyOn(document, 'removeEventListener');
|
||||
const { unmount } = render(<ImageUploader {...defaultProps} />);
|
||||
|
||||
unmount();
|
||||
|
||||
expect(removeEventListenerSpy).toHaveBeenCalledWith('paste', expect.any(Function));
|
||||
});
|
||||
});
|
||||
|
||||
describe('样式测试', () => {
|
||||
it('拖拽状态时应应用拖拽样式', () => {
|
||||
const { container } = render(<ImageUploader {...defaultProps} dragging={true} />);
|
||||
const dropzone = container.firstChild as HTMLElement;
|
||||
expect(dropzone).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('有文件时应应用有文件样式', () => {
|
||||
const mockFile = new File(['test'], 'test.png', { type: 'image/png' });
|
||||
const { container } = render(
|
||||
<ImageUploader {...defaultProps} selectedFile={mockFile} previewUrl="blob:test-url" />,
|
||||
);
|
||||
const dropzone = container.firstChild as HTMLElement;
|
||||
expect(dropzone).toBeInTheDocument();
|
||||
const pasteListeners = addEventListenerSpy.mock.calls.filter(([event]) => event === 'paste');
|
||||
expect(pasteListeners).toHaveLength(0);
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,151 @@
|
||||
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
|
||||
import { act, render, screen } from '@testing-library/react';
|
||||
import { toast } from 'sonner';
|
||||
import ParsePanel from '../components/ParsePanel';
|
||||
import type { QrCodeParserState } from '../types';
|
||||
|
||||
const mockHandleFileChange = vi.fn();
|
||||
const mockHandleClearFile = vi.fn();
|
||||
const mockSetParserState = vi.fn();
|
||||
|
||||
let mockParserState: QrCodeParserState = {
|
||||
selectedFile: null,
|
||||
previewUrl: '',
|
||||
dragging: false,
|
||||
decodedResult: '',
|
||||
parsing: false,
|
||||
parseError: '',
|
||||
};
|
||||
|
||||
vi.mock('sonner', () => ({
|
||||
toast: {
|
||||
success: vi.fn(),
|
||||
error: vi.fn(),
|
||||
},
|
||||
}));
|
||||
|
||||
vi.mock('../contexts/QrCodeContext', () => ({
|
||||
useQrCodeContext: () => ({
|
||||
parserState: mockParserState,
|
||||
setParserState: mockSetParserState,
|
||||
handleFileChange: mockHandleFileChange,
|
||||
handleClearFile: mockHandleClearFile,
|
||||
}),
|
||||
}));
|
||||
|
||||
function createImagePasteEvent(file: File) {
|
||||
const pasteEvent = new Event('paste', { bubbles: true }) as ClipboardEvent;
|
||||
Object.defineProperty(pasteEvent, 'clipboardData', {
|
||||
value: {
|
||||
items: [
|
||||
{
|
||||
type: file.type,
|
||||
getAsFile: () => file,
|
||||
},
|
||||
],
|
||||
getData: () => '',
|
||||
},
|
||||
});
|
||||
Object.defineProperty(pasteEvent, 'preventDefault', { value: vi.fn() });
|
||||
return pasteEvent;
|
||||
}
|
||||
|
||||
function createBase64PasteEvent(dataUrl: string) {
|
||||
const pasteEvent = new Event('paste', { bubbles: true }) as ClipboardEvent;
|
||||
Object.defineProperty(pasteEvent, 'clipboardData', {
|
||||
value: {
|
||||
items: [],
|
||||
getData: (type: string) => (type === 'text/plain' ? dataUrl : ''),
|
||||
},
|
||||
});
|
||||
Object.defineProperty(pasteEvent, 'preventDefault', { value: vi.fn() });
|
||||
return pasteEvent;
|
||||
}
|
||||
|
||||
describe('ParsePanel 组件', () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
mockParserState = {
|
||||
selectedFile: null,
|
||||
previewUrl: '',
|
||||
dragging: false,
|
||||
decodedResult: '',
|
||||
parsing: false,
|
||||
parseError: '',
|
||||
};
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
vi.restoreAllMocks();
|
||||
});
|
||||
|
||||
describe('粘贴功能', () => {
|
||||
it('粘贴图片时应只处理一次', async () => {
|
||||
render(<ParsePanel />);
|
||||
const mockFile = new File(['img'], 'paste.png', { type: 'image/png' });
|
||||
|
||||
await act(async () => {
|
||||
document.dispatchEvent(createImagePasteEvent(mockFile));
|
||||
});
|
||||
|
||||
expect(mockHandleFileChange).toHaveBeenCalledTimes(1);
|
||||
expect(mockHandleFileChange).toHaveBeenCalledWith(mockFile);
|
||||
expect(toast.success).toHaveBeenCalledTimes(1);
|
||||
expect(toast.success).toHaveBeenCalledWith('图片粘贴成功，正在解析...');
|
||||
});
|
||||
|
||||
it('与 ImageUploader 同时挂载时 document 上只应有一个 paste 监听', () => {
|
||||
const addEventListenerSpy = vi.spyOn(document, 'addEventListener');
|
||||
render(<ParsePanel />);
|
||||
|
||||
const pasteListeners = addEventListenerSpy.mock.calls.filter(([event]) => event === 'paste');
|
||||
expect(pasteListeners).toHaveLength(1);
|
||||
});
|
||||
|
||||
it('粘贴 Base64 data URI 时应转换为文件并只处理一次', async () => {
|
||||
const dataUrl = 'data:image/png;base64,abcd';
|
||||
const mockBlob = new Blob(['img'], { type: 'image/png' });
|
||||
vi.stubGlobal(
|
||||
'fetch',
|
||||
vi.fn().mockResolvedValue({
|
||||
blob: () => Promise.resolve(mockBlob),
|
||||
}),
|
||||
);
|
||||
|
||||
render(<ParsePanel />);
|
||||
|
||||
await act(async () => {
|
||||
document.dispatchEvent(createBase64PasteEvent(dataUrl));
|
||||
});
|
||||
|
||||
expect(fetch).toHaveBeenCalledWith(dataUrl);
|
||||
expect(mockHandleFileChange).toHaveBeenCalledTimes(1);
|
||||
expect(mockHandleFileChange).toHaveBeenCalledWith(
|
||||
expect.objectContaining({ name: 'pasted-image.png', type: 'image/png' }),
|
||||
);
|
||||
expect(toast.success).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it('已上传图片时粘贴仍应只处理一次', async () => {
|
||||
mockParserState = {
|
||||
selectedFile: new File(['existing'], 'existing.png', { type: 'image/png' }),
|
||||
previewUrl: 'blob:existing',
|
||||
dragging: false,
|
||||
decodedResult: 'decoded-text',
|
||||
parsing: false,
|
||||
parseError: '',
|
||||
};
|
||||
|
||||
render(<ParsePanel />);
|
||||
expect(screen.getByText('已上传图片')).toBeInTheDocument();
|
||||
|
||||
const mockFile = new File(['new'], 'new.png', { type: 'image/png' });
|
||||
await act(async () => {
|
||||
document.dispatchEvent(createImagePasteEvent(mockFile));
|
||||
});
|
||||
|
||||
expect(mockHandleFileChange).toHaveBeenCalledTimes(1);
|
||||
expect(mockHandleFileChange).toHaveBeenCalledWith(mockFile);
|
||||
});
|
||||
});
|
||||
});
|
||||
+1
-1
@@ -1,6 +1,6 @@
|
||||
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
|
||||
import { fireEvent, render, screen } from '@testing-library/react';
|
||||
import QrCodePreview from '@/components/QrCodePreview';
|
||||
import QrCodePreview from '../components/QrCodePreview';
|
||||
|
||||
describe('QrCodePreview 组件', () => {
|
||||
const mockOnDownload = vi.fn();
|
||||
@@ -26,11 +26,11 @@ vi.mock('@/config/features', async (importOriginal) => {
|
||||
};
|
||||
});
|
||||
|
||||
vi.mock('@/components/QrCodePreview', () => ({
|
||||
vi.mock('../components/QrCodePreview', () => ({
|
||||
default: () => <div data-testid="qr-code-preview">QrCodePreview</div>,
|
||||
}));
|
||||
|
||||
vi.mock('@/components/ImageUploader', () => ({
|
||||
vi.mock('../components/ImageUploader', () => ({
|
||||
default: () => <div data-testid="image-uploader">ImageUploader</div>,
|
||||
}));
|
||||
|
||||
|
||||
@@ -1,17 +1,14 @@
|
||||
import { Loader2, Pencil, QrCode } from 'lucide-react';
|
||||
import TextInputArea from '@/components/TextInputArea';
|
||||
import QrCodePreview from '@/components/QrCodePreview';
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
import QrCodePreview from './QrCodePreview';
|
||||
import { useQrCodeContext } from '../contexts/QrCodeContext';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
/** 文本预览的最大显示字符数 */
|
||||
const TEXT_PREVIEW_MAX_LENGTH = 80;
|
||||
|
||||
export default function GeneratePanel() {
|
||||
const { t } = useI18n('qrCode');
|
||||
const {
|
||||
generatorState,
|
||||
setTextToEncode,
|
||||
@@ -24,13 +21,11 @@ export default function GeneratePanel() {
|
||||
const isInputStep = generatorState.step === 'input';
|
||||
const hasText = generatorState.textToEncode.trim().length > 0;
|
||||
|
||||
/** 截断文本用于预览显示 */
|
||||
const getTruncatedText = (text: string) => {
|
||||
if (text.length <= TEXT_PREVIEW_MAX_LENGTH) return text;
|
||||
return text.slice(0, TEXT_PREVIEW_MAX_LENGTH) + '...';
|
||||
};
|
||||
|
||||
// 输入态：只显示输入框和生成按钮
|
||||
if (isInputStep) {
|
||||
return (
|
||||
<div className="w-full select-none p-0.5">
|
||||
@@ -42,13 +37,13 @@ export default function GeneratePanel() {
|
||||
>
|
||||
<div className="flex flex-col space-y-2.5">
|
||||
<Label className="text-[10px] font-bold text-muted-foreground/90 uppercase tracking-wider select-none pl-0.5">
|
||||
{t('qrCode:urlInputLabel')}
|
||||
输入 URL 或文本
|
||||
</Label>
|
||||
|
||||
<TextInputArea
|
||||
value={generatorState.textToEncode}
|
||||
onChange={setTextToEncode}
|
||||
placeholder={t('qrCode:urlInputPlaceholder')}
|
||||
placeholder="请输入 URL 或文本内容，将自动生成二维码"
|
||||
showCount={true}
|
||||
showClear={true}
|
||||
allowCopy={false}
|
||||
@@ -66,12 +61,12 @@ export default function GeneratePanel() {
|
||||
{generatorState.generating ? (
|
||||
<>
|
||||
<Loader2 className="w-4 h-4 mr-2 animate-spin" />
|
||||
{t('qrCode:generating')}
|
||||
生成中...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<QrCode className="w-4 h-4 mr-2" />
|
||||
{t('qrCode:generateButton')}
|
||||
生成二维码
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
@@ -81,18 +76,16 @@ export default function GeneratePanel() {
|
||||
);
|
||||
}
|
||||
|
||||
// 预览态：显示文本预览 + 二维码（紧凑布局，适配popup窗口）
|
||||
return (
|
||||
<div className="w-full select-none p-0.5 flex flex-col">
|
||||
{/* 文本预览区域（固定高度，单行显示） */}
|
||||
<div className="border border-border rounded-xl bg-card text-card-foreground shadow-sm p-3 mb-3">
|
||||
<div className="flex items-center justify-between mb-1.5">
|
||||
<Label className="text-[10px] font-bold text-muted-foreground/90 uppercase tracking-wider select-none pl-0.5">
|
||||
{t('qrCode:textPreviewLabel')}
|
||||
原始文本
|
||||
</Label>
|
||||
<Button variant="ghost" size="sm" onClick={backToEdit} className="h-6 px-2 text-xs">
|
||||
<Pencil className="w-3 h-3 mr-1" />
|
||||
{t('qrCode:editButton')}
|
||||
编辑
|
||||
</Button>
|
||||
</div>
|
||||
<div
|
||||
@@ -103,7 +96,6 @@ export default function GeneratePanel() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 二维码预览区域（自适应剩余空间） */}
|
||||
<QrCodePreview
|
||||
qrCodeDataUrl={generatorState.qrCodeDataUrl}
|
||||
onDownload={downloadQrCode}
|
||||
|
||||
@@ -1,22 +1,14 @@
|
||||
import { useCallback, useEffect, useRef } from 'react';
|
||||
import { Image, X } from 'lucide-react';
|
||||
import { toast } from 'sonner';
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Label } from '@/components/ui/label';
|
||||
|
||||
interface ImageUploaderProps {
|
||||
/** 选中的文件 */
|
||||
selectedFile: File | null;
|
||||
/** 文件变更回调 */
|
||||
onFileChange: (file: File) => void;
|
||||
/** 清除文件回调 */
|
||||
onClearFile: () => void;
|
||||
/** 文件预览 URL */
|
||||
previewUrl: string;
|
||||
/** 预览 URL 变更回调 */
|
||||
onPreviewUrlChange: (url: string) => void;
|
||||
/** 是否正在拖拽 */
|
||||
dragging: boolean;
|
||||
/** 拖拽状态变更回调 */
|
||||
onDraggingChange: (dragging: boolean) => void;
|
||||
}
|
||||
|
||||
@@ -25,32 +17,21 @@ const ImageUploader = ({
|
||||
onFileChange,
|
||||
onClearFile,
|
||||
previewUrl,
|
||||
onPreviewUrlChange,
|
||||
dragging,
|
||||
onDraggingChange,
|
||||
}: ImageUploaderProps) => {
|
||||
const { t } = useI18n('qrCode');
|
||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
const handleFileChange = useCallback(
|
||||
(file: File) => {
|
||||
onFileChange(file);
|
||||
onPreviewUrlChange(URL.createObjectURL(file));
|
||||
},
|
||||
[onFileChange, onPreviewUrlChange],
|
||||
);
|
||||
|
||||
const handleClearFile = useCallback(() => {
|
||||
const handleClearFile = () => {
|
||||
if (previewUrl) {
|
||||
URL.revokeObjectURL(previewUrl);
|
||||
}
|
||||
onClearFile();
|
||||
toast.success(t('qrCode:imageCleared'));
|
||||
}, [previewUrl, onClearFile, t]);
|
||||
toast.success('图片已清除');
|
||||
};
|
||||
|
||||
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
if (e.target.files && e.target.files.length > 0) {
|
||||
handleFileChange(e.target.files[0]);
|
||||
const file = e.target.files?.[0];
|
||||
if (file) {
|
||||
onFileChange(file);
|
||||
}
|
||||
};
|
||||
|
||||
@@ -68,42 +49,10 @@ const ImageUploader = ({
|
||||
onDraggingChange(false);
|
||||
const droppedFile = e.dataTransfer.files?.[0];
|
||||
if (droppedFile) {
|
||||
handleFileChange(droppedFile);
|
||||
onFileChange(droppedFile);
|
||||
}
|
||||
};
|
||||
|
||||
// 监听粘贴事件
|
||||
useEffect(() => {
|
||||
const handlePaste = async (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 file = items[i].getAsFile();
|
||||
if (file) {
|
||||
try {
|
||||
handleFileChange(file);
|
||||
toast.success(t('qrCode:imagePasted'));
|
||||
} catch (error) {
|
||||
console.error('处理粘贴图片失败:', error);
|
||||
toast.error(t('qrCode:imagePasteError'));
|
||||
}
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener('paste', handlePaste);
|
||||
|
||||
return () => {
|
||||
document.removeEventListener('paste', handlePaste);
|
||||
};
|
||||
}, [handleFileChange, t]);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`flex flex-col items-center justify-center h-[250px] border-2 border-dashed rounded-xl p-4 cursor-pointer transition-all duration-200 ${
|
||||
@@ -111,21 +60,20 @@ const ImageUploader = ({
|
||||
? 'border-green-600 bg-green-50'
|
||||
: selectedFile
|
||||
? 'border-green-600 bg-green-50/50'
|
||||
: 'border-input bg-muted hover:border-green-600 hover:bg-green-500/10/50'
|
||||
: 'border-input bg-muted hover:border-green-600 hover:bg-green-500/10'
|
||||
}`}
|
||||
onDragOver={handleDragOver}
|
||||
onDragLeave={handleDragLeave}
|
||||
onDrop={handleDrop}
|
||||
>
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
type="file"
|
||||
accept="image/*"
|
||||
onChange={handleInputChange}
|
||||
className="hidden"
|
||||
id="qr-code-upload"
|
||||
/>
|
||||
<label htmlFor="qr-code-upload" className="cursor-pointer text-center w-full">
|
||||
<Label htmlFor="qr-code-upload" className="cursor-pointer text-center w-full">
|
||||
{selectedFile ? (
|
||||
<div className="text-center w-full relative">
|
||||
<div className="relative inline-block">
|
||||
@@ -134,20 +82,22 @@ const ImageUploader = ({
|
||||
alt="QR Code Preview"
|
||||
className="max-w-full max-h-40 rounded-lg object-contain"
|
||||
/>
|
||||
<button
|
||||
<Button
|
||||
type="button"
|
||||
variant="destructive"
|
||||
size="icon"
|
||||
data-testid="ClearIcon"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handleClearFile();
|
||||
}}
|
||||
className="absolute -top-2 -right-2 w-6 h-6 bg-red-500 text-white rounded-full flex items-center justify-center hover:bg-red-600 transition-colors"
|
||||
className="absolute -top-2 -right-2 h-6 w-6 rounded-full"
|
||||
>
|
||||
<X className="w-3 h-3" />
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
<span className="block text-sm text-muted-foreground mt-2">{selectedFile.name}</span>
|
||||
<span className="block text-xs text-muted-foreground">{t('qrCode:clickToChange')}</span>
|
||||
<span className="block text-xs text-muted-foreground">点击更换图片</span>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
@@ -156,14 +106,14 @@ const ImageUploader = ({
|
||||
className="w-12 h-12 text-muted-foreground mx-auto mb-2"
|
||||
/>
|
||||
<span className="block text-sm text-muted-foreground mb-1">
|
||||
{t('qrCode:clickToUpload')}
|
||||
点击、拖拽或粘贴上传二维码图片
|
||||
</span>
|
||||
<span className="block text-xs text-muted-foreground">
|
||||
{t('qrCode:supportFormats')}
|
||||
支持 PNG、JPG、WEBP、Base64 格式
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</label>
|
||||
</Label>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -2,20 +2,17 @@ import { useCallback, useEffect } from 'react';
|
||||
import { RefreshCw } from 'lucide-react';
|
||||
import { toast } from 'sonner';
|
||||
import TextInputArea from '@/components/TextInputArea';
|
||||
import ImageUploader from '@/components/ImageUploader';
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
import ImageUploader from './ImageUploader';
|
||||
import { useQrCodeContext } from '../contexts/QrCodeContext';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
export default function ParsePanel() {
|
||||
const { t } = useI18n('qrCode');
|
||||
const { parserState, setParserState, handleFileChange, handleClearFile } = useQrCodeContext();
|
||||
|
||||
const hasFile = parserState.selectedFile !== null;
|
||||
|
||||
// 全局粘贴事件监听
|
||||
const handlePaste = useCallback(
|
||||
async (e: ClipboardEvent) => {
|
||||
const items = e.clipboardData?.items;
|
||||
@@ -27,7 +24,7 @@ export default function ParsePanel() {
|
||||
const file = items[i].getAsFile();
|
||||
if (file) {
|
||||
handleFileChange(file);
|
||||
toast.success(t('qrCode:imagePasted'));
|
||||
toast.success('图片粘贴成功，正在解析...');
|
||||
}
|
||||
return;
|
||||
}
|
||||
@@ -41,14 +38,14 @@ export default function ParsePanel() {
|
||||
const blob = await response.blob();
|
||||
const file = new File([blob], 'pasted-image.png', { type: blob.type });
|
||||
handleFileChange(file);
|
||||
toast.success(t('qrCode:imagePasted'));
|
||||
toast.success('图片粘贴成功，正在解析...');
|
||||
} catch (error) {
|
||||
console.error('处理 Base64 图片失败:', error);
|
||||
toast.error(t('qrCode:imagePasteError'));
|
||||
toast.error('粘贴图片失败，请重试');
|
||||
}
|
||||
}
|
||||
},
|
||||
[handleFileChange, t],
|
||||
[handleFileChange],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
@@ -58,7 +55,6 @@ export default function ParsePanel() {
|
||||
};
|
||||
}, [handlePaste]);
|
||||
|
||||
// 未上传图片：只显示上传区域
|
||||
if (!hasFile) {
|
||||
return (
|
||||
<div className="w-full select-none p-0.5">
|
||||
@@ -67,7 +63,6 @@ export default function ParsePanel() {
|
||||
onFileChange={handleFileChange}
|
||||
onClearFile={handleClearFile}
|
||||
previewUrl={parserState.previewUrl}
|
||||
onPreviewUrlChange={(url) => setParserState((prev) => ({ ...prev, previewUrl: url }))}
|
||||
dragging={parserState.dragging}
|
||||
onDraggingChange={(dragging) => setParserState((prev) => ({ ...prev, dragging }))}
|
||||
/>
|
||||
@@ -75,18 +70,16 @@ export default function ParsePanel() {
|
||||
);
|
||||
}
|
||||
|
||||
// 已上传图片：显示图片预览 + 解析结果
|
||||
return (
|
||||
<div className="w-full select-none p-0.5 flex flex-col">
|
||||
{/* 图片预览区域（小图预览） */}
|
||||
<div className="border border-border rounded-xl bg-card text-card-foreground shadow-sm p-3 mb-3">
|
||||
<div className="flex items-center justify-between mb-1.5">
|
||||
<Label className="text-[10px] font-bold text-muted-foreground/90 uppercase tracking-wider select-none pl-0.5">
|
||||
{t('qrCode:uploadedImage')}
|
||||
已上传图片
|
||||
</Label>
|
||||
<Button variant="ghost" size="sm" onClick={handleClearFile} className="h-6 px-2 text-xs">
|
||||
<RefreshCw className="w-3 h-3 mr-1" />
|
||||
{t('qrCode:reuploadButton')}
|
||||
重新上传
|
||||
</Button>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 bg-muted/50 rounded-md p-2">
|
||||
@@ -98,13 +91,12 @@ export default function ParsePanel() {
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm text-foreground truncate">{parserState.selectedFile?.name}</p>
|
||||
{parserState.parsing && (
|
||||
<p className="text-xs text-primary animate-pulse mt-1">{t('qrCode:parsing')}</p>
|
||||
<p className="text-xs text-primary animate-pulse mt-1">解析中...</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 解析结果区域 */}
|
||||
<div
|
||||
className={cn(
|
||||
'border border-border rounded-xl bg-card text-card-foreground shadow-sm flex flex-col p-4',
|
||||
@@ -113,7 +105,7 @@ export default function ParsePanel() {
|
||||
>
|
||||
<div className="flex flex-col space-y-2.5">
|
||||
<Label className="text-[10px] font-bold text-muted-foreground/90 uppercase tracking-wider pl-0.5">
|
||||
{t('qrCode:resultLabel')}
|
||||
解析结果
|
||||
</Label>
|
||||
|
||||
<TextInputArea
|
||||
@@ -121,7 +113,7 @@ export default function ParsePanel() {
|
||||
readOnly={true}
|
||||
showClear={false}
|
||||
allowCopy={true}
|
||||
placeholder={parserState.parsing ? '' : t('qrCode:resultPlaceholder')}
|
||||
placeholder={parserState.parsing ? '' : '解析结果将显示在此处'}
|
||||
minRows={4}
|
||||
maxRows={8}
|
||||
externalError={parserState.parseError || undefined}
|
||||
|
||||
@@ -1,18 +1,13 @@
|
||||
import React from 'react';
|
||||
import { Copy, Download } from 'lucide-react';
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
import EmptyPlaceholder from '@/components/EmptyPlaceholder';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { Button } from '@/components/ui/button';
|
||||
|
||||
// 继承原生 HTML Div 属性，方便外部无缝扩充类名或监听事件
|
||||
interface QrCodePreviewProps extends React.HTMLAttributes<HTMLDivElement> {
|
||||
/** 二维码 Data URL */
|
||||
qrCodeDataUrl: string;
|
||||
/** 下载回调 */
|
||||
onDownload: () => void;
|
||||
/** 复制回调 */
|
||||
onCopy: () => void;
|
||||
/** 自定义占位文本，用于空状态提示 */
|
||||
placeholderText?: string;
|
||||
}
|
||||
|
||||
@@ -24,22 +19,15 @@ const QrCodePreview = ({
|
||||
className,
|
||||
...props
|
||||
}: QrCodePreviewProps) => {
|
||||
const { t } = useI18n('qrCode');
|
||||
|
||||
// 空状态下的虚线骨架屏
|
||||
if (!qrCodeDataUrl) {
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
'flex flex-col justify-center items-center min-h-[200px] border border-dashed border-input rounded-xl p-4 bg-muted/40',
|
||||
className,
|
||||
)}
|
||||
<EmptyPlaceholder
|
||||
className={cn('min-h-[200px] p-4', className)}
|
||||
messageClassName="text-sm text-muted-foreground max-w-none"
|
||||
{...props}
|
||||
>
|
||||
<p className="text-sm text-muted-foreground text-center">
|
||||
{placeholderText || t('qrCode:qrCodeWillShow')}
|
||||
</p>
|
||||
</div>
|
||||
{placeholderText || '二维码将显示在这里'}
|
||||
</EmptyPlaceholder>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -52,11 +40,6 @@ const QrCodePreview = ({
|
||||
{...props}
|
||||
>
|
||||
<div className="flex flex-col items-center w-full max-w-xs">
|
||||
{/*
|
||||
二维码容器适配：
|
||||
在暗黑模式下，纯黑白的二维码如果直接暴露在暗色背景下，会导致手机摄像头极难识别。
|
||||
通过裹一层 bg-white 和 p-2，确保黑白对比度绝对安全，同时加入 shadow 增强卡片感。
|
||||
*/}
|
||||
<div className="p-2 bg-white rounded-lg shadow-sm border border-border/40">
|
||||
<img
|
||||
src={qrCodeDataUrl}
|
||||
@@ -68,12 +51,12 @@ const QrCodePreview = ({
|
||||
<div className="flex w-full gap-2 mt-3">
|
||||
<Button variant="outline" size="sm" onClick={onDownload} className="flex-1 h-8">
|
||||
<Download className="w-3.5 h-3.5 text-muted-foreground" />
|
||||
<span className="truncate text-xs">{t('qrCode:downloadButton')}</span>
|
||||
<span className="truncate text-xs">下载二维码</span>
|
||||
</Button>
|
||||
|
||||
<Button variant="default" size="sm" onClick={onCopy} className="flex-1 h-8">
|
||||
<Copy className="w-3.5 h-3.5" />
|
||||
<span className="truncate text-xs">{t('qrCode:copyQrButton')}</span>
|
||||
<span className="truncate text-xs">复制二维码</span>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -3,44 +3,35 @@ import QRious from 'qrious';
|
||||
import { toast } from 'sonner';
|
||||
import { parseQrCodeFromFile } from '@/utils/qrCodeParser';
|
||||
import { useContextMenuData } from '@/utils/useContextMenuData';
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
import type { QrCodeContextValue } from '../contexts/QrCodeContext';
|
||||
import type { QrCodeGeneratorState, QrCodeMode, QrCodeParserState } from '../types';
|
||||
|
||||
/** 防抖延迟时间（毫秒） */
|
||||
const DEBOUNCE_DELAY = 500;
|
||||
|
||||
/** 检测文本是否为URL格式 */
|
||||
function isUrl(text: string): boolean {
|
||||
const trimmed = text.trim();
|
||||
if (!trimmed) return false;
|
||||
|
||||
// 检查是否以 http:// 或 https:// 开头
|
||||
if (trimmed.startsWith('http://') || trimmed.startsWith('https://')) {
|
||||
return true;
|
||||
}
|
||||
|
||||
// 检查是否为域名格式（包含.且不以特殊字符开头）
|
||||
const domainPattern = /^[a-zA-Z0-9]([a-zA-Z0-9-]*[a-zA-Z0-9])?(\.[a-zA-Z]{2,})+([/:].*)?$/;
|
||||
return domainPattern.test(trimmed);
|
||||
}
|
||||
|
||||
/** 检测URL是否为图片格式 */
|
||||
function isImageUrl(url: string): boolean {
|
||||
const trimmedUrl = url.trim().toLowerCase();
|
||||
|
||||
// 检查是否为 data:image 格式
|
||||
if (trimmedUrl.startsWith('data:image/')) {
|
||||
return true;
|
||||
}
|
||||
|
||||
// 检查是否包含图片扩展名
|
||||
const imageExtensions = ['.jpg', '.jpeg', '.png', '.gif', '.bmp', '.webp', '.svg', '.ico'];
|
||||
if (imageExtensions.some((ext) => trimmedUrl.includes(ext))) {
|
||||
return true;
|
||||
}
|
||||
|
||||
// 检查URL路径中是否包含图片相关关键词
|
||||
const imageKeywords = ['/image/', '/img/', '/photo/', '/pic/', '/upload/'];
|
||||
if (imageKeywords.some((keyword) => trimmedUrl.includes(keyword))) {
|
||||
return true;
|
||||
@@ -49,7 +40,6 @@ function isImageUrl(url: string): boolean {
|
||||
return false;
|
||||
}
|
||||
|
||||
/** 生成二维码的核心逻辑 */
|
||||
function generateQrCodeDataUrl(text: string): string {
|
||||
const trimmedText = text.trim();
|
||||
if (!trimmedText) return '';
|
||||
@@ -78,8 +68,6 @@ function generateQrCodeDataUrl(text: string): string {
|
||||
}
|
||||
|
||||
export function useQrCode(): QrCodeContextValue {
|
||||
const { t } = useI18n('qrCode');
|
||||
|
||||
const [mode, setMode] = useState<QrCodeMode>('generate');
|
||||
|
||||
const [generatorState, setGeneratorState] = useState<QrCodeGeneratorState>({
|
||||
@@ -102,7 +90,6 @@ export function useQrCode(): QrCodeContextValue {
|
||||
|
||||
const debounceTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
|
||||
|
||||
// 清除防抖定时器
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
if (debounceTimerRef.current) {
|
||||
@@ -111,41 +98,37 @@ export function useQrCode(): QrCodeContextValue {
|
||||
};
|
||||
}, []);
|
||||
|
||||
/** 自动检测URL并生成二维码 */
|
||||
const autoGenerateIfUrl = useCallback(
|
||||
(text: string) => {
|
||||
if (debounceTimerRef.current) {
|
||||
clearTimeout(debounceTimerRef.current);
|
||||
const autoGenerateIfUrl = useCallback((text: string) => {
|
||||
if (debounceTimerRef.current) {
|
||||
clearTimeout(debounceTimerRef.current);
|
||||
}
|
||||
|
||||
if (!isUrl(text)) {
|
||||
return;
|
||||
}
|
||||
|
||||
debounceTimerRef.current = setTimeout(() => {
|
||||
setGeneratorState((prev) => ({ ...prev, generating: true, inputError: '' }));
|
||||
|
||||
const qrCodeDataUrl = generateQrCodeDataUrl(text);
|
||||
|
||||
if (qrCodeDataUrl) {
|
||||
setGeneratorState((prev) => ({
|
||||
...prev,
|
||||
step: 'preview',
|
||||
savedText: text.trim(),
|
||||
qrCodeDataUrl,
|
||||
generating: false,
|
||||
}));
|
||||
} else {
|
||||
setGeneratorState((prev) => ({
|
||||
...prev,
|
||||
generating: false,
|
||||
inputError: '生成二维码失败，请重试',
|
||||
}));
|
||||
}
|
||||
|
||||
if (!isUrl(text)) {
|
||||
return;
|
||||
}
|
||||
|
||||
debounceTimerRef.current = setTimeout(() => {
|
||||
setGeneratorState((prev) => ({ ...prev, generating: true, inputError: '' }));
|
||||
|
||||
const qrCodeDataUrl = generateQrCodeDataUrl(text);
|
||||
|
||||
if (qrCodeDataUrl) {
|
||||
setGeneratorState((prev) => ({
|
||||
...prev,
|
||||
step: 'preview',
|
||||
savedText: text.trim(),
|
||||
qrCodeDataUrl,
|
||||
generating: false,
|
||||
}));
|
||||
} else {
|
||||
setGeneratorState((prev) => ({
|
||||
...prev,
|
||||
generating: false,
|
||||
inputError: t('qrCode:generateError'),
|
||||
}));
|
||||
}
|
||||
}, DEBOUNCE_DELAY);
|
||||
},
|
||||
[t],
|
||||
);
|
||||
}, DEBOUNCE_DELAY);
|
||||
}, []);
|
||||
|
||||
const setTextToEncode = useCallback(
|
||||
(text: string) => {
|
||||
@@ -155,20 +138,17 @@ export function useQrCode(): QrCodeContextValue {
|
||||
[autoGenerateIfUrl],
|
||||
);
|
||||
|
||||
/** 手动触发生成二维码（用于非URL文本） */
|
||||
const confirmGenerate = useCallback(() => {
|
||||
const text = generatorState.textToEncode.trim();
|
||||
|
||||
if (!text) {
|
||||
setGeneratorState((prev) => ({ ...prev, inputError: t('qrCode:inputRequired') }));
|
||||
toast.error(t('qrCode:inputRequired'));
|
||||
setGeneratorState((prev) => ({ ...prev, inputError: '请输入内容' }));
|
||||
toast.error('请输入内容');
|
||||
return;
|
||||
}
|
||||
|
||||
// 先设置 loading 状态，让 React 渲染加载动画
|
||||
setGeneratorState((prev) => ({ ...prev, generating: true, inputError: '' }));
|
||||
|
||||
// 延迟到下一帧生成，确保 loading 状态先被渲染显示
|
||||
setTimeout(() => {
|
||||
const qrCodeDataUrl = generateQrCodeDataUrl(text);
|
||||
|
||||
@@ -176,9 +156,9 @@ export function useQrCode(): QrCodeContextValue {
|
||||
setGeneratorState((prev) => ({
|
||||
...prev,
|
||||
generating: false,
|
||||
inputError: t('qrCode:generateError'),
|
||||
inputError: '生成二维码失败，请重试',
|
||||
}));
|
||||
toast.error(t('qrCode:generateError'));
|
||||
toast.error('生成二维码失败，请重试');
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -190,9 +170,8 @@ export function useQrCode(): QrCodeContextValue {
|
||||
generating: false,
|
||||
}));
|
||||
}, 0);
|
||||
}, [generatorState.textToEncode, t]);
|
||||
}, [generatorState.textToEncode]);
|
||||
|
||||
/** 返回编辑态，保留上次输入内容 */
|
||||
const backToEdit = useCallback(() => {
|
||||
if (debounceTimerRef.current) {
|
||||
clearTimeout(debounceTimerRef.current);
|
||||
@@ -206,66 +185,56 @@ export function useQrCode(): QrCodeContextValue {
|
||||
}));
|
||||
}, []);
|
||||
|
||||
/** 从图片URL解析二维码 */
|
||||
const parseQrCodeFromUrl = useCallback(
|
||||
async (imageUrl: string) => {
|
||||
try {
|
||||
setParserState((prev) => ({
|
||||
...prev,
|
||||
parsing: true,
|
||||
parseError: '',
|
||||
decodedResult: '',
|
||||
previewUrl: imageUrl,
|
||||
selectedFile: null,
|
||||
}));
|
||||
const parseQrCodeFromUrl = useCallback(async (imageUrl: string) => {
|
||||
try {
|
||||
setParserState((prev) => ({
|
||||
...prev,
|
||||
parsing: true,
|
||||
parseError: '',
|
||||
decodedResult: '',
|
||||
previewUrl: imageUrl,
|
||||
selectedFile: null,
|
||||
}));
|
||||
|
||||
// 从URL获取图片并转换为File对象
|
||||
const response = await fetch(imageUrl);
|
||||
const blob = await response.blob();
|
||||
const file = new File([blob], 'qrcode-image.png', { type: blob.type });
|
||||
const response = await fetch(imageUrl);
|
||||
const blob = await response.blob();
|
||||
const file = new File([blob], 'qrcode-image.png', { type: blob.type });
|
||||
|
||||
setParserState((prev) => ({ ...prev, selectedFile: file }));
|
||||
setParserState((prev) => ({ ...prev, selectedFile: file }));
|
||||
|
||||
const result = await parseQrCodeFromFile(file);
|
||||
const result = await parseQrCodeFromFile(file);
|
||||
|
||||
if (result.success && result.data) {
|
||||
setParserState((prev) => ({ ...prev, decodedResult: result.data! }));
|
||||
toast.success(t('qrCode:parseSuccess'));
|
||||
} else {
|
||||
const errorMsg = result.error || t('qrCode:noQrDetected');
|
||||
setParserState((prev) => ({ ...prev, parseError: errorMsg }));
|
||||
toast.error(errorMsg);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('解析图片二维码失败:', error);
|
||||
const errorMsg = error instanceof Error ? error.message : t('qrCode:parseError');
|
||||
if (result.success && result.data) {
|
||||
setParserState((prev) => ({ ...prev, decodedResult: result.data! }));
|
||||
toast.success('二维码解析成功');
|
||||
} else {
|
||||
const errorMsg = result.error || '未检测到二维码，请确保图片清晰且包含二维码';
|
||||
setParserState((prev) => ({ ...prev, parseError: errorMsg }));
|
||||
toast.error(errorMsg);
|
||||
} finally {
|
||||
setParserState((prev) => ({ ...prev, parsing: false }));
|
||||
}
|
||||
},
|
||||
[t],
|
||||
);
|
||||
} catch (error) {
|
||||
console.error('解析图片二维码失败:', error);
|
||||
const errorMsg = error instanceof Error ? error.message : '解析二维码失败，请重试';
|
||||
setParserState((prev) => ({ ...prev, parseError: errorMsg }));
|
||||
toast.error(errorMsg);
|
||||
} finally {
|
||||
setParserState((prev) => ({ ...prev, parsing: false }));
|
||||
}
|
||||
}, []);
|
||||
|
||||
/** 右键菜单传入URL时，自动生成二维码或解析图片 */
|
||||
const handleContextMenuData = useCallback(
|
||||
(payload: string) => {
|
||||
// 检测是否为图片URL，如果是则切换到解析模式
|
||||
if (isImageUrl(payload)) {
|
||||
setMode('parse');
|
||||
void parseQrCodeFromUrl(payload);
|
||||
return;
|
||||
}
|
||||
|
||||
// 非图片URL，生成二维码
|
||||
setMode('generate');
|
||||
|
||||
// 直接生成二维码，无需等待
|
||||
const qrCodeDataUrl = generateQrCodeDataUrl(payload);
|
||||
|
||||
if (qrCodeDataUrl) {
|
||||
// 生成成功，直接跳转到预览态
|
||||
setGeneratorState((prev) => ({
|
||||
...prev,
|
||||
step: 'preview',
|
||||
@@ -276,7 +245,6 @@ export function useQrCode(): QrCodeContextValue {
|
||||
inputError: '',
|
||||
}));
|
||||
} else {
|
||||
// 生成失败，停留在输入态，显示文本供用户编辑
|
||||
setGeneratorState((prev) => ({
|
||||
...prev,
|
||||
step: 'input',
|
||||
@@ -293,33 +261,29 @@ export function useQrCode(): QrCodeContextValue {
|
||||
|
||||
useContextMenuData({ featureKey: 'qrCode', onData: handleContextMenuData });
|
||||
|
||||
// 反向活态解析二维码算法
|
||||
const parseQrCode = useCallback(
|
||||
async (file: File) => {
|
||||
try {
|
||||
setParserState((prev) => ({ ...prev, parsing: true, parseError: '', decodedResult: '' }));
|
||||
const parseQrCode = useCallback(async (file: File) => {
|
||||
try {
|
||||
setParserState((prev) => ({ ...prev, parsing: true, parseError: '', decodedResult: '' }));
|
||||
|
||||
const result = await parseQrCodeFromFile(file);
|
||||
const result = await parseQrCodeFromFile(file);
|
||||
|
||||
if (result.success && result.data) {
|
||||
setParserState((prev) => ({ ...prev, decodedResult: result.data! }));
|
||||
toast.success(t('qrCode:parseSuccess'));
|
||||
} else {
|
||||
const errorMsg = result.error || t('qrCode:noQrDetected');
|
||||
setParserState((prev) => ({ ...prev, parseError: errorMsg }));
|
||||
toast.error(errorMsg);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('解析二维码失败:', error);
|
||||
const errorMsg = error instanceof Error ? error.message : t('qrCode:parseError');
|
||||
if (result.success && result.data) {
|
||||
setParserState((prev) => ({ ...prev, decodedResult: result.data! }));
|
||||
toast.success('二维码解析成功');
|
||||
} else {
|
||||
const errorMsg = result.error || '未检测到二维码，请确保图片清晰且包含二维码';
|
||||
setParserState((prev) => ({ ...prev, parseError: errorMsg }));
|
||||
toast.error(errorMsg);
|
||||
} finally {
|
||||
setParserState((prev) => ({ ...prev, parsing: false }));
|
||||
}
|
||||
},
|
||||
[t],
|
||||
);
|
||||
} catch (error) {
|
||||
console.error('解析二维码失败:', error);
|
||||
const errorMsg = error instanceof Error ? error.message : '解析二维码失败，请重试';
|
||||
setParserState((prev) => ({ ...prev, parseError: errorMsg }));
|
||||
toast.error(errorMsg);
|
||||
} finally {
|
||||
setParserState((prev) => ({ ...prev, parsing: false }));
|
||||
}
|
||||
}, []);
|
||||
|
||||
const downloadQrCode = useCallback(() => {
|
||||
if (!generatorState.qrCodeDataUrl) return;
|
||||
@@ -328,8 +292,8 @@ export function useQrCode(): QrCodeContextValue {
|
||||
link.href = generatorState.qrCodeDataUrl;
|
||||
link.download = 'qrcode.png';
|
||||
link.click();
|
||||
toast.success(t('qrCode:qrCodeDownloadSuccess'));
|
||||
}, [generatorState.qrCodeDataUrl, t]);
|
||||
toast.success('二维码下载成功');
|
||||
}, [generatorState.qrCodeDataUrl]);
|
||||
|
||||
const copyQrCode = useCallback(async () => {
|
||||
if (!generatorState.qrCodeDataUrl) return;
|
||||
@@ -344,12 +308,12 @@ export function useQrCode(): QrCodeContextValue {
|
||||
}),
|
||||
]);
|
||||
|
||||
toast.success(t('qrCode:qrCodeCopySuccess'));
|
||||
toast.success('二维码已复制到剪贴板');
|
||||
} catch (error) {
|
||||
console.error('复制二维码失败:', error);
|
||||
toast.error(t('qrCode:copyError'));
|
||||
toast.error('复制失败，请重试');
|
||||
}
|
||||
}, [generatorState.qrCodeDataUrl, t]);
|
||||
}, [generatorState.qrCodeDataUrl]);
|
||||
|
||||
const handleFileChange = useCallback(
|
||||
(file: File) => {
|
||||
@@ -366,15 +330,13 @@ export function useQrCode(): QrCodeContextValue {
|
||||
};
|
||||
});
|
||||
|
||||
// 触发解析安全的后台 Promise
|
||||
parseQrCode(file).catch((err) => {
|
||||
console.error('Parser standalone task thread exploded:', err);
|
||||
console.error('解析二维码失败:', err);
|
||||
});
|
||||
},
|
||||
[parseQrCode],
|
||||
);
|
||||
|
||||
// 清除解析受控文件
|
||||
const handleClearFile = useCallback(() => {
|
||||
setParserState((prev) => {
|
||||
if (prev.previewUrl) {
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
import SwitchButtonGroup from '@/components/SwitchButtonGroup';
|
||||
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
import { QrCodeContext } from './contexts/QrCodeContext';
|
||||
import { useQrCode } from './hooks/useQrCode';
|
||||
import GeneratePanel from './components/GeneratePanel';
|
||||
@@ -8,13 +7,11 @@ import ParsePanel from './components/ParsePanel';
|
||||
import type { QrCodeMode } from './types';
|
||||
|
||||
export default function Index() {
|
||||
const { t } = useI18n('qrCode');
|
||||
const qrCode = useQrCode();
|
||||
|
||||
// 模式选项驱动骨架
|
||||
const modeOptions = [
|
||||
{ value: 'generate' as QrCodeMode, label: t('qrCode:urlToQr') },
|
||||
{ value: 'parse' as QrCodeMode, label: t('qrCode:qrToUrl') },
|
||||
{ value: 'generate' as QrCodeMode, label: '文本转二维码' },
|
||||
{ value: 'parse' as QrCodeMode, label: '二维码转文本' },
|
||||
];
|
||||
|
||||
return (
|
||||
|
||||
@@ -1,153 +0,0 @@
|
||||
# pages/
|
||||
|
||||
功能页面组件目录，每个子目录对应一个工具页面。
|
||||
|
||||
## 目录结构约定
|
||||
|
||||
典型页面遵循 **UI + Hook 分离** 模式：
|
||||
|
||||
```
|
||||
pages/FeatureName/
|
||||
├── index.tsx # 页面 UI（纯展示，使用 shadcn/ui 组件）
|
||||
├── useFeatureName.ts # 业务逻辑 Hook（状态管理 + 转换逻辑）
|
||||
├── constants.ts # 常量定义（可选）
|
||||
├── SubComponent.tsx # 子组件（可选）
|
||||
└── __tests__/ # 测试文件
|
||||
└── index.test.tsx
|
||||
```
|
||||
|
||||
## 页面列表
|
||||
|
||||
### Dashboard/
|
||||
|
||||
仪表盘首页，以卡片网格展示所有可见工具，支持点击导航。
|
||||
|
||||
| 文件 | 用途 |
|
||||
| -------------- | -------------------------------------------- |
|
||||
| `index.tsx` | 页面组件，渲染工具卡片网格 |
|
||||
| `ToolCard.tsx` | 工具卡片组件，展示图标、标题、描述和实时数据 |
|
||||
|
||||
### Timestamp/
|
||||
|
||||
时间戳转换工具，支持秒/毫秒级互转、多时区选择、实时时钟。
|
||||
|
||||
| 文件 | 用途 |
|
||||
| -------------------------- | ----------------------------------------------------------------- |
|
||||
| `index.tsx` | 页面 UI |
|
||||
| `useTimestampConverter.ts` | 业务逻辑 Hook，包含转换模式、输入、单位、时区状态和响应式计算管线 |
|
||||
| `LiveClock.tsx` | 实时时钟子组件，`React.memo` 优化 |
|
||||
| `ResultView.tsx` | 转换结果展示子组件 |
|
||||
| `constants.ts` | 时区列表等常量 |
|
||||
|
||||
### StorageCleaner/
|
||||
|
||||
浏览器存储清理工具，支持 Cookie/LocalStorage/SessionStorage/IndexedDB/Cache/SW 清理。
|
||||
|
||||
| 文件 | 用途 |
|
||||
| --------------------------- | -------------- |
|
||||
| `index.tsx` | 页面 UI |
|
||||
| `useStorageCleaner.ts` | 业务逻辑 Hook |
|
||||
| `StorageOptionsGrid.tsx` | 清理选项网格 |
|
||||
| `StorageCleanerConfirm.tsx` | 清理确认对话框 |
|
||||
| `AutoRefreshToggle.tsx` | 自动刷新开关 |
|
||||
| `ErrorDisplay.tsx` | 错误展示组件 |
|
||||
| `CleaningResult.tsx` | 清理结果展示 |
|
||||
| `OptionItem.tsx` | 单个选项组件 |
|
||||
|
||||
### QrCode/
|
||||
|
||||
二维码工具，支持生成（URL→QR）和解析（QR→URL）。
|
||||
|
||||
| 文件/目录 | 用途 |
|
||||
| ------------- | ---------------- |
|
||||
| `index.tsx` | 页面 UI |
|
||||
| `types.ts` | 类型定义 |
|
||||
| `contexts/` | Context Provider |
|
||||
| `hooks/` | 业务逻辑 Hooks |
|
||||
| `components/` | 子组件 |
|
||||
|
||||
### TextStatistics/
|
||||
|
||||
文本统计工具，实时计算字符数、单词数、行数、字节大小。
|
||||
|
||||
| 文件 | 用途 |
|
||||
| ----------- | --------------------------------------------- |
|
||||
| `index.tsx` | 页面组件，集成 `TextInputArea` 和统计结果展示 |
|
||||
|
||||
### Jwt/
|
||||
|
||||
JWT 解析工具，解码 Header/Payload/Signature。
|
||||
|
||||
| 文件/目录 | 用途 |
|
||||
| ------------- | ---------------- |
|
||||
| `index.tsx` | 页面 UI |
|
||||
| `types.ts` | 类型定义 |
|
||||
| `contexts/` | Context Provider |
|
||||
| `hooks/` | 业务逻辑 Hooks |
|
||||
| `components/` | 子组件 |
|
||||
|
||||
### JsonTools/
|
||||
|
||||
JSON 工具集：差异比较、格式化、YAML/TOML/Minify 转换。
|
||||
|
||||
| 文件 | 用途 |
|
||||
| ------------------------ | ---------------------------- |
|
||||
| `index.tsx` | 页面入口，子模式切换 |
|
||||
| `types.ts` | 类型定义 |
|
||||
| `diffEngine.ts` | 差异比较引擎 |
|
||||
| `JsonDiffInput.tsx` | JSON 输入组件 |
|
||||
| `DiffResult.tsx` | 差异结果展示 |
|
||||
| `DiffNavigator.tsx` | 差异导航器 |
|
||||
| `JsonFormatSection.tsx` | 格式化区域 |
|
||||
| `JsonConvertSection.tsx` | 转换区域（YAML/TOML/Minify） |
|
||||
| `JsonTree.tsx` | JSON 树形展示 |
|
||||
|
||||
### Base64Converter/
|
||||
|
||||
Base64 编解码工具，支持文本/文件/图片三种模式。
|
||||
|
||||
| 文件 | 用途 |
|
||||
| ---------------------------- | --------------------- |
|
||||
| `index.tsx` | 页面入口，子模式切换 |
|
||||
| `useBase64Converter.ts` | 业务逻辑 Hook |
|
||||
| `TextMode.tsx` | 文本模式 |
|
||||
| `Base64ConverterSection.tsx` | 文件/图片通用转换区域 |
|
||||
|
||||
### RightClickRestorer/
|
||||
|
||||
右键菜单恢复工具，解除网站对右键的限制。
|
||||
|
||||
| 文件 | 用途 |
|
||||
| -------------------------- | ------------- |
|
||||
| `index.tsx` | 页面 UI |
|
||||
| `useRightClickRestorer.ts` | 业务逻辑 Hook |
|
||||
|
||||
### TestDataGenerator/
|
||||
|
||||
测试数据生成器，支持可视化字段配置、规则复用、Web Worker 批量生成和 JSON/CSV 导出。
|
||||
|
||||
| 文件/目录 | 用途 |
|
||||
| ---------------------------- | ------------------------------------------------- |
|
||||
| `index.tsx` | 主页面，管理字段配置、规则标签页和生成结果 |
|
||||
| `hooks/useGenerator.ts` | Worker 生命周期与消息通信，暴露生成/取消/清理操作 |
|
||||
| `components/FieldList.tsx` | 字段列表、拖拽排序、虚拟滚动和规则保存入口 |
|
||||
| `components/FieldEditor.tsx` | 字段名称、生成器、参数、必填/空值率/唯一性配置 |
|
||||
| `components/RuleManager.tsx` | 规则搜索、加载、编辑、复制、删除、导入和导出 |
|
||||
| `components/ExportPanel.tsx` | 生成结果复制和 JSON/CSV 下载 |
|
||||
|
||||
约束与注意事项：
|
||||
|
||||
- 字段数量最多 40 个（`FieldList.MAX_FIELDS`）。
|
||||
- 生成数量为 1 ~ 100,000，预设值包含 50、100、1,000、5,000、10,000。
|
||||
- 大批量生成通过 `src/workers/generator.worker.ts` 执行，避免阻塞 UI；Worker 每 1,000 条或结束时回传进度。
|
||||
- 规则通过 `src/utils/ruleStorage.ts` 存入 `localStorage`，最多保存 20 条规则。
|
||||
- 内置生成器位于 `src/lib/generators/`，按个人信息、业务数据、技术数据、基础类型分类。
|
||||
|
||||
## 新增页面
|
||||
|
||||
1. 在 `types/storage.d.ts` 添加 `PageType` 联合类型成员
|
||||
2. 在 `config/features.tsx` 的 `FEATURES` 数组添加配置
|
||||
3. 在 `pages/` 创建页面目录（遵循上述结构）
|
||||
4. 在 `public/_locales/zh_CN/messages.json` 添加 Chrome i18n 翻译
|
||||
5. 如需新权限，更新 `wxt.config.ts`
|
||||
6. 添加对应的单元测试
|
||||
@@ -8,8 +8,7 @@ vi.mock('../useRightClickRestorer', () => ({
|
||||
useRightClickRestorer: () => ({
|
||||
domain: 'example.com',
|
||||
isLoading: false,
|
||||
isUnlocked: false,
|
||||
isUnsupported: false,
|
||||
status: 'locked',
|
||||
unlock: mockUnlock,
|
||||
}),
|
||||
}));
|
||||
|
||||
@@ -26,8 +26,7 @@ describe('useRightClickRestorer', () => {
|
||||
await waitFor(() => expect(result.current.isLoading).toBe(false));
|
||||
|
||||
expect(result.current.domain).toBe('example.com');
|
||||
expect(result.current.isUnlocked).toBe(false);
|
||||
expect(result.current.isUnsupported).toBe(false);
|
||||
expect(result.current.status).toBe('locked');
|
||||
expect(sendMessageToContent).toHaveBeenCalledWith('queryRightClickStatus');
|
||||
});
|
||||
|
||||
@@ -39,8 +38,7 @@ describe('useRightClickRestorer', () => {
|
||||
|
||||
await waitFor(() => expect(result.current.isLoading).toBe(false));
|
||||
|
||||
expect(result.current.isUnsupported).toBe(true);
|
||||
expect(result.current.isUnlocked).toBe(false);
|
||||
expect(result.current.status).toBe('unsupported');
|
||||
expect(sendMessageToContent).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
@@ -56,7 +54,7 @@ describe('useRightClickRestorer', () => {
|
||||
await result.current.unlock();
|
||||
});
|
||||
|
||||
expect(result.current.isUnlocked).toBe(true);
|
||||
expect(result.current.status).toBe('unlocked');
|
||||
expect(sendMessageToContent).toHaveBeenLastCalledWith('restoreRightClick');
|
||||
});
|
||||
|
||||
@@ -72,7 +70,7 @@ describe('useRightClickRestorer', () => {
|
||||
await result.current.unlock();
|
||||
});
|
||||
|
||||
expect(result.current.isUnlocked).toBe(false);
|
||||
expect(result.current.status).toBe('unsupported');
|
||||
expect(sendMessageToContent).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
@@ -87,6 +85,6 @@ describe('useRightClickRestorer', () => {
|
||||
await result.current.unlock();
|
||||
});
|
||||
|
||||
expect(result.current.isUnlocked).toBe(false);
|
||||
expect(result.current.status).toBe('locked');
|
||||
});
|
||||
});
|
||||
|
||||
@@ -0,0 +1,55 @@
|
||||
import type { LucideIcon } from 'lucide-react';
|
||||
import { AlertTriangle, MousePointerClick, Shield, ShieldCheck } from 'lucide-react';
|
||||
|
||||
export type RestorerStatus = 'unsupported' | 'locked' | 'unlocked';
|
||||
|
||||
export const CARD_CLASS =
|
||||
'w-full p-4 rounded-xl border border-border bg-card text-card-foreground shadow-sm overflow-hidden space-y-3';
|
||||
|
||||
interface StatusConfig {
|
||||
badgeVariant: 'default' | 'secondary' | 'destructive';
|
||||
badgeClassName: string;
|
||||
badgeIcon: LucideIcon;
|
||||
badgeLabel: string;
|
||||
description: string;
|
||||
buttonIcon: LucideIcon;
|
||||
buttonLabel: string;
|
||||
buttonDisabled: boolean;
|
||||
buttonVariant: 'default' | 'secondary';
|
||||
}
|
||||
|
||||
export const STATUS_CONFIG: Record<RestorerStatus, StatusConfig> = {
|
||||
unsupported: {
|
||||
badgeVariant: 'destructive',
|
||||
badgeClassName: 'gap-1 shrink-0',
|
||||
badgeIcon: AlertTriangle,
|
||||
badgeLabel: '不支持',
|
||||
description: '当前页面为浏览器内部页面或扩展页面，无法解锁右键功能。请切换到普通网页后重试。',
|
||||
buttonIcon: AlertTriangle,
|
||||
buttonLabel: '不支持',
|
||||
buttonDisabled: true,
|
||||
buttonVariant: 'secondary',
|
||||
},
|
||||
locked: {
|
||||
badgeVariant: 'secondary',
|
||||
badgeClassName: 'gap-1 shrink-0',
|
||||
badgeIcon: Shield,
|
||||
badgeLabel: '未解锁',
|
||||
description: '点击下方按钮，为当前网站临时解锁右键菜单。刷新页面后需要重新解锁。',
|
||||
buttonIcon: MousePointerClick,
|
||||
buttonLabel: '解锁当前网站右键',
|
||||
buttonDisabled: false,
|
||||
buttonVariant: 'default',
|
||||
},
|
||||
unlocked: {
|
||||
badgeVariant: 'default',
|
||||
badgeClassName: 'gap-1 bg-green-600 hover:bg-green-700 shrink-0',
|
||||
badgeIcon: ShieldCheck,
|
||||
badgeLabel: '已解锁',
|
||||
description: '当前网站右键菜单已临时解锁。刷新页面后需要重新解锁。',
|
||||
buttonIcon: MousePointerClick,
|
||||
buttonLabel: '右键已解锁',
|
||||
buttonDisabled: true,
|
||||
buttonVariant: 'secondary',
|
||||
},
|
||||
};
|
||||
@@ -1,84 +1,52 @@
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Shield, ShieldCheck, MousePointerClick, AlertTriangle } from 'lucide-react';
|
||||
import { Loader2 } from 'lucide-react';
|
||||
import { CARD_CLASS, STATUS_CONFIG } from './constants';
|
||||
import { useRightClickRestorer } from './useRightClickRestorer';
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
|
||||
export default function Index() {
|
||||
const { t } = useI18n('rightClickRestorer');
|
||||
const { domain, isLoading, isUnlocked, isUnsupported, unlock } = useRightClickRestorer();
|
||||
const { domain, isLoading, status, unlock } = useRightClickRestorer();
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center py-12 min-h-[280px] w-full">
|
||||
<Loader2 className="h-6 w-6 text-muted-foreground/80 animate-spin" />
|
||||
<span className="text-xs text-muted-foreground mt-2 font-medium tracking-wide">
|
||||
{t('rightClickRestorer:loading')}
|
||||
正在加载...
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="p-4 w-full flex flex-col space-y-4">
|
||||
{/* Current Domain */}
|
||||
<div className="w-full rounded-xl border border-border bg-card text-card-foreground shadow-sm overflow-hidden">
|
||||
<div className="p-4">
|
||||
<Label className="text-sm font-medium">{t('rightClickRestorer:currentDomain')}</Label>
|
||||
<div className="mt-2 flex items-center justify-between gap-2">
|
||||
<code className="text-sm bg-muted px-2 py-1 rounded truncate min-w-0 flex-1">
|
||||
{domain || '—'}
|
||||
</code>
|
||||
{isUnsupported ? (
|
||||
<Badge variant="destructive" className="gap-1 shrink-0">
|
||||
<AlertTriangle className="h-3 w-3" />
|
||||
{t('rightClickRestorer:unsupported')}
|
||||
</Badge>
|
||||
) : isUnlocked ? (
|
||||
<Badge variant="default" className="gap-1 bg-green-600 hover:bg-green-700 shrink-0">
|
||||
<ShieldCheck className="h-3 w-3" />
|
||||
{t('rightClickRestorer:statusUnlocked')}
|
||||
</Badge>
|
||||
) : (
|
||||
<Badge variant="secondary" className="gap-1 shrink-0">
|
||||
<Shield className="h-3 w-3" />
|
||||
{t('rightClickRestorer:statusLocked')}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
const config = STATUS_CONFIG[status];
|
||||
const BadgeIcon = config.badgeIcon;
|
||||
const ButtonIcon = config.buttonIcon;
|
||||
|
||||
{/* Unlock Action */}
|
||||
<div className="w-full rounded-xl border border-border bg-card text-card-foreground shadow-sm overflow-hidden">
|
||||
<div className="p-4 space-y-3">
|
||||
{isUnsupported ? (
|
||||
<>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{t('rightClickRestorer:unsupportedDesc')}
|
||||
</p>
|
||||
<Button className="w-full gap-2" disabled variant="secondary">
|
||||
<AlertTriangle className="h-4 w-4" />
|
||||
{t('rightClickRestorer:unsupported')}
|
||||
</Button>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<p className="text-xs text-muted-foreground">{t('rightClickRestorer:unlockDesc')}</p>
|
||||
<Button
|
||||
className="w-full gap-2"
|
||||
onClick={() => void unlock()}
|
||||
disabled={isUnlocked}
|
||||
variant={isUnlocked ? 'secondary' : 'default'}
|
||||
>
|
||||
<MousePointerClick className="h-4 w-4" />
|
||||
{isUnlocked
|
||||
? t('rightClickRestorer:alreadyUnlocked')
|
||||
: t('rightClickRestorer:unlockBtn')}
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
return (
|
||||
<div className="p-4 w-full">
|
||||
<div className={CARD_CLASS}>
|
||||
<Label className="text-sm font-medium">当前域名</Label>
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<code className="text-sm bg-muted px-2 py-1 rounded truncate min-w-0 flex-1">
|
||||
{domain || '—'}
|
||||
</code>
|
||||
<Badge variant={config.badgeVariant} className={config.badgeClassName}>
|
||||
<BadgeIcon className="h-3 w-3" />
|
||||
{config.badgeLabel}
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
<p className="text-xs text-muted-foreground">{config.description}</p>
|
||||
<Button
|
||||
className="w-full gap-2"
|
||||
disabled={config.buttonDisabled}
|
||||
variant={config.buttonVariant}
|
||||
onClick={() => void unlock()}
|
||||
>
|
||||
<ButtonIcon className="h-4 w-4" />
|
||||
{config.buttonLabel}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -1,37 +1,19 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { MessageAction, sendMessageToContent } from '@/utils/messages';
|
||||
|
||||
const UNSUPPORTED_PROTOCOLS = new Set([
|
||||
'chrome:',
|
||||
'chrome-extension:',
|
||||
'about:',
|
||||
'edge:',
|
||||
'brave:',
|
||||
]);
|
||||
|
||||
function isUnsupportedPage(url: string | undefined): boolean {
|
||||
if (!url) return true;
|
||||
try {
|
||||
const protocol = new URL(url).protocol;
|
||||
return UNSUPPORTED_PROTOCOLS.has(protocol);
|
||||
} catch {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
import { isUnsupportedPageUrl } from '@/utils/restrictedUrls';
|
||||
import type { RestorerStatus } from './constants';
|
||||
|
||||
export interface UseRightClickRestorerReturn {
|
||||
domain: string;
|
||||
isLoading: boolean;
|
||||
isUnlocked: boolean;
|
||||
isUnsupported: boolean;
|
||||
status: RestorerStatus;
|
||||
unlock: () => Promise<void>;
|
||||
}
|
||||
|
||||
export function useRightClickRestorer(): UseRightClickRestorerReturn {
|
||||
const [domain, setDomain] = useState<string>('');
|
||||
const [isLoading, setIsLoading] = useState<boolean>(true);
|
||||
const [isUnlocked, setIsUnlocked] = useState<boolean>(false);
|
||||
const [isUnsupported, setIsUnsupported] = useState<boolean>(false);
|
||||
const [domain, setDomain] = useState('');
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [status, setStatus] = useState<RestorerStatus>('locked');
|
||||
|
||||
useEffect(() => {
|
||||
const load = async () => {
|
||||
@@ -41,14 +23,14 @@ export function useRightClickRestorer(): UseRightClickRestorerReturn {
|
||||
|
||||
setDomain(url ? new URL(url).hostname : '');
|
||||
|
||||
if (isUnsupportedPage(url)) {
|
||||
setIsUnsupported(true);
|
||||
if (isUnsupportedPageUrl(url)) {
|
||||
setStatus('unsupported');
|
||||
return;
|
||||
}
|
||||
|
||||
const response = await sendMessageToContent(MessageAction.QUERY_RIGHT_CLICK_STATUS);
|
||||
if (response?.success) {
|
||||
setIsUnlocked(response.restored);
|
||||
setStatus(response.restored ? 'unlocked' : 'locked');
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('[RightClickRestorer] Failed to load state:', err);
|
||||
@@ -61,12 +43,12 @@ export function useRightClickRestorer(): UseRightClickRestorerReturn {
|
||||
}, []);
|
||||
|
||||
async function unlock() {
|
||||
if (isUnsupported) return;
|
||||
if (status === 'unsupported') return;
|
||||
|
||||
try {
|
||||
const response = await sendMessageToContent(MessageAction.RESTORE_RIGHT_CLICK);
|
||||
if (response?.success) {
|
||||
setIsUnlocked(response.restored);
|
||||
setStatus(response.restored ? 'unlocked' : 'locked');
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('[RightClickRestorer] Failed to unlock:', err);
|
||||
@@ -76,8 +58,7 @@ export function useRightClickRestorer(): UseRightClickRestorerReturn {
|
||||
return {
|
||||
domain,
|
||||
isLoading,
|
||||
isUnlocked,
|
||||
isUnsupported,
|
||||
status,
|
||||
unlock,
|
||||
};
|
||||
}
|
||||
|
||||
@@ -0,0 +1,132 @@
|
||||
import { fireEvent, render, screen, waitFor } from '@testing-library/react';
|
||||
import { beforeEach, describe, it, expect, vi } from 'vitest';
|
||||
import { browser } from 'wxt/browser';
|
||||
import Index from '../index';
|
||||
import { clearStorage, getCookieSize, getCurrentTab } from '@/utils/storageCleaner';
|
||||
import { toast } from 'sonner';
|
||||
|
||||
vi.mock('@/utils/chromeStorage', () => ({
|
||||
storageUtil: {
|
||||
get: vi.fn().mockResolvedValue(null),
|
||||
set: vi.fn().mockResolvedValue(undefined),
|
||||
},
|
||||
}));
|
||||
|
||||
vi.mock('@/utils/storageCleaner', () => ({
|
||||
getCurrentTab: vi.fn().mockResolvedValue({ id: 1, url: 'https://example.com' }),
|
||||
getCookieSize: vi.fn().mockResolvedValue(0),
|
||||
getLocalStorageSize: vi.fn().mockResolvedValue(0),
|
||||
getSessionStorageSize: vi.fn().mockResolvedValue(0),
|
||||
getOriginStorageEstimate: vi.fn().mockResolvedValue(0),
|
||||
getCacheStorageSize: vi.fn().mockResolvedValue(0),
|
||||
getServiceWorkerCount: vi.fn().mockResolvedValue(0),
|
||||
clearStorage: vi.fn().mockResolvedValue({ overallSuccess: true }),
|
||||
formatCleaningResult: vi.fn().mockReturnValue('Cleaned successfully'),
|
||||
}));
|
||||
|
||||
vi.mock('sonner', () => ({
|
||||
toast: {
|
||||
success: vi.fn(),
|
||||
warning: vi.fn(),
|
||||
error: vi.fn(),
|
||||
},
|
||||
}));
|
||||
|
||||
describe('StorageCleaner 页面', () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
vi.mocked(getCurrentTab).mockResolvedValue({ id: 1, url: 'https://example.com' } as any);
|
||||
vi.mocked(clearStorage).mockResolvedValue({ overallSuccess: true });
|
||||
});
|
||||
|
||||
it('应该渲染初始化加载状态', () => {
|
||||
render(<Index />);
|
||||
expect(screen.getByText(/正在读取数据/)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('读取当前标签页失败时应显示错误提示', async () => {
|
||||
vi.mocked(getCurrentTab).mockRejectedValueOnce(new Error('Tabs unavailable'));
|
||||
|
||||
render(<Index />);
|
||||
|
||||
expect(await screen.findByText('读取数据失败')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('确认清理前如果当前标签页变为受限页面，不应执行清理', async () => {
|
||||
render(<Index />);
|
||||
|
||||
const cleanButton = await screen.findByRole('button', { name: /立即清理/ });
|
||||
fireEvent.click(cleanButton);
|
||||
|
||||
vi.mocked(getCurrentTab).mockResolvedValueOnce({
|
||||
id: 1,
|
||||
url: 'chrome://extensions',
|
||||
} as any);
|
||||
fireEvent.click(screen.getByRole('button', { name: /确认清理/ }));
|
||||
|
||||
await waitFor(() => {
|
||||
expect(clearStorage).not.toHaveBeenCalled();
|
||||
expect(toast.warning).toHaveBeenCalledWith('存储清理功能不支持此页面');
|
||||
});
|
||||
});
|
||||
|
||||
it('自动刷新后应等待标签页完成加载并重新读取信息后再允许再次清理', async () => {
|
||||
const tabUpdatedListeners: Array<(tabId: number, changeInfo: { status?: string }) => void> = [];
|
||||
(browser.tabs.onUpdated.addListener as any).mockImplementation((listener: any) => {
|
||||
tabUpdatedListeners.push(listener);
|
||||
});
|
||||
(browser.tabs.onUpdated.removeListener as any).mockImplementation((listener: any) => {
|
||||
const index = tabUpdatedListeners.indexOf(listener);
|
||||
if (index >= 0) tabUpdatedListeners.splice(index, 1);
|
||||
});
|
||||
|
||||
render(<Index />);
|
||||
|
||||
const cleanButton = await screen.findByRole('button', { name: /立即清理/ });
|
||||
fireEvent.click(cleanButton);
|
||||
fireEvent.click(screen.getByRole('button', { name: /确认清理/ }));
|
||||
|
||||
await waitFor(() => expect(browser.tabs.reload).toHaveBeenCalledWith(1));
|
||||
|
||||
const loadingButton = screen.getByRole('button', { name: /正在清理/ });
|
||||
expect(loadingButton).toBeDisabled();
|
||||
fireEvent.click(loadingButton);
|
||||
expect(clearStorage).toHaveBeenCalledTimes(1);
|
||||
|
||||
const reloadListener = tabUpdatedListeners.at(-1);
|
||||
expect(reloadListener).toBeDefined();
|
||||
reloadListener?.(1, { status: 'complete' });
|
||||
|
||||
await waitFor(() => {
|
||||
expect(getCookieSize).toHaveBeenCalledTimes(2);
|
||||
expect(screen.getByRole('button', { name: /立即清理/ })).not.toBeDisabled();
|
||||
});
|
||||
});
|
||||
|
||||
it('展示的数据与当前标签页不一致时不应执行清理', async () => {
|
||||
let currentTabId = 1;
|
||||
vi.mocked(getCurrentTab).mockImplementation(
|
||||
async () =>
|
||||
({
|
||||
id: currentTabId,
|
||||
url: currentTabId === 1 ? 'https://a.example.com' : 'https://b.example.com',
|
||||
}) as any,
|
||||
);
|
||||
|
||||
render(<Index />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByRole('button', { name: /立即清理/ })).not.toBeDisabled();
|
||||
});
|
||||
|
||||
currentTabId = 2;
|
||||
|
||||
fireEvent.click(screen.getByRole('button', { name: /立即清理/ }));
|
||||
fireEvent.click(screen.getByRole('button', { name: /确认清理/ }));
|
||||
|
||||
await waitFor(() => {
|
||||
expect(clearStorage).not.toHaveBeenCalled();
|
||||
expect(toast.warning).toHaveBeenCalledWith('当前标签页已切换，请等待数据刷新后再清理');
|
||||
});
|
||||
});
|
||||
});
|
||||
+1
-29
@@ -1,20 +1,4 @@
|
||||
/**
|
||||
* 自动刷新开关行
|
||||
*
|
||||
* 用于 StorageCleaner 页面的操作区域内（非独立卡片），
|
||||
* 控制清理后是否自动刷新页面。左侧为标签文本，右侧为 shadcn/ui Switch 开关。
|
||||
*
|
||||
* @example
|
||||
* ```tsx
|
||||
* <AutoRefreshToggle
|
||||
* reloadAfterClean={reloadAfterClean}
|
||||
* onChange={(checked) => setReloadAfterClean(checked)}
|
||||
* />
|
||||
* ```
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { Switch } from '@/components/ui/switch';
|
||||
import { Label } from '@/components/ui/label';
|
||||
@@ -23,28 +7,16 @@ export interface AutoRefreshToggleProps extends Omit<
|
||||
React.HTMLAttributes<HTMLDivElement>,
|
||||
'onChange'
|
||||
> {
|
||||
/** 开关的当前状态（受控） */
|
||||
reloadAfterClean: boolean;
|
||||
/** 状态变化时的回调函数 */
|
||||
onChange: (checked: boolean) => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* 自动刷新开关
|
||||
*
|
||||
* @param reloadAfterClean - 当前开关状态
|
||||
* @param onChange - 状态变化回调，接收新的布尔值
|
||||
* @param className - 额外的 CSS 类名，用于覆盖或扩展样式
|
||||
* @param props - 透传给外层 div 的其他 HTML 属性
|
||||
*/
|
||||
export default function AutoRefreshToggle({
|
||||
reloadAfterClean,
|
||||
onChange,
|
||||
className,
|
||||
...props
|
||||
}: AutoRefreshToggleProps) {
|
||||
const { t } = useI18n('storageCleaner');
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
@@ -57,7 +29,7 @@ export default function AutoRefreshToggle({
|
||||
htmlFor="auto-refresh-switch"
|
||||
className="text-xs font-bold text-muted-foreground/90 cursor-pointer select-none tracking-wide uppercase"
|
||||
>
|
||||
{t('storageCleaner:autoRefresh')}
|
||||
清理后自动刷新页面
|
||||
</Label>
|
||||
|
||||
<Switch id="auto-refresh-switch" checked={reloadAfterClean} onCheckedChange={onChange} />
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user