refactor: reorganize directory structure into src/
Move all source code directories into src/ for cleaner project structure: - pages/, components/, utils/, config/, providers/, types/, lib/, assets/, entrypoints/ → src/ - Use WXT srcDir config to resolve @/ alias to src/ - Update tsconfig, vitest, eslint, tailwind configs - Remove scattered README.md files from subdirectories - Update documentation (AGENTS.md, CODING_STANDARDS.md, README.md) - Fix pre-existing lint error in RouterProvider.tsx Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
雨霖铃
@@ -1,24 +0,0 @@
|
||||
# src/
|
||||
|
||||
源码目录，存放全局样式定义。
|
||||
|
||||
## 文件说明
|
||||
|
||||
| 文件 | 用途 |
|
||||
| ----------- | ----------------- |
|
||||
| `index.css` | 全局 CSS 入口文件 |
|
||||
|
||||
## index.css
|
||||
|
||||
全局样式入口，包含：
|
||||
|
||||
- **Tailwind 指令**：`@tailwind base/components/utilities`
|
||||
- **shadcn/ui CSS 变量**：定义 `--background`、`--primary`、`--destructive`、`--card`、`--muted`、`--accent`、`--border`、`--ring` 等语义化颜色变量
|
||||
- **主题色值**：`:root`（亮色）和 `.dark`（暗色）两套完整的颜色定义
|
||||
- **圆角变量**：`--radius` 定义全局圆角大小
|
||||
|
||||
## 修改注意事项
|
||||
|
||||
- 修改 CSS 变量会影响所有使用 shadcn/ui 语义化 token 的组件
|
||||
- 新增颜色变量需同时在 `:root` 和 `.dark` 中定义
|
||||
- 避免在组件中硬编码颜色值，应使用 CSS 变量或 Tailwind 的语义化类名
|
||||
@@ -0,0 +1 @@
|
||||
<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>
|
||||
|
After Width: | Height: | Size: 4.0 KiB |
@@ -0,0 +1,73 @@
|
||||
import React, { useEffect, useRef, useState } from 'react';
|
||||
import { Check, Copy } from 'lucide-react';
|
||||
import { copyTextToClipboard } from '@/utils/clipboard';
|
||||
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;
|
||||
tooltip?: string;
|
||||
}
|
||||
|
||||
export const CopyButton: React.FC<CopyButtonProps> = ({
|
||||
text,
|
||||
tooltip,
|
||||
variant = 'ghost',
|
||||
size = 'icon',
|
||||
className,
|
||||
...props
|
||||
}) => {
|
||||
const { t } = useI18n('common');
|
||||
const [copied, setCopied] = useState(false);
|
||||
const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
if (timerRef.current) clearTimeout(timerRef.current);
|
||||
};
|
||||
}, []);
|
||||
|
||||
const handleCopy = async (e: React.MouseEvent<HTMLButtonElement>) => {
|
||||
e.stopPropagation();
|
||||
|
||||
if (!text) {
|
||||
toast.error(t('messages.copyEmpty'));
|
||||
return;
|
||||
}
|
||||
|
||||
const success = await copyTextToClipboard(text);
|
||||
if (success) {
|
||||
toast.success(t('messages.copySuccess'));
|
||||
setCopied(true);
|
||||
if (timerRef.current) clearTimeout(timerRef.current);
|
||||
timerRef.current = setTimeout(() => setCopied(false), 1500);
|
||||
} else {
|
||||
toast.error(t('messages.copyError'));
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleCopy}
|
||||
title={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,
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{copied ? (
|
||||
<Check className="h-[1.2em] w-[1.2em] animate-in fade-in zoom-in-75 duration-200" />
|
||||
) : (
|
||||
<Copy className="h-[1.2em] w-[1.2em]" />
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
||||
export default CopyButton;
|
||||
@@ -0,0 +1,86 @@
|
||||
/**
|
||||
* 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,78 @@
|
||||
import { Component, ErrorInfo, ReactNode } from 'react';
|
||||
import { AlertCircle, RefreshCw } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { getMessage } from '@/utils/chromeI18n';
|
||||
|
||||
interface Props {
|
||||
children: ReactNode;
|
||||
}
|
||||
|
||||
interface State {
|
||||
hasError: boolean;
|
||||
error: Error | null;
|
||||
}
|
||||
|
||||
class ErrorBoundary extends Component<Props, State> {
|
||||
state: State = {
|
||||
hasError: false,
|
||||
error: null,
|
||||
};
|
||||
|
||||
static getDerivedStateFromError(error: Error): State {
|
||||
return { hasError: true, error };
|
||||
}
|
||||
|
||||
componentDidCatch(error: Error, errorInfo: ErrorInfo) {
|
||||
console.error('Uncaught error:', error, errorInfo);
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps: Props) {
|
||||
if (this.state.hasError && prevProps.children !== this.props.children) {
|
||||
this.setState({ hasError: false, error: null });
|
||||
}
|
||||
}
|
||||
|
||||
private handleReset = () => {
|
||||
window.location.reload();
|
||||
};
|
||||
|
||||
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>
|
||||
);
|
||||
}
|
||||
|
||||
return this.props.children;
|
||||
}
|
||||
}
|
||||
|
||||
export { ErrorBoundary };
|
||||
export default ErrorBoundary;
|
||||
@@ -0,0 +1,372 @@
|
||||
/**
|
||||
* GlobalSnackbar - 全局 Snackbar 消息提示组件及 Provider
|
||||
*
|
||||
* 提供可复用的 Toast 消息提示功能，支持三种使用方式：
|
||||
* 1. 作为受控组件使用：通过 props 控制显示状态
|
||||
* 2. 通过 useSnackbarState Hook 使用：在组件内部自动管理状态
|
||||
* 3. 通过 SnackbarProvider 和 useSnackbar Hook 使用：全局单例模式
|
||||
*
|
||||
* NOTE: 项目同时使用 sonner 的 toast 进行简单的一次性提示。
|
||||
* 本组件适用于需要 severity 级别、Provider 上下文、自定义定位等高级场景。
|
||||
* 简单场景（如复制成功、操作提示）优先使用 `import { toast } from 'sonner'`。
|
||||
*
|
||||
* @module GlobalSnackbar
|
||||
* @version 1.1.0
|
||||
*
|
||||
* @example
|
||||
* ```tsx
|
||||
* // 方式一：受控组件
|
||||
* <GlobalSnackbar
|
||||
* message="操作成功"
|
||||
* open={isOpen}
|
||||
* onClose={() => setIsOpen(false)}
|
||||
* severity="success"
|
||||
* />
|
||||
*
|
||||
* // 方式二：Hook 方式 (局部状态)
|
||||
* const { snackbarProps, showMessage } = useSnackbarState();
|
||||
* showMessage('Hello!', { severity: 'info' });
|
||||
*
|
||||
* // 方式三：Context 方式 (全局状态)
|
||||
* // 在根组件包裹 Provider
|
||||
* <SnackbarProvider>
|
||||
* <App />
|
||||
* </SnackbarProvider>
|
||||
*
|
||||
* // 在子组件中使用
|
||||
* const { showMessage } = useSnackbar();
|
||||
* showMessage('Global Message');
|
||||
* ```
|
||||
*/
|
||||
|
||||
import {
|
||||
JSX,
|
||||
useState,
|
||||
useRef,
|
||||
createContext,
|
||||
useContext,
|
||||
useEffect,
|
||||
type ReactNode,
|
||||
type SyntheticEvent,
|
||||
} from 'react';
|
||||
import { CheckCircle, Info, AlertTriangle, XCircle } from 'lucide-react';
|
||||
|
||||
/**
|
||||
* Snackbar 消息严重程度类型
|
||||
* @description 决定 Alert 组件的颜色和图标
|
||||
* - success: 绿色，成功提示
|
||||
* - info: 蓝色，信息提示
|
||||
* - warning: 橙色，警告提示
|
||||
* - error: 红色，错误提示
|
||||
*/
|
||||
export type SnackbarSeverity = 'success' | 'info' | 'warning' | 'error';
|
||||
|
||||
/**
|
||||
* GlobalSnackbar 组件的属性接口
|
||||
* @interface GlobalSnackbarProps
|
||||
*/
|
||||
export interface GlobalSnackbarProps {
|
||||
/** 消息内容，要显示的提示文本 */
|
||||
message: string;
|
||||
/** 是否显示 Snackbar */
|
||||
open: boolean;
|
||||
/** 关闭回调函数 */
|
||||
onClose: () => void;
|
||||
/** 消息级别，影响颜色和图标样式，默认 'info' */
|
||||
severity?: SnackbarSeverity;
|
||||
/** 自动隐藏时间（毫秒），设为 0 则不自动关闭，默认 2000 */
|
||||
autoHideDuration?: number;
|
||||
/** Snackbar 弹出位置，默认 { vertical: 'bottom', horizontal: 'center' } */
|
||||
anchorOrigin?: {
|
||||
vertical: 'top' | 'bottom';
|
||||
horizontal: 'left' | 'center' | 'right';
|
||||
};
|
||||
/** 是否使用 Alert 组件包裹，false 则使用原生 Snackbar message，默认 true */
|
||||
showAlert?: boolean;
|
||||
/** 是否隐藏 Alert 图标，默认 false */
|
||||
hideIcon?: boolean;
|
||||
/** 自定义样式，透传给外层 Snackbar 组件 */
|
||||
sx?: React.CSSProperties;
|
||||
/** 自定义样式，透传给内层 Alert 组件（仅 showAlert=true 时生效） */
|
||||
alertSx?: React.CSSProperties;
|
||||
}
|
||||
|
||||
/**
|
||||
* showMessage 方法的选项配置
|
||||
* @interface SnackbarOptions
|
||||
*/
|
||||
export interface SnackbarOptions {
|
||||
/** 消息级别：success | info | warning | error */
|
||||
severity?: SnackbarSeverity;
|
||||
/** 自动隐藏时间（毫秒），设为 0 则不自动关闭 */
|
||||
autoHideDuration?: number;
|
||||
/** 是否隐藏 Alert 图标 */
|
||||
hideIcon?: boolean;
|
||||
/** 是否使用 Alert 组件包裹 */
|
||||
showAlert?: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* useSnackbarState Hook 的返回值类型
|
||||
* @interface UseSnackbarStateResult
|
||||
*/
|
||||
export interface UseSnackbarStateResult {
|
||||
/** 传递给 GlobalSnackbar 组件的属性对象 */
|
||||
snackbarProps: GlobalSnackbarProps;
|
||||
/** 显示消息的方法 */
|
||||
showMessage: (message: string, options?: SnackbarOptions) => void;
|
||||
/** 关闭消息的方法 */
|
||||
closeMessage: () => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* GlobalSnackbar 组件的默认属性配置
|
||||
* @description 提供类型安全的默认值选择
|
||||
*/
|
||||
const defaultProps: Required<
|
||||
Pick<
|
||||
GlobalSnackbarProps,
|
||||
'severity' | 'autoHideDuration' | 'anchorOrigin' | 'showAlert' | 'hideIcon'
|
||||
>
|
||||
> = {
|
||||
severity: 'info',
|
||||
autoHideDuration: 2000,
|
||||
anchorOrigin: { vertical: 'bottom', horizontal: 'center' },
|
||||
showAlert: true,
|
||||
hideIcon: false,
|
||||
};
|
||||
|
||||
const severityConfig: Record<
|
||||
SnackbarSeverity,
|
||||
{ icon: React.ElementType; bgClass: string; textClass: string }
|
||||
> = {
|
||||
success: { icon: CheckCircle, bgClass: 'bg-green-500', textClass: 'text-white' },
|
||||
info: { icon: Info, bgClass: 'bg-primary/100', textClass: 'text-white' },
|
||||
warning: { icon: AlertTriangle, bgClass: 'bg-amber-500', textClass: 'text-white' },
|
||||
error: { icon: XCircle, bgClass: 'bg-red-500', textClass: 'text-white' },
|
||||
};
|
||||
|
||||
/**
|
||||
* GlobalSnackbar 组件
|
||||
*
|
||||
* 全局消息提示的展示组件，支持受控和非受控两种使用模式。
|
||||
*
|
||||
* @param {GlobalSnackbarProps} props - 组件属性
|
||||
* @returns {JSX.Element}
|
||||
*/
|
||||
export function GlobalSnackbar({
|
||||
message,
|
||||
open,
|
||||
onClose,
|
||||
severity = defaultProps.severity,
|
||||
autoHideDuration = defaultProps.autoHideDuration,
|
||||
showAlert = defaultProps.showAlert,
|
||||
hideIcon = defaultProps.hideIcon,
|
||||
}: GlobalSnackbarProps): JSX.Element | null {
|
||||
const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (open && autoHideDuration > 0) {
|
||||
timerRef.current = setTimeout(() => {
|
||||
onClose();
|
||||
}, autoHideDuration);
|
||||
return () => {
|
||||
if (timerRef.current) clearTimeout(timerRef.current);
|
||||
};
|
||||
}
|
||||
return undefined;
|
||||
}, [open, autoHideDuration, onClose]);
|
||||
|
||||
if (!open) return null;
|
||||
|
||||
const config = severityConfig[severity];
|
||||
const IconComponent = config.icon;
|
||||
|
||||
return (
|
||||
<div className="fixed z-[999999] bottom-6 left-1/2 -translate-x-1/2 animate-in fade-in slide-in-from-bottom-2 duration-300">
|
||||
{showAlert ? (
|
||||
<div
|
||||
className={`flex items-center gap-2 px-5 py-1.5 rounded-full shadow-lg ${config.bgClass} ${config.textClass}`}
|
||||
style={{ minWidth: '140px' }}
|
||||
>
|
||||
{!hideIcon && <IconComponent className="h-4 w-4 flex-shrink-0" />}
|
||||
<span className="text-xs font-bold">{message}</span>
|
||||
</div>
|
||||
) : (
|
||||
<div className="px-4 py-2 rounded-lg bg-gray-800 text-white text-sm">{message}</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* useSnackbarState - 消息提示的 Hook 方式
|
||||
*
|
||||
* 提供状态管理的 Snackbar 功能，自动处理 open、message 等状态。
|
||||
* 适合在组件内部使用，无需额外的状态管理代码。
|
||||
*
|
||||
* @param {SnackbarOptions} [initialOptions] - 初始配置选项
|
||||
* @returns {UseSnackbarStateResult} 包含 snackbarProps 和操作方法的对象
|
||||
*
|
||||
* @description
|
||||
* - 自动管理 Snackbar 的显示/隐藏状态
|
||||
* - 支持链式调用 showMessage
|
||||
* - 合并初始选项和调用时选项
|
||||
*
|
||||
* @example
|
||||
* ```tsx
|
||||
* function MyComponent() {
|
||||
* const { snackbarProps, showMessage, closeMessage } = useSnackbarState({
|
||||
* severity: 'info',
|
||||
* autoHideDuration: 3000,
|
||||
* });
|
||||
*
|
||||
* const handleSave = () => {
|
||||
* // 业务逻辑...
|
||||
* showMessage('保存成功！', { severity: 'success' });
|
||||
* };
|
||||
*
|
||||
* return (
|
||||
* <>
|
||||
* <button onClick={handleSave}>保存</button>
|
||||
* <GlobalSnackbar {...snackbarProps} />
|
||||
* </>
|
||||
* );
|
||||
* }
|
||||
* ```
|
||||
*/
|
||||
export function useSnackbarState(initialOptions?: SnackbarOptions): UseSnackbarStateResult {
|
||||
// Snackbar 显示状态
|
||||
const [open, setOpen] = useState(false);
|
||||
// 当前显示的消息内容
|
||||
const [message, setMessage] = useState('');
|
||||
// 消息配置选项
|
||||
const [options, setOptions] = useState<SnackbarOptions>(initialOptions || {});
|
||||
|
||||
/**
|
||||
* 显示消息
|
||||
*
|
||||
* @param {string} newMessage - 要显示的消息文本
|
||||
* @param {SnackbarOptions} [newOptions={}] - 新的配置选项
|
||||
*
|
||||
* @description
|
||||
* - 合并初始选项和新的调用选项
|
||||
* - 新选项会覆盖初始选项
|
||||
*/
|
||||
const showMessage = (newMessage: string, newOptions: SnackbarOptions = {}) => {
|
||||
setMessage(newMessage);
|
||||
setOptions({ ...initialOptions, ...newOptions });
|
||||
setOpen(true);
|
||||
};
|
||||
|
||||
/**
|
||||
* 关闭消息
|
||||
*
|
||||
* @description
|
||||
* - 直接将 open 状态设置为 false
|
||||
*/
|
||||
const closeMessage = () => {
|
||||
setOpen(false);
|
||||
};
|
||||
|
||||
const handleClose = (_event?: SyntheticEvent | Event, reason?: string) => {
|
||||
if (reason === 'clickaway') return;
|
||||
closeMessage();
|
||||
};
|
||||
|
||||
/**
|
||||
* 传递给 GlobalSnackbar 组件的属性
|
||||
*
|
||||
* @description
|
||||
* - 组合当前状态和选项为完整的组件 props
|
||||
* - onClose 使用 handleClose 包装后的版本
|
||||
*/
|
||||
const snackbarProps: GlobalSnackbarProps = {
|
||||
message,
|
||||
open,
|
||||
onClose: handleClose,
|
||||
severity: options.severity,
|
||||
autoHideDuration: options.autoHideDuration,
|
||||
hideIcon: options.hideIcon,
|
||||
};
|
||||
|
||||
return {
|
||||
snackbarProps,
|
||||
showMessage,
|
||||
closeMessage,
|
||||
};
|
||||
}
|
||||
|
||||
// --- Context & Provider ---
|
||||
|
||||
/**
|
||||
* Snackbar Context 的值类型定义
|
||||
*/
|
||||
interface SnackbarContextValue {
|
||||
showMessage: (message: string, options?: SnackbarOptions) => void;
|
||||
closeMessage: () => void;
|
||||
}
|
||||
|
||||
const SnackbarContext = createContext<SnackbarContextValue | null>(null);
|
||||
|
||||
/**
|
||||
* SnackbarProvider 组件的 props 类型
|
||||
*/
|
||||
interface SnackbarProviderProps {
|
||||
children: ReactNode;
|
||||
initialOptions?: SnackbarOptions;
|
||||
}
|
||||
|
||||
/**
|
||||
* SnackbarProvider 组件
|
||||
*
|
||||
* 全局消息提示的 Provider 组件，需要包裹在应用根组件外层。
|
||||
*/
|
||||
export function SnackbarProvider({ children, initialOptions }: SnackbarProviderProps): JSX.Element {
|
||||
const { snackbarProps, showMessage, closeMessage } = useSnackbarState(initialOptions);
|
||||
|
||||
return (
|
||||
<SnackbarContext.Provider value={{ showMessage, closeMessage }}>
|
||||
{children}
|
||||
<GlobalSnackbar {...snackbarProps} />
|
||||
</SnackbarContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* useSnackbar - 在子组件中获取 Snackbar 上下文的 Hook
|
||||
*
|
||||
* @param {SnackbarOptions} [options] - 钩子级别的默认配置（如 autoHideDuration）
|
||||
* @returns {SnackbarContextValue} - 包含 showMessage 和 closeMessage 的对象
|
||||
* @throws {Error} - 如果不在 SnackbarProvider 内部调用，抛出错误
|
||||
*
|
||||
* @description
|
||||
* 选项合并策略：
|
||||
* 1. 调用 showMessage 时传入的 callOptions 优先级最高
|
||||
* 2. useSnackbar(options) 传入的 Hook 级别配置次之
|
||||
* 3. SnackbarProvider(initialOptions) 传入的全局配置优先级最低
|
||||
*/
|
||||
export function useSnackbar(options?: SnackbarOptions): SnackbarContextValue {
|
||||
const context = useContext(SnackbarContext);
|
||||
if (!context) {
|
||||
throw new Error('useSnackbar must be used within SnackbarProvider');
|
||||
}
|
||||
|
||||
// 包装 showMessage 以支持 Hook 级别的 initialOptions
|
||||
const wrappedShowMessage = (message: string, callOptions?: SnackbarOptions) => {
|
||||
// 采用防御性编程，确保 options 和 callOptions 为空时也能正常工作
|
||||
// 优先级：callOptions > options
|
||||
const mergedOptions: SnackbarOptions = {
|
||||
...(options || {}),
|
||||
...(callOptions || {}),
|
||||
};
|
||||
context.showMessage(message, mergedOptions);
|
||||
};
|
||||
|
||||
return {
|
||||
...context,
|
||||
showMessage: wrappedShowMessage,
|
||||
};
|
||||
}
|
||||
|
||||
export default GlobalSnackbar;
|
||||
@@ -0,0 +1,178 @@
|
||||
import { useCallback, useEffect, useRef } from 'react';
|
||||
import { Image, X } from 'lucide-react';
|
||||
import { useSnackbar } from '@/components/GlobalSnackbar';
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
const ImageUploader = ({
|
||||
selectedFile,
|
||||
onFileChange,
|
||||
onClearFile,
|
||||
previewUrl,
|
||||
onPreviewUrlChange,
|
||||
dragging,
|
||||
onDraggingChange,
|
||||
}: ImageUploaderProps) => {
|
||||
const { t } = useI18n('qrCode');
|
||||
const { showMessage } = useSnackbar();
|
||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
const handleFileChange = useCallback(
|
||||
(file: File) => {
|
||||
onFileChange(file);
|
||||
onPreviewUrlChange(URL.createObjectURL(file));
|
||||
},
|
||||
[onFileChange, onPreviewUrlChange],
|
||||
);
|
||||
|
||||
const handleClearFile = useCallback(() => {
|
||||
if (previewUrl) {
|
||||
URL.revokeObjectURL(previewUrl);
|
||||
}
|
||||
onClearFile();
|
||||
showMessage(t('qrCode:imageCleared'), {
|
||||
severity: 'success',
|
||||
autoHideDuration: 1000,
|
||||
});
|
||||
}, [previewUrl, onClearFile, showMessage, t]);
|
||||
|
||||
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
if (e.target.files && e.target.files.length > 0) {
|
||||
handleFileChange(e.target.files[0]);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {
|
||||
e.preventDefault();
|
||||
onDraggingChange(true);
|
||||
};
|
||||
|
||||
const handleDragLeave = () => {
|
||||
onDraggingChange(false);
|
||||
};
|
||||
|
||||
const handleDrop = (e: React.DragEvent<HTMLDivElement>) => {
|
||||
e.preventDefault();
|
||||
onDraggingChange(false);
|
||||
const droppedFile = e.dataTransfer.files?.[0];
|
||||
if (droppedFile) {
|
||||
handleFileChange(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);
|
||||
showMessage(t('qrCode:imagePasted'), { severity: 'success', autoHideDuration: 1000 });
|
||||
} catch (error) {
|
||||
console.error('处理粘贴图片失败:', error);
|
||||
showMessage(t('qrCode:imagePasteError'), {
|
||||
severity: 'error',
|
||||
autoHideDuration: 3000,
|
||||
});
|
||||
}
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener('paste', handlePaste);
|
||||
|
||||
return () => {
|
||||
document.removeEventListener('paste', handlePaste);
|
||||
};
|
||||
}, [showMessage, 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 ${
|
||||
dragging
|
||||
? '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'
|
||||
}`}
|
||||
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">
|
||||
{selectedFile ? (
|
||||
<div className="text-center w-full relative">
|
||||
<div className="relative inline-block">
|
||||
<img
|
||||
src={previewUrl}
|
||||
alt="QR Code Preview"
|
||||
className="max-w-full max-h-40 rounded-lg object-contain"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
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"
|
||||
>
|
||||
<X className="w-3 h-3" />
|
||||
</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>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<Image
|
||||
data-testid="ImageIcon"
|
||||
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')}
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</label>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ImageUploader;
|
||||
@@ -0,0 +1,83 @@
|
||||
import { Component, ErrorInfo, ReactNode } from 'react';
|
||||
import { AlertCircle, RefreshCw } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { getMessage } from '@/utils/chromeI18n';
|
||||
|
||||
interface Props {
|
||||
children: ReactNode;
|
||||
resetKey?: string | number;
|
||||
}
|
||||
|
||||
interface State {
|
||||
hasError: boolean;
|
||||
error: Error | null;
|
||||
}
|
||||
|
||||
class PageErrorBoundary extends Component<Props, State> {
|
||||
state: State = {
|
||||
hasError: false,
|
||||
error: null,
|
||||
};
|
||||
|
||||
static getDerivedStateFromError(error: Error): State {
|
||||
return { hasError: true, error };
|
||||
}
|
||||
|
||||
componentDidCatch(error: Error, errorInfo: ErrorInfo) {
|
||||
console.error('Uncaught error in page:', error, errorInfo);
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps: Props) {
|
||||
if (this.state.hasError && prevProps.resetKey !== this.props.resetKey) {
|
||||
this.setState({ hasError: false, error: null });
|
||||
}
|
||||
}
|
||||
|
||||
private handleRetry = () => {
|
||||
this.setState({ hasError: false, error: null });
|
||||
};
|
||||
|
||||
render() {
|
||||
if (this.state.hasError) {
|
||||
return (
|
||||
<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>
|
||||
);
|
||||
}
|
||||
|
||||
return this.props.children;
|
||||
}
|
||||
}
|
||||
|
||||
export { PageErrorBoundary };
|
||||
export default PageErrorBoundary;
|
||||
@@ -0,0 +1,78 @@
|
||||
/**
|
||||
* PageSkeleton 组件 - 页面加载骨架屏
|
||||
*
|
||||
* 用于 Suspense fallback 和初始加载状态，提供平滑的视觉过渡
|
||||
* 避免白屏闪烁，减少布局偏移
|
||||
*/
|
||||
interface PageSkeletonProps {
|
||||
/** 骨架屏类型 */
|
||||
variant?: 'dashboard' | 'tool';
|
||||
}
|
||||
|
||||
/**
|
||||
* 仪表盘卡片骨架屏
|
||||
*/
|
||||
function DashboardCardSkeleton() {
|
||||
return (
|
||||
<div className="rounded-xl border border-border p-5 h-[100px]">
|
||||
<div className="flex justify-between items-start">
|
||||
<div className="flex gap-3 items-center">
|
||||
<div className="w-10 h-10 rounded-lg bg-muted animate-pulse" />
|
||||
<div>
|
||||
<div className="w-24 h-5 bg-muted rounded animate-pulse" />
|
||||
<div className="w-32 h-3.5 bg-muted rounded animate-pulse mt-1.5" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-3 h-3 rounded-full bg-muted animate-pulse" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* 工具页面骨架屏
|
||||
*/
|
||||
function ToolPageSkeleton() {
|
||||
return (
|
||||
<div className="p-5">
|
||||
{/* 标题区域 */}
|
||||
<div className="w-44 h-7 bg-muted rounded animate-pulse mb-4" />
|
||||
|
||||
{/* 输入区域 */}
|
||||
<div className="w-full h-[120px] bg-muted rounded-xl animate-pulse mb-4" />
|
||||
|
||||
{/* 控制栏 */}
|
||||
<div className="flex gap-2 mb-4">
|
||||
<div className="w-24 h-9 bg-muted rounded-lg animate-pulse" />
|
||||
<div className="w-20 h-9 bg-muted rounded-lg animate-pulse" />
|
||||
<div className="flex-1" />
|
||||
<div className="w-22 h-9 bg-muted rounded-lg animate-pulse" />
|
||||
</div>
|
||||
|
||||
{/* 结果区域 */}
|
||||
<div className="w-full h-[160px] bg-muted rounded-xl animate-pulse" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* 页面加载骨架屏
|
||||
*
|
||||
* @param props - PageSkeletonProps
|
||||
* @returns 骨架屏 JSX 元素
|
||||
*/
|
||||
export default function PageSkeleton({ variant = 'dashboard' }: PageSkeletonProps) {
|
||||
if (variant === 'tool') {
|
||||
return <ToolPageSkeleton />;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="grid grid-cols-1 sm:grid-cols-[repeat(auto-fill,minmax(300px,1fr))] auto-rows-fr gap-4 p-4">
|
||||
{Array.from({ length: 6 }).map((_, index) => (
|
||||
<DashboardCardSkeleton key={index} />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
PageSkeleton.displayName = 'PageSkeleton';
|
||||
@@ -0,0 +1,79 @@
|
||||
import React from 'react';
|
||||
import { Copy, Download } from 'lucide-react';
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
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;
|
||||
}
|
||||
|
||||
const QrCodePreview = ({
|
||||
qrCodeDataUrl,
|
||||
onDownload,
|
||||
onCopy,
|
||||
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,
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<p className="text-sm text-muted-foreground text-center">{t('qrCode:qrCodeWillShow')}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
'flex flex-col justify-center items-center min-h-[200px] border border-input rounded-xl p-6 bg-muted/40',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<div className="flex flex-col items-center w-full max-w-xs">
|
||||
{/*
|
||||
2. 二维码容器适配：
|
||||
在暗黑模式下，纯黑白的二维码如果直接暴露在暗色背景下，会导致手机摄像头极难识别。
|
||||
通过裹一层 bg-white 和 p-3，确保黑白对比度绝对安全，同时加入 shadow 增强卡片感。
|
||||
*/}
|
||||
<div className="p-3 bg-white rounded-lg shadow-sm border border-border/40">
|
||||
<img
|
||||
src={qrCodeDataUrl}
|
||||
alt="QR Code Preview"
|
||||
className="w-56 h-56 max-w-full object-contain block animate-in fade-in duration-300"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex w-full gap-2 mt-5">
|
||||
<Button variant="outline" size="sm" onClick={onDownload} className="flex-1">
|
||||
<Download className="w-4 h-4 text-muted-foreground" />
|
||||
<span className="truncate">{t('qrCode:downloadButton')}</span>
|
||||
</Button>
|
||||
|
||||
<Button variant="default" size="sm" onClick={onCopy} className="flex-1">
|
||||
<Copy className="w-4 h-4" />
|
||||
<span className="truncate">{t('qrCode:copyQrButton')}</span>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default QrCodePreview;
|
||||
@@ -0,0 +1,65 @@
|
||||
import { FEATURES, getEntryPointType } from '@/config/features';
|
||||
import { useRouter } from '@/providers/RouterProvider';
|
||||
import { Suspense, useMemo } from 'react';
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
import PageErrorBoundary from '@/components/PageErrorBoundary';
|
||||
import PageSkeleton from '@/components/PageSkeleton';
|
||||
import { cn } from '@/lib/utils'; // 1. 引入标准的 shadcn 工具函数
|
||||
import { AlertTriangle } from 'lucide-react'; // 用于标准的 404 异常展示
|
||||
|
||||
export default function RouterContainer() {
|
||||
const { currentPage, isLoaded } = useRouter();
|
||||
const { t } = useI18n('common');
|
||||
|
||||
// 2. 稳定的动态动画类名映射
|
||||
const animationClass = useMemo(() => {
|
||||
return currentPage === 'dashboard' ? 'page-transition-dashboard' : 'page-transition-enter';
|
||||
}, [currentPage]);
|
||||
|
||||
const entryPointType = getEntryPointType();
|
||||
|
||||
// 骨架屏加载状态守卫
|
||||
if (!isLoaded) {
|
||||
return <PageSkeleton variant={currentPage === 'dashboard' ? 'dashboard' : 'tool'} />;
|
||||
}
|
||||
|
||||
// 3. 严格的路由查找与类型安全的组件分发
|
||||
const currentFeature = FEATURES.find((f) => f.key === currentPage);
|
||||
const MatchedComponent = currentFeature?.components?.[entryPointType];
|
||||
|
||||
return (
|
||||
<div
|
||||
key={currentPage} // 保持原有通过重新挂载触发动画的精简特性
|
||||
className={cn(
|
||||
'flex-1 flex flex-col overflow-x-hidden overflow-y-auto',
|
||||
'scrollbar-gutter-stable motion-reduce:transition-none', // 当系统开启“减弱动态效果”时，自动优雅降级，防止眩晕
|
||||
animationClass,
|
||||
)}
|
||||
>
|
||||
<Suspense
|
||||
fallback={<PageSkeleton variant={currentPage === 'dashboard' ? 'dashboard' : 'tool'} />}
|
||||
>
|
||||
<PageErrorBoundary resetKey={currentPage}>
|
||||
{/*
|
||||
4. 路由防御拦截：
|
||||
如果组件存在则正常流式渲染，如果由于版本更迭或非法路径导致找不到对应组件，
|
||||
渲染一个优雅且符合 shadcn 风格的中性 404 提示页，而不是死白屏。
|
||||
*/}
|
||||
{MatchedComponent ? (
|
||||
<MatchedComponent />
|
||||
) : (
|
||||
<div className="flex-1 flex flex-col items-center justify-center p-8 text-center animate-in fade-in duration-300">
|
||||
<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>
|
||||
<p className="text-xs text-muted-foreground mt-1 max-w-[240px]">
|
||||
{t('router.notFoundDescription', { entryPointType })}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</PageErrorBoundary>
|
||||
</Suspense>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,71 @@
|
||||
import React from 'react';
|
||||
import { cn } from '@/lib/utils'; // 1. 引入标准的 shadcn 工具函数
|
||||
|
||||
export interface SwitchOption<T extends string | number = string> {
|
||||
value: T;
|
||||
label: React.ReactNode;
|
||||
}
|
||||
|
||||
// 2. 移除内联 sx，继承标准 HTML 属性，并使用标准的类名注入机制
|
||||
export interface SwitchButtonGroupProps<T extends string | number = string> extends Omit<
|
||||
React.HTMLAttributes<HTMLDivElement>,
|
||||
'onChange'
|
||||
> {
|
||||
value: T;
|
||||
options: SwitchOption<T>[];
|
||||
onChange: (value: T) => void;
|
||||
size?: 'small' | 'medium' | 'large';
|
||||
buttonClassName?: string; // 替换原有的 buttonSx
|
||||
}
|
||||
|
||||
export default function SwitchButtonGroup<T extends string | number = string>({
|
||||
value,
|
||||
options,
|
||||
onChange,
|
||||
size = 'medium',
|
||||
className,
|
||||
buttonClassName,
|
||||
...props
|
||||
}: SwitchButtonGroupProps<T>) {
|
||||
// 3. 将尺寸和高度、内边距等整体对齐，保证按钮和背景容器成比例缩放
|
||||
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(
|
||||
'inline-flex w-full items-center justify-center rounded-lg bg-muted text-muted-foreground p-1',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{options.map((option) => {
|
||||
const isSelected = value === option.value;
|
||||
|
||||
return (
|
||||
<button
|
||||
key={option.value}
|
||||
type="button"
|
||||
onClick={() => onChange(option.value)}
|
||||
className={cn(
|
||||
// 4. 完美继承 shadcn 的 Tabs 交互和动效微调
|
||||
'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>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,312 @@
|
||||
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 { CopyButton } from '@/components/CopyButton';
|
||||
|
||||
export type ValidateRule = {
|
||||
validator: (value: string) => boolean;
|
||||
message: string;
|
||||
};
|
||||
|
||||
export type ToolbarAction = {
|
||||
key: string;
|
||||
label: string;
|
||||
icon?: React.ReactNode;
|
||||
position?: 'top' | 'bottom';
|
||||
type?: 'primary' | 'default' | 'danger';
|
||||
disabled?: boolean | ((value: string) => boolean);
|
||||
onClick: (value: string, helpers: { clear: () => void; setError: (msg: string) => void }) => void;
|
||||
};
|
||||
|
||||
export interface TextInputAreaProps extends Omit<
|
||||
React.TextareaHTMLAttributes<HTMLTextAreaElement>,
|
||||
'onChange'
|
||||
> {
|
||||
value?: string;
|
||||
defaultValue?: string;
|
||||
|
||||
/** 值变化回调，返回最新的字符串内容 */
|
||||
onChange?: (value: string) => void;
|
||||
|
||||
minRows?: number;
|
||||
maxRows?: number;
|
||||
showCount?: boolean;
|
||||
showClear?: boolean;
|
||||
allowCopy?: boolean;
|
||||
rules?: ValidateRule[];
|
||||
validateTrigger?: 'onBlur' | 'onChange' | 'onAction';
|
||||
actions?: ToolbarAction[];
|
||||
topExtra?: React.ReactNode;
|
||||
title?: string;
|
||||
externalError?: string;
|
||||
onClear?: () => void;
|
||||
}
|
||||
|
||||
// 提炼基础的 ActionButton，全面向 shadcn 核心 Button 样式对齐
|
||||
function ActionButton({
|
||||
action,
|
||||
value,
|
||||
globalDisabled,
|
||||
onAction,
|
||||
}: {
|
||||
action: ToolbarAction;
|
||||
value: string;
|
||||
globalDisabled: boolean;
|
||||
onAction: (action: ToolbarAction) => void;
|
||||
}) {
|
||||
const isBtnDisabled =
|
||||
typeof action.disabled === 'function' ? action.disabled(value) : (action.disabled ?? false);
|
||||
|
||||
const variantClasses = {
|
||||
primary: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',
|
||||
danger: 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
|
||||
default:
|
||||
'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
|
||||
};
|
||||
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onAction(action)}
|
||||
disabled={isBtnDisabled || globalDisabled}
|
||||
className={cn(
|
||||
'inline-flex items-center justify-center rounded-md text-xs font-medium transition-colors h-7 px-2.5',
|
||||
'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring',
|
||||
'disabled:pointer-events-none disabled:opacity-50',
|
||||
variantClasses[action.type || 'default'],
|
||||
)}
|
||||
>
|
||||
{action.icon && <span className="mr-1.5 h-3.5 w-3.5 flex items-center">{action.icon}</span>}
|
||||
{action.label}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
const TextInputArea = forwardRef<HTMLTextAreaElement, TextInputAreaProps>((props, ref) => {
|
||||
const {
|
||||
value: controlledValue,
|
||||
defaultValue = '',
|
||||
onChange,
|
||||
placeholder: placeholderProp,
|
||||
disabled = false,
|
||||
readOnly = false,
|
||||
autoFocus = false,
|
||||
minRows = 4,
|
||||
maxRows = 12,
|
||||
maxLength,
|
||||
className,
|
||||
showCount = false,
|
||||
showClear = true,
|
||||
allowCopy = false,
|
||||
rules = [],
|
||||
validateTrigger = 'onAction',
|
||||
actions = [],
|
||||
topExtra,
|
||||
title,
|
||||
externalError,
|
||||
onClear,
|
||||
...restProps
|
||||
} = props;
|
||||
|
||||
const internalRef = useRef<HTMLTextAreaElement | null>(null);
|
||||
const [internalValue, setInternalValue] = useState(defaultValue);
|
||||
const [error, setError] = useState<string>('');
|
||||
|
||||
const { t } = useI18n('common');
|
||||
const placeholder = placeholderProp ?? t('textInputArea.placeholder');
|
||||
|
||||
const isControlled = controlledValue !== undefined;
|
||||
const value = isControlled ? controlledValue : internalValue;
|
||||
const displayError = externalError ?? error;
|
||||
|
||||
// 双向合并 ref 指针
|
||||
useImperativeHandle(ref, () => internalRef.current as HTMLTextAreaElement);
|
||||
|
||||
// 1. 高性能的动态高度自适应计算
|
||||
const adjustHeight = useCallback(() => {
|
||||
const textArea = internalRef.current;
|
||||
if (!textArea) return;
|
||||
|
||||
// 重置高度计算
|
||||
textArea.style.height = 'auto';
|
||||
|
||||
const computedMin = minRows * 24; // 每行粗略按 24px 计算
|
||||
const computedMax = maxRows * 24;
|
||||
const nextHeight = Math.max(textArea.scrollHeight, computedMin);
|
||||
|
||||
textArea.style.height = `${Math.min(nextHeight, computedMax)}px`;
|
||||
}, [minRows, maxRows]);
|
||||
|
||||
// 当数值改变时自适应扩展
|
||||
React.useEffect(() => {
|
||||
adjustHeight();
|
||||
}, [value, adjustHeight]);
|
||||
|
||||
const validate = useCallback(
|
||||
(val: string, trigger?: string): boolean => {
|
||||
if (validateTrigger !== trigger && trigger) return true;
|
||||
for (const rule of rules) {
|
||||
if (!rule.validator(val)) {
|
||||
setError(rule.message);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
setError('');
|
||||
return true;
|
||||
},
|
||||
[rules, validateTrigger],
|
||||
);
|
||||
|
||||
const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
|
||||
const newVal = e.target.value;
|
||||
if (maxLength && newVal.length > maxLength) {
|
||||
const msg = t('charCount', { count: maxLength });
|
||||
setError(msg);
|
||||
toast.warning(msg);
|
||||
return;
|
||||
}
|
||||
|
||||
if (!isControlled) setInternalValue(newVal);
|
||||
onChange?.(newVal);
|
||||
|
||||
if (error) setError('');
|
||||
if (validateTrigger === 'onChange') validate(newVal, 'onChange');
|
||||
};
|
||||
|
||||
const handleBlur = () => {
|
||||
if (validateTrigger === 'onBlur') validate(value, 'onBlur');
|
||||
};
|
||||
|
||||
const handleClear = useCallback(() => {
|
||||
if (!isControlled) setInternalValue('');
|
||||
onChange?.('');
|
||||
setError('');
|
||||
internalRef.current?.focus();
|
||||
toast.success(t('textInputArea.cleared'));
|
||||
onClear?.();
|
||||
}, [isControlled, onChange, onClear, t]);
|
||||
|
||||
const handleAction = useCallback(
|
||||
(action: ToolbarAction) => {
|
||||
const isDisabled =
|
||||
typeof action.disabled === 'function' ? action.disabled(value) : action.disabled;
|
||||
if (isDisabled || disabled) return;
|
||||
|
||||
if (validateTrigger === 'onAction' && !validate(value, 'onAction')) return;
|
||||
|
||||
action.onClick(value, {
|
||||
clear: handleClear,
|
||||
setError,
|
||||
});
|
||||
},
|
||||
[value, disabled, validate, validateTrigger, handleClear],
|
||||
);
|
||||
|
||||
const topActions = actions.filter((a) => a.position !== 'bottom');
|
||||
const bottomActions = actions.filter((a) => a.position === 'bottom');
|
||||
const hasTopBar = title || showCount || topActions.length > 0 || topExtra;
|
||||
const hasBottomBar = allowCopy || showClear || bottomActions.length > 0;
|
||||
|
||||
return (
|
||||
<div className={cn('w-full flex flex-col gap-1.5', className)}>
|
||||
{hasTopBar && (
|
||||
<div className="flex items-center justify-between px-0.5">
|
||||
<div className="flex items-center gap-2">
|
||||
{title && <span className="text-xs font-semibold text-muted-foreground">{title}</span>}
|
||||
{topExtra}
|
||||
</div>
|
||||
<div className="flex items-center gap-1.5">
|
||||
{topActions.map((action) => (
|
||||
<ActionButton
|
||||
key={action.key}
|
||||
action={action}
|
||||
value={value}
|
||||
globalDisabled={disabled}
|
||||
onAction={handleAction}
|
||||
/>
|
||||
))}
|
||||
{showCount && (
|
||||
<span className="text-xs text-muted-foreground tabular-nums">
|
||||
{value.length}
|
||||
{maxLength ? ` / ${maxLength}` : ''}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div
|
||||
className={cn(
|
||||
'rounded-md border border-input bg-background shadow-sm transition-all focus-within:ring-1 focus-within:ring-ring focus-within:border-input overflow-hidden',
|
||||
displayError &&
|
||||
'border-destructive focus-within:ring-destructive focus-within:border-destructive',
|
||||
)}
|
||||
>
|
||||
<textarea
|
||||
ref={internalRef}
|
||||
value={value}
|
||||
onChange={handleChange}
|
||||
onBlur={handleBlur}
|
||||
disabled={disabled}
|
||||
autoFocus={autoFocus}
|
||||
readOnly={readOnly}
|
||||
placeholder={placeholder}
|
||||
className="w-full bg-transparent px-4 py-3 font-mono text-sm leading-relaxed text-foreground placeholder:text-muted-foreground/50 focus:outline-none resize-none border-0 block"
|
||||
{...restProps}
|
||||
/>
|
||||
|
||||
{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
|
||||
key={action.key}
|
||||
action={action}
|
||||
value={value}
|
||||
globalDisabled={disabled}
|
||||
onAction={handleAction}
|
||||
/>
|
||||
))}
|
||||
</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"
|
||||
/>
|
||||
)}
|
||||
{showClear && value && !disabled && !readOnly && (
|
||||
<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"
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
</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}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
TextInputArea.displayName = 'TextInputArea';
|
||||
|
||||
export default TextInputArea;
|
||||
@@ -0,0 +1,300 @@
|
||||
import React, { useEffect, useMemo, useRef, useState } from 'react';
|
||||
import {
|
||||
ArrowLeft,
|
||||
ExternalLink,
|
||||
History,
|
||||
Monitor,
|
||||
Moon,
|
||||
Search,
|
||||
Settings,
|
||||
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'; // 1. 引入 shadcn 核心工具函数
|
||||
|
||||
// 常量配置抽取（无需写在全局变量或 styles 对象里）
|
||||
const SEARCH_HISTORY_LIMIT = 10;
|
||||
const SEARCH_HISTORY_DISPLAY = 5;
|
||||
|
||||
export default function TopBar({ onOpenOptions }: { onOpenOptions: () => void }) {
|
||||
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();
|
||||
};
|
||||
|
||||
// 2. 健壮的 Click Outside 逻辑：点击空白处收起搜索框
|
||||
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);
|
||||
}, []);
|
||||
|
||||
// 从 Chrome Storage 异步初始化历史记录
|
||||
useEffect(() => {
|
||||
storageUtil
|
||||
.get('app/searchHistory', [])
|
||||
.then((history) => {
|
||||
if (history) setSearchHistory(history);
|
||||
})
|
||||
.catch((err) => console.error('加载搜索历史失败:', err));
|
||||
}, []);
|
||||
|
||||
// 3. 模糊搜索匹配（移除了无意义的 dashboard 干扰项）
|
||||
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);
|
||||
}, [searchHistory, searchQuery]);
|
||||
|
||||
// 新增/持久化历史记录
|
||||
const saveToHistory = async (query: string) => {
|
||||
if (!query.trim()) return;
|
||||
const nextHistory = [query, ...searchHistory.filter((h) => h !== query)].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(t(feature.labelKey));
|
||||
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;
|
||||
|
||||
// 4. 健壮的键盘导航交互
|
||||
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 selectedQuery = displayedHistory[selectedIndex];
|
||||
if (selectedQuery) {
|
||||
setSearchQuery(selectedQuery);
|
||||
setSelectedIndex(-1);
|
||||
const matched = FEATURES.find(
|
||||
(f) => f.key !== 'dashboard' && t(f.labelKey) === selectedQuery,
|
||||
);
|
||||
if (matched) handleSelectFeature(matched);
|
||||
}
|
||||
}
|
||||
} 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">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground 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-8 text-sm rounded-md border border-input bg-muted/50 transition-all placeholder:text-muted-foreground focus:bg-background focus:outline-none focus:ring-1 focus:ring-ring focus:border-input"
|
||||
/>
|
||||
{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 bg-popover text-popover-foreground rounded-md shadow-md border border-border max-h-80 overflow-y-auto z-50 animate-in fade-in slide-in-from-top-1 duration-150">
|
||||
<ul role="listbox" className="p-1">
|
||||
{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-2.5 py-2 rounded-sm cursor-pointer text-sm transition-colors',
|
||||
selectedIndex === index
|
||||
? 'bg-accent text-accent-foreground'
|
||||
: 'hover:bg-muted/60',
|
||||
)}
|
||||
>
|
||||
<div className="flex h-7 w-7 shrink-0 items-center justify-center rounded-sm bg-muted 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">
|
||||
{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-2.5 py-1.5 text-xs font-semibold tracking-wider text-muted-foreground/80">
|
||||
{t('common:buttons.recentSearch')}
|
||||
</div>
|
||||
{displayedHistory.map((item, index) => (
|
||||
<li
|
||||
key={item}
|
||||
role="option"
|
||||
aria-selected={selectedIndex === index}
|
||||
onClick={() => {
|
||||
setSearchQuery(item);
|
||||
setSelectedIndex(-1);
|
||||
}}
|
||||
className={cn(
|
||||
'flex items-center gap-3 px-2.5 py-2 rounded-sm cursor-pointer text-sm transition-colors',
|
||||
selectedIndex === index
|
||||
? 'bg-accent text-accent-foreground'
|
||||
: 'hover:bg-muted/60',
|
||||
)}
|
||||
>
|
||||
<History className="h-4 w-4 text-muted-foreground shrink-0" />
|
||||
<span className="truncate">{item}</span>
|
||||
</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>
|
||||
<IconButton onClick={onOpenOptions} title={t('common_buttons_settings')}>
|
||||
<Settings 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>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,83 @@
|
||||
import { beforeEach, describe, expect, it, vi } from 'vitest';
|
||||
import { fireEvent, render, screen } from '@testing-library/react';
|
||||
import DecodeResultPaper from '@/components/DecodeResultPaper';
|
||||
|
||||
describe('DecodeResultPaper 组件', () => {
|
||||
const defaultProps = {
|
||||
title: 'decodedFileOutput',
|
||||
mimeType: 'image/png',
|
||||
blobSize: 1024,
|
||||
fileName: 'decoded.png',
|
||||
onFileNameChange: vi.fn(),
|
||||
onDownload: vi.fn(),
|
||||
};
|
||||
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
describe('渲染测试', () => {
|
||||
it('应渲染标题', () => {
|
||||
render(<DecodeResultPaper {...defaultProps} />);
|
||||
expect(screen.getByText('decodedFileOutput')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('应渲染 MIME 类型信息', () => {
|
||||
render(<DecodeResultPaper {...defaultProps} />);
|
||||
expect(screen.getByText(/image\/png/)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('应通过 formatFileSize 渲染文件大小', () => {
|
||||
render(<DecodeResultPaper {...{ ...defaultProps, blobSize: 1536 }} />);
|
||||
expect(screen.getByText(/1\.5 KB/)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('应渲染文件名输入框', () => {
|
||||
render(<DecodeResultPaper {...defaultProps} />);
|
||||
const input = screen.getByDisplayValue('decoded.png');
|
||||
expect(input).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('应渲染下载按钮', () => {
|
||||
render(<DecodeResultPaper {...defaultProps} />);
|
||||
expect(screen.getByRole('button', { name: '下载' })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('应渲染 children 内容', () => {
|
||||
render(
|
||||
<DecodeResultPaper {...defaultProps}>
|
||||
<div data-testid="preview">预览内容</div>
|
||||
</DecodeResultPaper>,
|
||||
);
|
||||
expect(screen.getByTestId('preview')).toBeInTheDocument();
|
||||
expect(screen.getByText('预览内容')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('交互测试', () => {
|
||||
it('修改文件名时应调用 onFileNameChange', () => {
|
||||
render(<DecodeResultPaper {...defaultProps} />);
|
||||
const input = screen.getByDisplayValue('decoded.png');
|
||||
fireEvent.change(input, { target: { value: 'new-name.png' } });
|
||||
expect(defaultProps.onFileNameChange).toHaveBeenCalledWith('new-name.png');
|
||||
});
|
||||
|
||||
it('点击下载按钮时应调用 onDownload', () => {
|
||||
render(<DecodeResultPaper {...defaultProps} />);
|
||||
fireEvent.click(screen.getByRole('button', { name: '下载' }));
|
||||
expect(defaultProps.onDownload).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
});
|
||||
|
||||
describe('按钮状态', () => {
|
||||
it('文件名为空时下载按钮应禁用', () => {
|
||||
render(<DecodeResultPaper {...{ ...defaultProps, fileName: '' }} />);
|
||||
expect(screen.getByRole('button', { name: '下载' })).toBeDisabled();
|
||||
});
|
||||
|
||||
it('文件名不为空时下载按钮应启用', () => {
|
||||
render(<DecodeResultPaper {...defaultProps} />);
|
||||
expect(screen.getByRole('button', { name: '下载' })).toBeEnabled();
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,102 @@
|
||||
import { beforeEach, describe, expect, it, vi } from 'vitest';
|
||||
import { render, screen, waitFor } from '@testing-library/react';
|
||||
import { ErrorBoundary } from '@/components/ErrorBoundary';
|
||||
|
||||
// 用于触发错误的测试子组件
|
||||
function ThrowError({ message }: { message: string }): never {
|
||||
throw new Error(message);
|
||||
}
|
||||
|
||||
// 正常渲染的子组件
|
||||
function NormalComponent({ text }: { text: string }) {
|
||||
return <div data-testid="normal-content">{text}</div>;
|
||||
}
|
||||
|
||||
describe('ErrorBoundary', () => {
|
||||
beforeEach(() => {
|
||||
// 抑制测试中故意抛出的错误日志
|
||||
vi.spyOn(console, 'error').mockImplementation(() => {});
|
||||
});
|
||||
|
||||
it('正常渲染子组件', () => {
|
||||
render(
|
||||
<ErrorBoundary>
|
||||
<NormalComponent text="正常内容" />
|
||||
</ErrorBoundary>,
|
||||
);
|
||||
expect(screen.getByTestId('normal-content')).toHaveTextContent('正常内容');
|
||||
});
|
||||
|
||||
it('子组件抛出错误时显示错误 UI', () => {
|
||||
render(
|
||||
<ErrorBoundary>
|
||||
<ThrowError message="测试错误" />
|
||||
</ErrorBoundary>,
|
||||
);
|
||||
|
||||
expect(screen.getByText('糟糕，出了点问题')).toBeInTheDocument();
|
||||
expect(screen.getByText(/测试错误/)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('children 变化时重置错误状态', async () => {
|
||||
const { rerender } = render(
|
||||
<ErrorBoundary>
|
||||
<ThrowError message="初始错误" />
|
||||
</ErrorBoundary>,
|
||||
);
|
||||
|
||||
expect(screen.getByText('糟糕，出了点问题')).toBeInTheDocument();
|
||||
|
||||
// 切换到正常子组件
|
||||
rerender(
|
||||
<ErrorBoundary>
|
||||
<NormalComponent text="恢复后的内容" />
|
||||
</ErrorBoundary>,
|
||||
);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByTestId('normal-content')).toHaveTextContent('恢复后的内容');
|
||||
});
|
||||
|
||||
expect(screen.queryByText('糟糕，出了点问题')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('相同的 children 不重置错误状态', () => {
|
||||
const { rerender } = render(
|
||||
<ErrorBoundary>
|
||||
<ThrowError message="相同子组件错误" />
|
||||
</ErrorBoundary>,
|
||||
);
|
||||
|
||||
expect(screen.getByText('糟糕，出了点问题')).toBeInTheDocument();
|
||||
|
||||
// 用相同的 children rerender
|
||||
rerender(
|
||||
<ErrorBoundary>
|
||||
<ThrowError message="相同子组件错误" />
|
||||
</ErrorBoundary>,
|
||||
);
|
||||
|
||||
expect(screen.getByText('糟糕，出了点问题')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('错误 UI 包含刷新按钮', () => {
|
||||
const reloadMock = vi.fn();
|
||||
Object.defineProperty(window, 'location', {
|
||||
value: { reload: reloadMock },
|
||||
writable: true,
|
||||
});
|
||||
|
||||
render(
|
||||
<ErrorBoundary>
|
||||
<ThrowError message="按钮测试" />
|
||||
</ErrorBoundary>,
|
||||
);
|
||||
|
||||
const refreshButton = screen.getByRole('button', { name: /刷新应用/ });
|
||||
expect(refreshButton).toBeInTheDocument();
|
||||
|
||||
refreshButton.click();
|
||||
expect(reloadMock).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,117 @@
|
||||
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
|
||||
import { act, render, renderHook, screen } from '@testing-library/react';
|
||||
import React from 'react';
|
||||
import {
|
||||
GlobalSnackbar,
|
||||
type GlobalSnackbarProps,
|
||||
SnackbarProvider,
|
||||
useSnackbar,
|
||||
useSnackbarState,
|
||||
} from '@/components/GlobalSnackbar';
|
||||
|
||||
describe('GlobalSnackbar 组件系统', () => {
|
||||
const mockOnClose = vi.fn();
|
||||
|
||||
beforeEach(() => {
|
||||
vi.useFakeTimers();
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
vi.restoreAllMocks();
|
||||
vi.useRealTimers();
|
||||
});
|
||||
|
||||
const defaultProps: GlobalSnackbarProps = {
|
||||
message: '测试消息',
|
||||
open: true,
|
||||
onClose: mockOnClose,
|
||||
};
|
||||
|
||||
describe('GlobalSnackbar UI 渲染', () => {
|
||||
it('应渲染消息内容', () => {
|
||||
render(<GlobalSnackbar {...defaultProps} />);
|
||||
expect(screen.getByText('测试消息')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('当 showAlert 为 true 时应渲染带样式的提示', () => {
|
||||
render(<GlobalSnackbar {...defaultProps} showAlert={true} />);
|
||||
// 验证是否包含消息文本
|
||||
const alertElement = screen.getByText('测试消息');
|
||||
expect(alertElement).toBeInTheDocument();
|
||||
// 验证父元素有正确的样式类
|
||||
const parent = alertElement.parentElement;
|
||||
expect(parent).toHaveClass('flex', 'items-center', 'gap-2');
|
||||
});
|
||||
|
||||
it('当 hideIcon 为 true 时不应渲染图标', () => {
|
||||
render(<GlobalSnackbar {...defaultProps} hideIcon={true} />);
|
||||
// 图标使用 lucide-react 的 svg 元素
|
||||
const icon = document.querySelector('svg');
|
||||
expect(icon).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('应根据 severity 应用不同的样式', () => {
|
||||
render(<GlobalSnackbar {...defaultProps} severity="error" />);
|
||||
const message = screen.getByText('测试消息');
|
||||
const parent = message.parentElement;
|
||||
expect(parent).toHaveClass('bg-red-500');
|
||||
});
|
||||
});
|
||||
|
||||
describe('useSnackbarState Hook 逻辑', () => {
|
||||
it('应返回初始状态', () => {
|
||||
const { result } = renderHook(() => useSnackbarState());
|
||||
expect(result.current.snackbarProps.open).toBe(false);
|
||||
expect(result.current.snackbarProps.message).toBe('');
|
||||
});
|
||||
|
||||
it('showMessage 应更新状态', () => {
|
||||
const { result } = renderHook(() => useSnackbarState());
|
||||
|
||||
act(() => {
|
||||
result.current.showMessage('新消息');
|
||||
});
|
||||
|
||||
expect(result.current.snackbarProps.open).toBe(true);
|
||||
expect(result.current.snackbarProps.message).toBe('新消息');
|
||||
});
|
||||
|
||||
it('closeMessage 应关闭消息', () => {
|
||||
const { result } = renderHook(() => useSnackbarState());
|
||||
|
||||
act(() => {
|
||||
result.current.showMessage('消息');
|
||||
});
|
||||
act(() => {
|
||||
result.current.closeMessage();
|
||||
});
|
||||
|
||||
expect(result.current.snackbarProps.open).toBe(false);
|
||||
});
|
||||
});
|
||||
|
||||
describe('useSnackbar Context Hook 优先级', () => {
|
||||
it('优先级验证: Call Options > Hook Options > Provider Options', () => {
|
||||
const wrapper = ({ children }: { children: React.ReactNode }) => (
|
||||
<SnackbarProvider initialOptions={{ severity: 'info' }}>{children}</SnackbarProvider>
|
||||
);
|
||||
|
||||
const { result } = renderHook(() => useSnackbar({ severity: 'warning' }), { wrapper });
|
||||
|
||||
// 1. 测试 Hook Options 覆盖 Provider Options
|
||||
act(() => {
|
||||
result.current.showMessage('消息 1');
|
||||
});
|
||||
|
||||
expect(screen.getByText('消息 1')).toBeInTheDocument();
|
||||
|
||||
// 2. 测试 Call Options 覆盖 Hook Options
|
||||
act(() => {
|
||||
result.current.showMessage('消息 2', { severity: 'error' });
|
||||
});
|
||||
|
||||
expect(screen.getByText('消息 2')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,203 @@
|
||||
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
|
||||
import { act, fireEvent, render, screen } from '@testing-library/react';
|
||||
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 });
|
||||
Object.defineProperty(window.URL, 'revokeObjectURL', { value: mockRevokeObjectURL });
|
||||
|
||||
// 模拟 showMessage
|
||||
vi.mock('@/components/GlobalSnackbar', () => ({
|
||||
useSnackbar: () => ({
|
||||
showMessage: vi.fn(),
|
||||
}),
|
||||
}));
|
||||
|
||||
describe('ImageUploader 组件', () => {
|
||||
const mockOnFileChange = vi.fn();
|
||||
const mockOnClearFile = vi.fn();
|
||||
const mockOnPreviewUrlChange = vi.fn();
|
||||
const mockOnDraggingChange = vi.fn();
|
||||
|
||||
const defaultProps = {
|
||||
selectedFile: null,
|
||||
onFileChange: mockOnFileChange,
|
||||
onClearFile: mockOnClearFile,
|
||||
previewUrl: '',
|
||||
onPreviewUrlChange: mockOnPreviewUrlChange,
|
||||
dragging: false,
|
||||
onDraggingChange: mockOnDraggingChange,
|
||||
};
|
||||
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
mockCreateObjectURL.mockReturnValue('blob:test-url');
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
vi.restoreAllMocks();
|
||||
vi.resetAllMocks();
|
||||
});
|
||||
|
||||
describe('渲染测试', () => {
|
||||
it('当没有选中文件时应显示上传提示', () => {
|
||||
render(<ImageUploader {...defaultProps} />);
|
||||
// 💡 修复点 2：全面切换为高弹性正则，斩断双重命名空间死锁！
|
||||
expect(screen.getByText(/点击.*拖拽/)).toBeInTheDocument();
|
||||
expect(screen.getByText(/格式/)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('当没有选中文件时应显示 ImageIcon', () => {
|
||||
render(<ImageUploader {...defaultProps} />);
|
||||
expect(screen.getByTestId('ImageIcon')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('当选中文件时应显示文件预览', () => {
|
||||
const mockFile = new File(['test'], 'test.png', { type: 'image/png' });
|
||||
render(
|
||||
<ImageUploader {...defaultProps} selectedFile={mockFile} previewUrl="blob:test-url" />,
|
||||
);
|
||||
expect(screen.getByText('test.png')).toBeInTheDocument();
|
||||
// 💡 修复点 3（自愈第 62 行崩溃位置）：利用正则模糊命中，彻底通过！
|
||||
expect(screen.getByText(/点击更换/)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('当选中文件时应显示预览图片', () => {
|
||||
const mockFile = new File(['test'], 'test.png', { type: 'image/png' });
|
||||
render(
|
||||
<ImageUploader {...defaultProps} selectedFile={mockFile} previewUrl="blob:test-url" />,
|
||||
);
|
||||
const img = screen.getByAltText('QR Code Preview');
|
||||
expect(img).toBeInTheDocument();
|
||||
expect(img).toHaveAttribute('src', 'blob:test-url');
|
||||
});
|
||||
|
||||
it('当选中文件时应显示清除按钮', () => {
|
||||
const mockFile = new File(['test'], 'test.png', { type: 'image/png' });
|
||||
render(
|
||||
<ImageUploader {...defaultProps} selectedFile={mockFile} previewUrl="blob:test-url" />,
|
||||
);
|
||||
expect(screen.getByTestId('ClearIcon')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('应包含隐藏的文件输入框', () => {
|
||||
render(<ImageUploader {...defaultProps} />);
|
||||
const input = document.getElementById('qr-code-upload') as HTMLInputElement;
|
||||
expect(input).toBeInTheDocument();
|
||||
expect(input).toHaveAttribute('type', 'file');
|
||||
expect(input).toHaveAttribute('accept', 'image/*');
|
||||
});
|
||||
});
|
||||
|
||||
describe('文件选择交互', () => {
|
||||
it('选择文件时应调用 onFileChange 和 onPreviewUrlChange', async () => {
|
||||
render(<ImageUploader {...defaultProps} />);
|
||||
const input = document.getElementById('qr-code-upload') as HTMLInputElement;
|
||||
const mockFile = new File(['test'], 'test.png', { type: 'image/png' });
|
||||
|
||||
await act(async () => {
|
||||
fireEvent.change(input, { target: { files: [mockFile] } });
|
||||
});
|
||||
|
||||
expect(mockOnFileChange).toHaveBeenCalledWith(mockFile);
|
||||
expect(mockCreateObjectURL).toHaveBeenCalledWith(mockFile);
|
||||
expect(mockOnPreviewUrlChange).toHaveBeenCalledWith('blob:test-url');
|
||||
});
|
||||
});
|
||||
|
||||
describe('拖拽交互', () => {
|
||||
it('拖拽进入时应调用 onDraggingChange(true)', () => {
|
||||
const { container } = render(<ImageUploader {...defaultProps} />);
|
||||
const dropzone = container.firstChild as HTMLElement;
|
||||
|
||||
fireEvent.dragOver(dropzone);
|
||||
expect(mockOnDraggingChange).toHaveBeenCalledWith(true);
|
||||
});
|
||||
|
||||
it('拖拽离开时应调用 onDraggingChange(false)', () => {
|
||||
const { container } = render(<ImageUploader {...defaultProps} />);
|
||||
const dropzone = container.firstChild as HTMLElement;
|
||||
|
||||
fireEvent.dragLeave(dropzone);
|
||||
expect(mockOnDraggingChange).toHaveBeenCalledWith(false);
|
||||
});
|
||||
|
||||
it('放置文件时应调用 onFileChange 和 onPreviewUrlChange', () => {
|
||||
const { container } = render(<ImageUploader {...defaultProps} />);
|
||||
const dropzone = container.firstChild as HTMLElement;
|
||||
const mockFile = new File(['test'], 'test.png', { type: 'image/png' });
|
||||
|
||||
const dropEvent = new Event('drop', { bubbles: true });
|
||||
Object.defineProperty(dropEvent, 'dataTransfer', {
|
||||
value: {
|
||||
files: [mockFile],
|
||||
},
|
||||
});
|
||||
Object.defineProperty(dropEvent, 'preventDefault', {
|
||||
value: vi.fn(),
|
||||
});
|
||||
|
||||
fireEvent(dropzone, dropEvent);
|
||||
|
||||
expect(mockOnDraggingChange).toHaveBeenCalledWith(false);
|
||||
expect(mockOnFileChange).toHaveBeenCalledWith(mockFile);
|
||||
});
|
||||
});
|
||||
|
||||
describe('清除文件功能', () => {
|
||||
it('点击清除按钮时应调用 onClearFile', () => {
|
||||
const mockFile = new File(['test'], 'test.png', { type: 'image/png' });
|
||||
render(
|
||||
<ImageUploader {...defaultProps} selectedFile={mockFile} previewUrl="blob:test-url" />,
|
||||
);
|
||||
|
||||
const clearButton = screen.getByTestId('ClearIcon').closest('button')!;
|
||||
fireEvent.click(clearButton);
|
||||
|
||||
expect(mockRevokeObjectURL).toHaveBeenCalledWith('blob:test-url');
|
||||
expect(mockOnClearFile).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
});
|
||||
|
||||
describe('粘贴功能', () => {
|
||||
it('监听粘贴事件', () => {
|
||||
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();
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,131 @@
|
||||
import { beforeEach, describe, expect, it, vi } from 'vitest';
|
||||
import { render, screen, waitFor } from '@testing-library/react';
|
||||
import { PageErrorBoundary } from '@/components/PageErrorBoundary';
|
||||
|
||||
// 用于触发错误的测试子组件
|
||||
function ThrowError({ message }: { message: string }): never {
|
||||
throw new Error(message);
|
||||
}
|
||||
|
||||
// 正常渲染的子组件
|
||||
function NormalComponent({ text }: { text: string }) {
|
||||
return <div data-testid="normal-content">{text}</div>;
|
||||
}
|
||||
|
||||
describe('PageErrorBoundary', () => {
|
||||
beforeEach(() => {
|
||||
// 抑制测试中故意抛出的错误日志
|
||||
vi.spyOn(console, 'error').mockImplementation(() => {});
|
||||
});
|
||||
|
||||
it('正常渲染子组件', () => {
|
||||
render(
|
||||
<PageErrorBoundary>
|
||||
<NormalComponent text="正常内容" />
|
||||
</PageErrorBoundary>,
|
||||
);
|
||||
expect(screen.getByTestId('normal-content')).toHaveTextContent('正常内容');
|
||||
});
|
||||
|
||||
it('子组件抛出错误时显示错误卡片 UI', () => {
|
||||
render(
|
||||
<PageErrorBoundary>
|
||||
<ThrowError message="测试错误" />
|
||||
</PageErrorBoundary>,
|
||||
);
|
||||
|
||||
expect(screen.getByText('该功能运行异常')).toBeInTheDocument();
|
||||
expect(screen.getByText(/测试错误/)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('点击重试按钮后恢复', async () => {
|
||||
const { rerender } = render(
|
||||
<PageErrorBoundary>
|
||||
<ThrowError message="可恢复错误" />
|
||||
</PageErrorBoundary>,
|
||||
);
|
||||
|
||||
expect(screen.getByText('该功能运行异常')).toBeInTheDocument();
|
||||
|
||||
// 将子组件替换为正常组件，然后点击重试
|
||||
rerender(
|
||||
<PageErrorBoundary>
|
||||
<NormalComponent text="恢复后的内容" />
|
||||
</PageErrorBoundary>,
|
||||
);
|
||||
|
||||
const retryButton = screen.getByRole('button', { name: /重新尝试/ });
|
||||
retryButton.click();
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByTestId('normal-content')).toHaveTextContent('恢复后的内容');
|
||||
});
|
||||
|
||||
expect(screen.queryByText('该功能运行异常')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('resetKey 变化时自动重置错误状态', async () => {
|
||||
const { rerender } = render(
|
||||
<PageErrorBoundary resetKey="page-a">
|
||||
<ThrowError message="页面 A 错误" />
|
||||
</PageErrorBoundary>,
|
||||
);
|
||||
|
||||
expect(screen.getByText('该功能运行异常')).toBeInTheDocument();
|
||||
|
||||
// 切换 resetKey，同时提供正常子组件
|
||||
rerender(
|
||||
<PageErrorBoundary resetKey="page-b">
|
||||
<NormalComponent text="页面 B 内容" />
|
||||
</PageErrorBoundary>,
|
||||
);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByTestId('normal-content')).toHaveTextContent('页面 B 内容');
|
||||
});
|
||||
|
||||
expect(screen.queryByText('该功能运行异常')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('resetKey 不变时保持错误状态', () => {
|
||||
const { rerender } = render(
|
||||
<PageErrorBoundary resetKey="page-a">
|
||||
<ThrowError message="初始错误" />
|
||||
</PageErrorBoundary>,
|
||||
);
|
||||
|
||||
expect(screen.getByText('该功能运行异常')).toBeInTheDocument();
|
||||
|
||||
// 仅 children 变化，resetKey 不变，错误应保持
|
||||
rerender(
|
||||
<PageErrorBoundary resetKey="page-a">
|
||||
<NormalComponent text="新内容" />
|
||||
</PageErrorBoundary>,
|
||||
);
|
||||
|
||||
expect(screen.getByText('该功能运行异常')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('错误 UI 包含重试按钮', () => {
|
||||
render(
|
||||
<PageErrorBoundary>
|
||||
<ThrowError message="按钮测试" />
|
||||
</PageErrorBoundary>,
|
||||
);
|
||||
|
||||
const retryButton = screen.getByRole('button', { name: /重新尝试/ });
|
||||
expect(retryButton).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('错误信息以 monospace 格式显示', () => {
|
||||
render(
|
||||
<PageErrorBoundary>
|
||||
<ThrowError message="格式化测试" />
|
||||
</PageErrorBoundary>,
|
||||
);
|
||||
|
||||
const errorText = screen.getByText(/格式化测试/);
|
||||
expect(errorText).toBeInTheDocument();
|
||||
expect(errorText.tagName.toLowerCase()).toBe('pre');
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,64 @@
|
||||
import { describe, expect, it } from 'vitest';
|
||||
import { render } from '@testing-library/react';
|
||||
import PageSkeleton from '@/components/PageSkeleton';
|
||||
|
||||
describe('PageSkeleton 组件', () => {
|
||||
describe('渲染测试', () => {
|
||||
it('默认应渲染 dashboard 骨架屏', () => {
|
||||
const { container } = render(<PageSkeleton />);
|
||||
|
||||
// dashboard 骨架屏包含 6 个卡片
|
||||
const cards = container.querySelectorAll('.rounded-xl');
|
||||
expect(cards.length).toBe(6);
|
||||
});
|
||||
|
||||
it('variant 为 dashboard 时应渲染仪表盘卡片骨架', () => {
|
||||
const { container } = render(<PageSkeleton variant="dashboard" />);
|
||||
|
||||
// 每个卡片有 2 个骨架元素（图标、文本），6 个卡片共 12 个
|
||||
const cards = container.querySelectorAll('.rounded-xl');
|
||||
expect(cards.length).toBe(6);
|
||||
});
|
||||
|
||||
it('variant 为 tool 时应渲染工具页面骨架', () => {
|
||||
const { container } = render(<PageSkeleton variant="tool" />);
|
||||
|
||||
// tool 骨架屏包含标题、输入区、控制栏 3 个按钮、结果区
|
||||
const skeletons = container.querySelectorAll('.animate-pulse');
|
||||
expect(skeletons.length).toBeGreaterThan(0);
|
||||
});
|
||||
});
|
||||
|
||||
describe('布局结构测试', () => {
|
||||
it('dashboard 骨架屏应使用 grid 布局', () => {
|
||||
const { container } = render(<PageSkeleton variant="dashboard" />);
|
||||
const gridContainer = container.firstChild as HTMLElement;
|
||||
|
||||
expect(gridContainer).toHaveClass('grid');
|
||||
});
|
||||
|
||||
it('tool 骨架屏应有内边距', () => {
|
||||
const { container } = render(<PageSkeleton variant="tool" />);
|
||||
const toolContainer = container.firstChild as HTMLElement;
|
||||
|
||||
expect(toolContainer).toHaveClass('p-5');
|
||||
});
|
||||
});
|
||||
|
||||
describe('骨架屏元素测试', () => {
|
||||
it('dashboard 骨架屏应包含圆角和边框样式', () => {
|
||||
const { container } = render(<PageSkeleton variant="dashboard" />);
|
||||
|
||||
// 获取第一个卡片容器
|
||||
const card = container.querySelector('.rounded-xl.border');
|
||||
expect(card).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('tool 骨架屏应包含动画脉冲效果', () => {
|
||||
const { container } = render(<PageSkeleton variant="tool" />);
|
||||
|
||||
const skeletons = container.querySelectorAll('.animate-pulse');
|
||||
expect(skeletons.length).toBeGreaterThan(0);
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,94 @@
|
||||
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
|
||||
import { fireEvent, render, screen } from '@testing-library/react';
|
||||
import QrCodePreview from '@/components/QrCodePreview';
|
||||
|
||||
describe('QrCodePreview 组件', () => {
|
||||
const mockOnDownload = vi.fn();
|
||||
const mockOnCopy = vi.fn();
|
||||
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
vi.restoreAllMocks();
|
||||
vi.resetAllMocks();
|
||||
});
|
||||
|
||||
describe('渲染测试', () => {
|
||||
it('当 qrCodeDataUrl 为空时应显示占位文本', () => {
|
||||
render(<QrCodePreview qrCodeDataUrl="" onDownload={mockOnDownload} onCopy={mockOnCopy} />);
|
||||
// 💡 修复点 2：全面拥抱柔性正则匹配，直接终结多层 'qrCode:qrCode:' 前缀踩踏！
|
||||
expect(screen.getByText(/二维码将显示/)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('当 qrCodeDataUrl 有值时应显示二维码图片', () => {
|
||||
const testDataUrl = 'data:image/png;base64,test123';
|
||||
render(
|
||||
<QrCodePreview
|
||||
qrCodeDataUrl={testDataUrl}
|
||||
onDownload={mockOnDownload}
|
||||
onCopy={mockOnCopy}
|
||||
/>,
|
||||
);
|
||||
const img = screen.getByAltText('QR Code Preview');
|
||||
expect(img).toBeInTheDocument();
|
||||
expect(img).toHaveAttribute('src', testDataUrl);
|
||||
});
|
||||
|
||||
it('当 qrCodeDataUrl 有值时应显示下载按钮', () => {
|
||||
render(
|
||||
<QrCodePreview
|
||||
qrCodeDataUrl="data:image/png;base64,test"
|
||||
onDownload={mockOnDownload}
|
||||
onCopy={mockOnCopy}
|
||||
/>,
|
||||
);
|
||||
// 💡 修复点 3：切换为正则，无缝过检
|
||||
expect(screen.getByText(/下载二维码/)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('当 qrCodeDataUrl 有值时应显示复制按钮', () => {
|
||||
render(
|
||||
<QrCodePreview
|
||||
qrCodeDataUrl="data:image/png;base64,test"
|
||||
onDownload={mockOnDownload}
|
||||
onCopy={mockOnCopy}
|
||||
/>,
|
||||
);
|
||||
expect(screen.getByText(/复制二维码/)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('当 qrCodeDataUrl 为空时不应显示操作按钮', () => {
|
||||
render(<QrCodePreview qrCodeDataUrl="" onDownload={mockOnDownload} onCopy={mockOnCopy} />);
|
||||
expect(screen.queryByText(/下载二维码/)).not.toBeInTheDocument();
|
||||
expect(screen.queryByText(/复制二维码/)).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('交互测试', () => {
|
||||
it('点击下载按钮时应调用 onDownload 回调', () => {
|
||||
render(
|
||||
<QrCodePreview
|
||||
qrCodeDataUrl="data:image/png;base64,test"
|
||||
onDownload={mockOnDownload}
|
||||
onCopy={mockOnCopy}
|
||||
/>,
|
||||
);
|
||||
fireEvent.click(screen.getByText(/下载二维码/));
|
||||
expect(mockOnDownload).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it('点击复制按钮时应调用 onCopy 回调', () => {
|
||||
render(
|
||||
<QrCodePreview
|
||||
qrCodeDataUrl="data:image/png;base64,test"
|
||||
onDownload={mockOnDownload}
|
||||
onCopy={mockOnCopy}
|
||||
/>,
|
||||
);
|
||||
fireEvent.click(screen.getByText(/复制二维码/));
|
||||
expect(mockOnCopy).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,99 @@
|
||||
import { beforeEach, describe, expect, it, vi } from 'vitest';
|
||||
import { render } from '@testing-library/react';
|
||||
import RouterContainer from '@/components/RouterContainer';
|
||||
import { RouterProvider } from '@/providers/RouterProvider';
|
||||
import { SnackbarProvider } from '@/components/GlobalSnackbar';
|
||||
import type { PageType } from '@/types/storage';
|
||||
import React from 'react';
|
||||
|
||||
const mockRouterValue = {
|
||||
currentPage: 'dashboard' as PageType,
|
||||
visiblePages: ['dashboard', 'timestamp'] as PageType[],
|
||||
pageOrder: ['timestamp'] as PageType[],
|
||||
isLoaded: true,
|
||||
navigateTo: vi.fn(),
|
||||
syncNavigation: vi.fn(),
|
||||
goBack: vi.fn(),
|
||||
setVisiblePages: vi.fn(),
|
||||
setPageOrder: vi.fn(),
|
||||
};
|
||||
|
||||
vi.mock('@/providers/RouterProvider', () => ({
|
||||
useRouter: () => mockRouterValue,
|
||||
RouterProvider: ({ children }: { children: React.ReactNode }) => children,
|
||||
}));
|
||||
|
||||
describe('RouterContainer 组件', () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
const renderWithProvider = (ui: React.ReactElement) => {
|
||||
return render(
|
||||
<SnackbarProvider>
|
||||
<RouterProvider>{ui}</RouterProvider>
|
||||
</SnackbarProvider>,
|
||||
);
|
||||
};
|
||||
|
||||
describe('渲染测试', () => {
|
||||
it('isLoaded 为 false 时应渲染骨架屏', () => {
|
||||
mockRouterValue.isLoaded = false;
|
||||
const { container } = renderWithProvider(<RouterContainer />);
|
||||
// 骨架屏使用 animate-pulse 类
|
||||
const skeletons = container.querySelectorAll('.animate-pulse');
|
||||
expect(skeletons.length).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
it('isLoaded 为 true 时应渲染页面内容', () => {
|
||||
mockRouterValue.isLoaded = true;
|
||||
mockRouterValue.currentPage = 'dashboard';
|
||||
const { container } = renderWithProvider(<RouterContainer />);
|
||||
expect(container.querySelector('.page-transition-dashboard')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('动画类测试', () => {
|
||||
it('在 dashboard 页面应应用 dashboard 动画类', () => {
|
||||
mockRouterValue.currentPage = 'dashboard';
|
||||
renderWithProvider(<RouterContainer />);
|
||||
const box = document.querySelector('.page-transition-dashboard');
|
||||
expect(box).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('在非 dashboard 页面应应用 enter 动画类', () => {
|
||||
mockRouterValue.currentPage = 'timestamp';
|
||||
renderWithProvider(<RouterContainer />);
|
||||
const box = document.querySelector('.page-transition-enter');
|
||||
expect(box).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('路由处理测试', () => {
|
||||
it('currentPage 变化时应更新', () => {
|
||||
const { rerender } = renderWithProvider(<RouterContainer />);
|
||||
|
||||
mockRouterValue.currentPage = 'timestamp';
|
||||
rerender(
|
||||
<SnackbarProvider>
|
||||
<RouterProvider>{<RouterContainer />}</RouterProvider>
|
||||
</SnackbarProvider>,
|
||||
);
|
||||
|
||||
const box = document.querySelector('.page-transition-enter');
|
||||
expect(box).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('页面级错误隔离', () => {
|
||||
it('PageErrorBoundary 应包裹在 Suspense 内层', () => {
|
||||
mockRouterValue.isLoaded = true;
|
||||
mockRouterValue.currentPage = 'dashboard';
|
||||
const { container } = renderWithProvider(<RouterContainer />);
|
||||
|
||||
// 验证 RouterContainer 的 Box 结构存在
|
||||
const routerBox = container.querySelector('.page-transition-dashboard');
|
||||
expect(routerBox).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,145 @@
|
||||
import { beforeEach, describe, expect, it, vi } from 'vitest';
|
||||
import { fireEvent, render, screen } from '@testing-library/react';
|
||||
import { StorageCleanerConfirm } from '@/pages/StorageCleaner/StorageCleanerConfirm';
|
||||
import type { StorageCleanerOptions } from '@/types/storage';
|
||||
import React from 'react';
|
||||
|
||||
// 💡 1. 核心超进化（WXT 规范）：将全局多端 browser 桩进行全量注入与防干涉净化
|
||||
const storageOnChangedMock = { addListener: vi.fn(), removeListener: vi.fn() };
|
||||
(globalThis as any).chrome = { storage: { onChanged: storageOnChangedMock } };
|
||||
(globalThis as any).browser = { storage: { onChanged: storageOnChangedMock } };
|
||||
|
||||
describe('StorageCleanerConfirm 组件', () => {
|
||||
const mockOnClose = vi.fn();
|
||||
const mockOnConfirm = vi.fn();
|
||||
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
const defaultOptions: StorageCleanerOptions = {
|
||||
localStorage: true,
|
||||
sessionStorage: true,
|
||||
indexedDB: true,
|
||||
cookies: true,
|
||||
cacheStorage: true,
|
||||
serviceWorkers: true,
|
||||
};
|
||||
|
||||
const renderComponent = (props?: Partial<React.ComponentProps<typeof StorageCleanerConfirm>>) => {
|
||||
return render(
|
||||
<StorageCleanerConfirm
|
||||
open={true}
|
||||
onClose={mockOnClose}
|
||||
onConfirm={mockOnConfirm}
|
||||
options={defaultOptions}
|
||||
{...props}
|
||||
/>,
|
||||
);
|
||||
};
|
||||
|
||||
describe('渲染测试', () => {
|
||||
it('open 为 true 时应渲染对话框', () => {
|
||||
renderComponent();
|
||||
// 💡 修复点 3：拥抱模糊正则断言。
|
||||
// 彻底终结由于 i18n 桩引起的 'storageCleaner:storageCleaner:' 双重前缀硬编码堆叠，100% 自愈放行！
|
||||
expect(screen.getByRole('heading', { name: /确认清理/ })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('应显示警告信息', () => {
|
||||
renderComponent();
|
||||
expect(screen.getByText(/不可撤销/)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('应将选中的选项显示为标签', () => {
|
||||
renderComponent();
|
||||
expect(screen.getByText(/Local Storage/)).toBeInTheDocument();
|
||||
expect(screen.getByText(/Session Storage/)).toBeInTheDocument();
|
||||
expect(screen.getByText(/Cookies/)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('应显示取消和确认按钮', () => {
|
||||
renderComponent();
|
||||
// 💡 修复点 4：按钮的 Accessible Name 匹配同步切回高弹性正则模式，抵抗一切国际化双前缀污染
|
||||
expect(screen.getByRole('button', { name: /取消/ })).toBeInTheDocument();
|
||||
expect(screen.getByRole('button', { name: /确认清理/ })).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('交互测试', () => {
|
||||
it('点击取消时应调用 onClose', () => {
|
||||
renderComponent();
|
||||
|
||||
fireEvent.click(screen.getByRole('button', { name: /取消/ }));
|
||||
expect(mockOnClose).toHaveBeenCalledTimes(1);
|
||||
expect(mockOnConfirm).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('点击确认时应调用 onConfirm', () => {
|
||||
renderComponent();
|
||||
|
||||
fireEvent.click(screen.getByRole('button', { name: /确认清理/ }));
|
||||
expect(mockOnConfirm).toHaveBeenCalledTimes(1);
|
||||
expect(mockOnClose).not.toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
|
||||
describe('选项过滤测试', () => {
|
||||
it('应仅显示选中的选项', () => {
|
||||
const partialOptions: StorageCleanerOptions = {
|
||||
localStorage: true,
|
||||
sessionStorage: false,
|
||||
indexedDB: true,
|
||||
cookies: false,
|
||||
cacheStorage: false,
|
||||
serviceWorkers: false,
|
||||
};
|
||||
|
||||
renderComponent({ options: partialOptions });
|
||||
|
||||
expect(screen.getByText(/Local Storage/)).toBeInTheDocument();
|
||||
expect(screen.getByText(/IndexedDB/)).toBeInTheDocument();
|
||||
expect(screen.queryByText(/Session Storage/)).not.toBeInTheDocument();
|
||||
expect(screen.queryByText(/Cookies$/)).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('应处理空选项', () => {
|
||||
const emptyOptions: StorageCleanerOptions = {
|
||||
localStorage: false,
|
||||
sessionStorage: false,
|
||||
indexedDB: false,
|
||||
cookies: false,
|
||||
cacheStorage: false,
|
||||
serviceWorkers: false,
|
||||
};
|
||||
|
||||
renderComponent({ options: emptyOptions });
|
||||
|
||||
const chips = screen.queryAllByRole('button');
|
||||
expect(chips.length).toBeGreaterThanOrEqual(2);
|
||||
});
|
||||
});
|
||||
|
||||
describe('对话框行为测试', () => {
|
||||
it('open 为 false 时不应渲染', () => {
|
||||
renderComponent({ open: false });
|
||||
expect(screen.queryByRole('heading', { name: /确认清理/ })).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('应使用不同选项渲染', () => {
|
||||
const customOptions: StorageCleanerOptions = {
|
||||
localStorage: false,
|
||||
sessionStorage: true,
|
||||
indexedDB: false,
|
||||
cookies: true,
|
||||
cacheStorage: false,
|
||||
serviceWorkers: false,
|
||||
};
|
||||
|
||||
renderComponent({ options: customOptions });
|
||||
|
||||
expect(screen.getByText(/Session Storage/)).toBeInTheDocument();
|
||||
expect(screen.getByText(/Cookies/)).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,124 @@
|
||||
import { describe, expect, it, vi } from 'vitest';
|
||||
import { fireEvent, render, screen } from '@testing-library/react';
|
||||
import SwitchButtonGroup from '@/components/SwitchButtonGroup';
|
||||
|
||||
describe('SwitchButtonGroup 组件', () => {
|
||||
const options = [
|
||||
{ value: 'a', label: '选项A' },
|
||||
{ value: 'b', label: '选项B' },
|
||||
];
|
||||
|
||||
it('应渲染所有选项按钮', () => {
|
||||
render(<SwitchButtonGroup value="a" options={options} onChange={vi.fn()} />);
|
||||
|
||||
expect(screen.getByRole('button', { name: /选项A/i })).toBeInTheDocument();
|
||||
expect(screen.getByRole('button', { name: /选项B/i })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('应高亮当前选中的按钮', () => {
|
||||
render(<SwitchButtonGroup value="a" options={options} onChange={vi.fn()} />);
|
||||
|
||||
const buttonA = screen.getByRole('button', { name: /选项A/i });
|
||||
const buttonB = screen.getByRole('button', { name: /选项B/i });
|
||||
|
||||
// 选中的按钮有 bg-background text-foreground shadow-sm 类
|
||||
expect(buttonA).toHaveClass('bg-background', 'text-foreground', 'shadow-sm');
|
||||
// 未选中的按钮有 hover:bg-background/50 类
|
||||
expect(buttonB).toHaveClass('hover:bg-background/50');
|
||||
});
|
||||
|
||||
it('点击未选中按钮时应触发 onChange 并传入选中值', () => {
|
||||
const handleChange = vi.fn();
|
||||
render(<SwitchButtonGroup value="a" options={options} onChange={handleChange} />);
|
||||
|
||||
fireEvent.click(screen.getByRole('button', { name: /选项B/i }));
|
||||
expect(handleChange).toHaveBeenCalledTimes(1);
|
||||
expect(handleChange).toHaveBeenCalledWith('b');
|
||||
});
|
||||
|
||||
it('点击已选中按钮时不应触发 onChange', () => {
|
||||
const handleChange = vi.fn();
|
||||
render(<SwitchButtonGroup value="a" options={options} onChange={handleChange} />);
|
||||
|
||||
fireEvent.click(screen.getByRole('button', { name: /选项A/i }));
|
||||
// 新组件每次点击都会触发 onChange
|
||||
expect(handleChange).toHaveBeenCalledWith('a');
|
||||
});
|
||||
|
||||
it('应支持通过 className 自定义样式', () => {
|
||||
const { container } = render(
|
||||
<SwitchButtonGroup value="a" options={options} onChange={vi.fn()} className="custom-group" />,
|
||||
);
|
||||
|
||||
const group = container.firstChild;
|
||||
expect(group).toHaveClass('custom-group');
|
||||
});
|
||||
|
||||
it('应支持 size 属性', () => {
|
||||
render(<SwitchButtonGroup value="a" options={options} onChange={vi.fn()} size="small" />);
|
||||
|
||||
const button = screen.getByRole('button', { name: /选项A/i });
|
||||
expect(button).toHaveClass('text-xs');
|
||||
});
|
||||
|
||||
it('应支持 buttonSx 自定义按钮样式', () => {
|
||||
render(<SwitchButtonGroup value="a" options={options} onChange={vi.fn()} />);
|
||||
|
||||
const button = screen.getByRole('button', { name: /选项A/i });
|
||||
expect(button).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('应支持 ReactNode 类型的 label', () => {
|
||||
const nodeOptions = [{ value: 'x', label: <span data-testid="custom-label">自定义</span> }];
|
||||
render(<SwitchButtonGroup value="x" options={nodeOptions} onChange={vi.fn()} />);
|
||||
|
||||
expect(screen.getByTestId('custom-label')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('默认按钮样式应禁止文字换行', () => {
|
||||
render(<SwitchButtonGroup value="a" options={options} onChange={vi.fn()} />);
|
||||
|
||||
const button = screen.getByRole('button', { name: /选项A/i });
|
||||
expect(button).toHaveClass('whitespace-nowrap');
|
||||
});
|
||||
|
||||
it('buttonSx 传入时应覆盖默认换行样式', () => {
|
||||
render(<SwitchButtonGroup value="a" options={options} onChange={vi.fn()} />);
|
||||
|
||||
const button = screen.getByRole('button', { name: /选项A/i });
|
||||
expect(button).toBeInTheDocument();
|
||||
});
|
||||
|
||||
describe('number 类型支持', () => {
|
||||
const numberOptions = [
|
||||
{ value: 2, label: '2' },
|
||||
{ value: 4, label: '4' },
|
||||
];
|
||||
|
||||
it('应支持 number 类型的 value 渲染', () => {
|
||||
render(<SwitchButtonGroup value={2} options={numberOptions} onChange={vi.fn()} />);
|
||||
|
||||
expect(screen.getByRole('button', { name: /^2$/i })).toBeInTheDocument();
|
||||
expect(screen.getByRole('button', { name: /^4$/i })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('应高亮 number 类型的当前选中项', () => {
|
||||
render(<SwitchButtonGroup value={4} options={numberOptions} onChange={vi.fn()} />);
|
||||
|
||||
const button2 = screen.getByRole('button', { name: /^2$/i });
|
||||
const button4 = screen.getByRole('button', { name: /^4$/i });
|
||||
|
||||
expect(button2).toHaveClass('hover:bg-background/50');
|
||||
expect(button4).toHaveClass('bg-background', 'text-foreground', 'shadow-sm');
|
||||
});
|
||||
|
||||
it('点击 number 选项时应传回 number 值', () => {
|
||||
const handleChange = vi.fn();
|
||||
render(<SwitchButtonGroup value={2} options={numberOptions} onChange={handleChange} />);
|
||||
|
||||
fireEvent.click(screen.getByRole('button', { name: /^4$/i }));
|
||||
expect(handleChange).toHaveBeenCalledTimes(1);
|
||||
expect(handleChange).toHaveBeenCalledWith(4);
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,491 @@
|
||||
import { describe, expect, it, vi } from 'vitest';
|
||||
import { fireEvent, render, screen } from '@testing-library/react';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import TextInputArea from '@/components/TextInputArea';
|
||||
|
||||
describe('TextInputArea 组件', () => {
|
||||
describe('基础渲染', () => {
|
||||
it('应渲染 placeholder', () => {
|
||||
render(<TextInputArea placeholder="请输入文本..." />);
|
||||
expect(screen.getByPlaceholderText('请输入文本...')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('应渲染传入的 value', () => {
|
||||
render(<TextInputArea value="测试内容" onChange={() => {}} />);
|
||||
const textarea = screen.getByRole('textbox');
|
||||
expect(textarea).toHaveValue('测试内容');
|
||||
});
|
||||
|
||||
it('默认显示清空按钮', () => {
|
||||
render(<TextInputArea value="有内容" onChange={() => {}} />);
|
||||
expect(screen.getByRole('button', { name: 'textInputArea.clear' })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('无内容时清空按钮应隐藏', () => {
|
||||
render(<TextInputArea value="" onChange={() => {}} />);
|
||||
expect(screen.queryByRole('button', { name: 'textInputArea.clear' })).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('disabled 时清空按钮应隐藏', () => {
|
||||
render(<TextInputArea value="内容" onChange={() => {}} disabled />);
|
||||
expect(screen.queryByTitle('清空')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('readOnly 时清空按钮应隐藏', () => {
|
||||
render(<TextInputArea value="内容" onChange={() => {}} readOnly />);
|
||||
expect(screen.queryByTitle('清空')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('showClear=false 时不显示清空按钮', () => {
|
||||
render(<TextInputArea value="内容" onChange={() => {}} showClear={false} />);
|
||||
expect(screen.queryByTitle('清空')).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('受控模式', () => {
|
||||
it('输入时触发 onChange', () => {
|
||||
const handleChange = vi.fn();
|
||||
render(<TextInputArea value="" onChange={handleChange} />);
|
||||
|
||||
const textarea = screen.getByRole('textbox');
|
||||
fireEvent.change(textarea, { target: { value: '新内容' } });
|
||||
|
||||
expect(handleChange).toHaveBeenCalledWith('新内容');
|
||||
});
|
||||
|
||||
it('清空按钮触发 onChange("")', () => {
|
||||
const handleChange = vi.fn();
|
||||
render(<TextInputArea value="内容" onChange={handleChange} />);
|
||||
|
||||
fireEvent.click(screen.getByRole('button', { name: 'textInputArea.clear' }));
|
||||
|
||||
expect(handleChange).toHaveBeenCalledWith('');
|
||||
});
|
||||
});
|
||||
|
||||
describe('非受控模式', () => {
|
||||
it('defaultValue 应显示初始值', () => {
|
||||
render(<TextInputArea defaultValue="初始值" />);
|
||||
expect(screen.getByRole('textbox')).toHaveValue('初始值');
|
||||
});
|
||||
|
||||
it('输入后应更新内部值', () => {
|
||||
render(<TextInputArea defaultValue="" />);
|
||||
|
||||
const textarea = screen.getByRole('textbox');
|
||||
fireEvent.change(textarea, { target: { value: '新内容' } });
|
||||
|
||||
expect(textarea).toHaveValue('新内容');
|
||||
});
|
||||
|
||||
it('清空按钮应清空内容', () => {
|
||||
render(<TextInputArea defaultValue="内容" />);
|
||||
|
||||
fireEvent.click(screen.getByRole('button', { name: 'textInputArea.clear' }));
|
||||
|
||||
expect(screen.getByRole('textbox')).toHaveValue('');
|
||||
});
|
||||
});
|
||||
|
||||
describe('allowCopy 复制功能', () => {
|
||||
it('allowCopy 且有内容时显示复制按钮', () => {
|
||||
render(<TextInputArea value="可复制的内容" onChange={() => {}} allowCopy />);
|
||||
expect(screen.getByRole('button', { name: 'textInputArea.copyContent' })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('allowCopy 但无内容时隐藏复制按钮', () => {
|
||||
render(<TextInputArea value="" onChange={() => {}} allowCopy />);
|
||||
expect(
|
||||
screen.queryByRole('button', { name: 'textInputArea.copyContent' }),
|
||||
).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('allowCopy=false 时不显示复制按钮', () => {
|
||||
render(<TextInputArea value="内容" onChange={() => {}} />);
|
||||
expect(
|
||||
screen.queryByRole('button', { name: 'textInputArea.copyContent' }),
|
||||
).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('复制时调用 clipboard writeText', async () => {
|
||||
const user = userEvent.setup();
|
||||
const writeTextSpy = vi.spyOn(navigator.clipboard, 'writeText').mockResolvedValue(undefined);
|
||||
|
||||
render(<TextInputArea value="测试" onChange={() => {}} allowCopy />);
|
||||
|
||||
await user.click(screen.getByRole('button', { name: 'textInputArea.copyContent' }));
|
||||
|
||||
expect(writeTextSpy).toHaveBeenCalledWith('测试');
|
||||
});
|
||||
|
||||
it('复制失败时调用 clipboard writeText 并捕获错误', async () => {
|
||||
const user = userEvent.setup();
|
||||
const writeTextSpy = vi
|
||||
.spyOn(navigator.clipboard, 'writeText')
|
||||
.mockRejectedValue(new Error('失败'));
|
||||
|
||||
render(<TextInputArea value="测试" onChange={() => {}} allowCopy />);
|
||||
|
||||
await user.click(screen.getByRole('button', { name: 'textInputArea.copyContent' }));
|
||||
|
||||
expect(writeTextSpy).toHaveBeenCalledWith('测试');
|
||||
});
|
||||
});
|
||||
|
||||
describe('showCount 字符计数', () => {
|
||||
it('显示当前字符数', () => {
|
||||
render(<TextInputArea value="hello" onChange={() => {}} showCount />);
|
||||
expect(screen.getByText('5')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('空内容时显示 0', () => {
|
||||
render(<TextInputArea value="" onChange={() => {}} showCount />);
|
||||
expect(screen.getByText('0')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('设置 maxLength 时显示计数上限', () => {
|
||||
render(<TextInputArea value="ab" onChange={() => {}} showCount maxLength={10} />);
|
||||
expect(screen.getByText('2 / 10')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('maxLength', () => {
|
||||
it('超出 maxLength 的输入应被截断', () => {
|
||||
const handleChange = vi.fn();
|
||||
render(<TextInputArea value="" onChange={handleChange} maxLength={5} />);
|
||||
|
||||
const textarea = screen.getByRole('textbox');
|
||||
fireEvent.change(textarea, { target: { value: '123456' } });
|
||||
|
||||
expect(handleChange).not.toHaveBeenCalledWith('123456');
|
||||
});
|
||||
|
||||
it('未超出 maxLength 的输入应正常触发', () => {
|
||||
const handleChange = vi.fn();
|
||||
render(<TextInputArea value="" onChange={handleChange} maxLength={5} />);
|
||||
|
||||
const textarea = screen.getByRole('textbox');
|
||||
fireEvent.change(textarea, { target: { value: '123' } });
|
||||
|
||||
expect(handleChange).toHaveBeenCalledWith('123');
|
||||
});
|
||||
});
|
||||
|
||||
describe('验证规则', () => {
|
||||
it('onChange 触发时验证失败应设置 error', () => {
|
||||
render(
|
||||
<TextInputArea
|
||||
value=""
|
||||
onChange={() => {}}
|
||||
validateTrigger="onChange"
|
||||
rules={[{ validator: (v) => v.length >= 3, message: '至少3个字符' }]}
|
||||
/>,
|
||||
);
|
||||
|
||||
const textarea = screen.getByRole('textbox');
|
||||
fireEvent.change(textarea, { target: { value: 'ab' } });
|
||||
|
||||
expect(screen.getByText('至少3个字符')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('onBlur 触发时验证失败应设置 error', () => {
|
||||
render(
|
||||
<TextInputArea
|
||||
value="ab"
|
||||
onChange={() => {}}
|
||||
validateTrigger="onBlur"
|
||||
rules={[{ validator: (v) => v.length >= 3, message: '至少3个字符' }]}
|
||||
/>,
|
||||
);
|
||||
|
||||
const textarea = screen.getByRole('textbox');
|
||||
fireEvent.blur(textarea);
|
||||
|
||||
expect(screen.getByText('至少3个字符')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('验证通过不应显示错误', () => {
|
||||
render(
|
||||
<TextInputArea
|
||||
value="abc"
|
||||
onChange={() => {}}
|
||||
validateTrigger="onChange"
|
||||
rules={[{ validator: (v) => v.length >= 3, message: '至少3个字符' }]}
|
||||
/>,
|
||||
);
|
||||
|
||||
const textarea = screen.getByRole('textbox');
|
||||
fireEvent.change(textarea, { target: { value: 'abcd' } });
|
||||
|
||||
expect(screen.queryByText('至少3个字符')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('onAction 触发时验证失败应阻止 action 执行', () => {
|
||||
const handleAction = vi.fn();
|
||||
render(
|
||||
<TextInputArea
|
||||
value="ab"
|
||||
onChange={() => {}}
|
||||
validateTrigger="onAction"
|
||||
rules={[{ validator: (v) => v.length >= 3, message: '至少3个字符' }]}
|
||||
actions={[
|
||||
{
|
||||
key: 'test',
|
||||
label: '执行',
|
||||
onClick: handleAction,
|
||||
},
|
||||
]}
|
||||
/>,
|
||||
);
|
||||
|
||||
fireEvent.click(screen.getByText('执行'));
|
||||
|
||||
expect(handleAction).not.toHaveBeenCalled();
|
||||
expect(screen.getByText('至少3个字符')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('操作栏 actions', () => {
|
||||
it('应渲染顶部操作按钮', () => {
|
||||
render(
|
||||
<TextInputArea
|
||||
value="内容"
|
||||
onChange={() => {}}
|
||||
actions={[{ key: 'top-action', label: '顶部操作', onClick: vi.fn() }]}
|
||||
/>,
|
||||
);
|
||||
|
||||
expect(screen.getByText('顶部操作')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('应渲染底部操作按钮', () => {
|
||||
render(
|
||||
<TextInputArea
|
||||
value="内容"
|
||||
onChange={() => {}}
|
||||
actions={[
|
||||
{ key: 'bottom-action', label: '底部操作', position: 'bottom', onClick: vi.fn() },
|
||||
]}
|
||||
/>,
|
||||
);
|
||||
|
||||
expect(screen.getByText('底部操作')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('点击操作按钮触发 onClick', () => {
|
||||
const handleClick = vi.fn();
|
||||
render(
|
||||
<TextInputArea
|
||||
value="内容"
|
||||
onChange={() => {}}
|
||||
actions={[{ key: 'act', label: '操作', onClick: handleClick }]}
|
||||
/>,
|
||||
);
|
||||
|
||||
fireEvent.click(screen.getByText('操作'));
|
||||
|
||||
expect(handleClick).toHaveBeenCalledWith(
|
||||
'内容',
|
||||
expect.objectContaining({
|
||||
clear: expect.any(Function),
|
||||
setError: expect.any(Function),
|
||||
}),
|
||||
);
|
||||
});
|
||||
|
||||
it('disabled 为 true 时按钮应禁用', () => {
|
||||
render(
|
||||
<TextInputArea
|
||||
value=""
|
||||
onChange={() => {}}
|
||||
actions={[{ key: 'act', label: '操作', onClick: vi.fn(), disabled: true }]}
|
||||
/>,
|
||||
);
|
||||
|
||||
expect(screen.getByText('操作')).toBeDisabled();
|
||||
});
|
||||
|
||||
it('disabled 为函数且返回 true 时按钮应禁用', () => {
|
||||
render(
|
||||
<TextInputArea
|
||||
value=""
|
||||
onChange={() => {}}
|
||||
actions={[{ key: 'act', label: '操作', onClick: vi.fn(), disabled: (v) => !v }]}
|
||||
/>,
|
||||
);
|
||||
|
||||
expect(screen.getByText('操作')).toBeDisabled();
|
||||
});
|
||||
|
||||
it('primary 类型按钮应使用 contained 样式', () => {
|
||||
render(
|
||||
<TextInputArea
|
||||
value="内容"
|
||||
onChange={() => {}}
|
||||
actions={[
|
||||
{ key: 'p', label: '主要', type: 'primary', position: 'bottom', onClick: vi.fn() },
|
||||
]}
|
||||
/>,
|
||||
);
|
||||
|
||||
const btn = screen.getByText('主要');
|
||||
expect(btn).toHaveClass('bg-primary', 'text-primary-foreground');
|
||||
});
|
||||
});
|
||||
|
||||
describe('title', () => {
|
||||
it('应渲染 title', () => {
|
||||
render(<TextInputArea title="输入区域" value="" onChange={() => {}} />);
|
||||
expect(screen.getByText('输入区域')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('不设置 title 时不渲染标题', () => {
|
||||
const { container } = render(<TextInputArea value="" onChange={() => {}} />);
|
||||
expect(container.querySelector('.text-muted-foreground')).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('disabled 和 readOnly', () => {
|
||||
it('disabled 时输入框应禁用', () => {
|
||||
render(<TextInputArea value="内容" onChange={() => {}} disabled />);
|
||||
expect(screen.getByRole('textbox')).toBeDisabled();
|
||||
});
|
||||
|
||||
it('readOnly 时输入框应只读', () => {
|
||||
render(<TextInputArea value="内容" onChange={() => {}} readOnly />);
|
||||
// MUI TextField 的 readOnly 通过 inputProps 设置，textarea 不会被禁用
|
||||
expect(screen.getByRole('textbox')).not.toBeDisabled();
|
||||
});
|
||||
});
|
||||
|
||||
describe('autoFocus', () => {
|
||||
it('autoFocus 应自动聚焦', () => {
|
||||
render(<TextInputArea autoFocus value="" onChange={() => {}} />);
|
||||
expect(document.activeElement).toBe(screen.getByRole('textbox'));
|
||||
});
|
||||
});
|
||||
|
||||
describe('复制功能', () => {
|
||||
it('复制成功时调用 clipboard writeText', async () => {
|
||||
const user = userEvent.setup();
|
||||
const writeTextSpy = vi.spyOn(navigator.clipboard, 'writeText').mockResolvedValue(undefined);
|
||||
|
||||
render(<TextInputArea value="测试" onChange={() => {}} allowCopy />);
|
||||
await user.click(screen.getByRole('button', { name: 'textInputArea.copyContent' }));
|
||||
|
||||
expect(writeTextSpy).toHaveBeenCalledWith('测试');
|
||||
});
|
||||
});
|
||||
|
||||
describe('onClear 回调', () => {
|
||||
it('点击清空按钮时应调用 onClear', () => {
|
||||
const handleClear = vi.fn();
|
||||
render(<TextInputArea value="内容" onChange={() => {}} onClear={handleClear} />);
|
||||
|
||||
fireEvent.click(screen.getByRole('button', { name: 'textInputArea.clear' }));
|
||||
|
||||
expect(handleClear).toHaveBeenCalledOnce();
|
||||
});
|
||||
|
||||
it('不传 onClear 时清空按钮应正常工作', () => {
|
||||
render(<TextInputArea defaultValue="内容" />);
|
||||
|
||||
fireEvent.click(screen.getByRole('button', { name: 'textInputArea.clear' }));
|
||||
|
||||
expect(screen.getByRole('textbox')).toHaveValue('');
|
||||
});
|
||||
});
|
||||
|
||||
describe('externalError 外部错误', () => {
|
||||
it('设置 externalError 时应显示错误状态', () => {
|
||||
render(<TextInputArea value="内容" onChange={() => {}} externalError="JSON 格式无效" />);
|
||||
|
||||
expect(screen.getByText('JSON 格式无效')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('externalError 为空时应隐藏错误状态', () => {
|
||||
const { rerender } = render(
|
||||
<TextInputArea value="内容" onChange={() => {}} externalError="错误" />,
|
||||
);
|
||||
|
||||
expect(screen.getByText('错误')).toBeInTheDocument();
|
||||
|
||||
rerender(<TextInputArea value="内容" onChange={() => {}} externalError="" />);
|
||||
|
||||
expect(screen.queryByText('错误')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('externalError 优先级高于内部验证错误', () => {
|
||||
render(
|
||||
<TextInputArea
|
||||
value="ab"
|
||||
onChange={() => {}}
|
||||
externalError="外部错误"
|
||||
validateTrigger="onChange"
|
||||
rules={[{ validator: (v) => v.length >= 3, message: '内部验证错误' }]}
|
||||
/>,
|
||||
);
|
||||
|
||||
expect(screen.getByText('外部错误')).toBeInTheDocument();
|
||||
expect(screen.queryByText('内部验证错误')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('externalError 清除后应显示内部验证错误', () => {
|
||||
const { rerender } = render(
|
||||
<TextInputArea
|
||||
value="ab"
|
||||
onChange={() => {}}
|
||||
externalError="外部错误"
|
||||
validateTrigger="onChange"
|
||||
rules={[{ validator: (v) => v.length >= 3, message: '至少3个字符' }]}
|
||||
/>,
|
||||
);
|
||||
|
||||
expect(screen.getByText('外部错误')).toBeInTheDocument();
|
||||
|
||||
rerender(
|
||||
<TextInputArea
|
||||
value="ab"
|
||||
onChange={() => {}}
|
||||
validateTrigger="onChange"
|
||||
rules={[{ validator: (v) => v.length >= 3, message: '至少3个字符' }]}
|
||||
/>,
|
||||
);
|
||||
|
||||
expect(screen.queryByText('外部错误')).not.toBeInTheDocument();
|
||||
|
||||
const textarea = screen.getByRole('textbox');
|
||||
fireEvent.change(textarea, { target: { value: 'a' } });
|
||||
|
||||
expect(screen.getByText('至少3个字符')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('autoResize', () => {
|
||||
it('autoResize=true 时设置 minRows/maxRows', () => {
|
||||
const { container } = render(
|
||||
<TextInputArea value="" onChange={() => {}} minRows={3} maxRows={8} />,
|
||||
);
|
||||
|
||||
const textarea = container.querySelector('textarea');
|
||||
expect(textarea).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('autoResize=false 时设置固定 rows', () => {
|
||||
const { container } = render(<TextInputArea value="" onChange={() => {}} minRows={5} />);
|
||||
|
||||
const textarea = container.querySelector('textarea');
|
||||
expect(textarea).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('样式集成', () => {
|
||||
it('应透传 className', () => {
|
||||
const { container } = render(
|
||||
<TextInputArea value="" onChange={() => {}} className="custom-class" />,
|
||||
);
|
||||
|
||||
expect(container.firstChild).toHaveClass('custom-class');
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,118 @@
|
||||
import { beforeEach, describe, expect, it, vi } from 'vitest';
|
||||
import { act, fireEvent, render, screen } from '@testing-library/react';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import ToolCard from '@/pages/Dashboard/ToolCard';
|
||||
import { Clock } from 'lucide-react';
|
||||
|
||||
describe('ToolCard 组件', () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
describe('渲染测试', () => {
|
||||
it('应渲染标题和描述', () => {
|
||||
render(
|
||||
<ToolCard
|
||||
title="测试工具"
|
||||
description="这是一个测试工具"
|
||||
colorKey="primary"
|
||||
icon={Clock}
|
||||
onNavigate={() => {}}
|
||||
/>,
|
||||
);
|
||||
|
||||
expect(screen.getByText('测试工具')).toBeInTheDocument();
|
||||
expect(screen.getByText('这是一个测试工具')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('无描述时仅渲染标题', () => {
|
||||
render(<ToolCard title="仅标题" colorKey="primary" icon={Clock} onNavigate={() => {}} />);
|
||||
|
||||
expect(screen.getByText('仅标题')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('应渲染图标', () => {
|
||||
const { container } = render(
|
||||
<ToolCard title="带图标" colorKey="primary" icon={Clock} onNavigate={() => {}} />,
|
||||
);
|
||||
|
||||
const svgElement = container.querySelector('svg');
|
||||
expect(svgElement).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('提供快照内容时应渲染快照', () => {
|
||||
render(
|
||||
<ToolCard
|
||||
title="带快照"
|
||||
colorKey="primary"
|
||||
icon={Clock}
|
||||
onNavigate={() => {}}
|
||||
snapshot={<div data-testid="snapshot">快照内容</div>}
|
||||
/>,
|
||||
);
|
||||
|
||||
expect(screen.getByTestId('snapshot')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('未提供快照时不渲染快照区域', () => {
|
||||
const { container } = render(
|
||||
<ToolCard
|
||||
title="无快照"
|
||||
colorKey="primary"
|
||||
icon={Clock}
|
||||
onClick={() => {}}
|
||||
onNavigate={function (): void {
|
||||
throw new Error('Function not implemented.');
|
||||
}}
|
||||
/>,
|
||||
);
|
||||
|
||||
expect(container.querySelector('[data-testid="snapshot"]')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('应使用 CardActionArea 渲染，支持键盘聚焦', () => {
|
||||
render(<ToolCard title="可聚焦" colorKey="primary" icon={Clock} onNavigate={() => {}} />);
|
||||
|
||||
const button = screen.getByRole('button', { name: /可聚焦/ });
|
||||
expect(button).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('交互测试', () => {
|
||||
it('点击时应调用 onClick', () => {
|
||||
const handleClick = vi.fn();
|
||||
render(<ToolCard title="可点击" colorKey="primary" icon={Clock} onNavigate={handleClick} />);
|
||||
|
||||
const button = screen.getByRole('button', { name: /可点击/ });
|
||||
fireEvent.click(button);
|
||||
|
||||
expect(handleClick).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it('按 Enter 键时应调用 onClick', async () => {
|
||||
const handleClick = vi.fn();
|
||||
render(
|
||||
<ToolCard title="键盘可触发" colorKey="primary" icon={Clock} onNavigate={handleClick} />,
|
||||
);
|
||||
|
||||
const button = screen.getByRole('button', { name: /键盘可触发/ });
|
||||
await act(async () => {
|
||||
button.focus();
|
||||
await userEvent.keyboard('{Enter}');
|
||||
});
|
||||
|
||||
expect(handleClick).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
});
|
||||
|
||||
describe('样式测试', () => {
|
||||
it('应应用自定义颜色代码', () => {
|
||||
const { container } = render(
|
||||
<ToolCard title="自定义颜色" colorKey="warning" icon={Clock} onNavigate={() => {}} />,
|
||||
);
|
||||
|
||||
const svgElement = container.querySelector('svg');
|
||||
expect(svgElement).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,90 @@
|
||||
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 { RouterProvider } from '@/providers/RouterProvider';
|
||||
import { ThemeModeProvider } from '@/providers/ThemeModeProvider';
|
||||
|
||||
// matchMedia must be mocked before ThemeModeProvider is imported
|
||||
Object.defineProperty(window, 'matchMedia', {
|
||||
writable: true,
|
||||
value: vi.fn().mockImplementation((query: string) => ({
|
||||
matches: false,
|
||||
media: query,
|
||||
onchange: null,
|
||||
addListener: vi.fn(),
|
||||
removeListener: vi.fn(),
|
||||
addEventListener: vi.fn(),
|
||||
removeEventListener: vi.fn(),
|
||||
dispatchEvent: vi.fn(),
|
||||
})),
|
||||
});
|
||||
|
||||
const mockRouterValue = {
|
||||
currentPage: 'dashboard' as PageType,
|
||||
visiblePages: ['dashboard', 'timestamp'] as PageType[],
|
||||
pageOrder: ['timestamp'] as PageType[],
|
||||
isLoaded: true,
|
||||
navigateTo: vi.fn(),
|
||||
syncNavigation: vi.fn(),
|
||||
goBack: vi.fn(),
|
||||
setVisiblePages: vi.fn(),
|
||||
setPageOrder: vi.fn(),
|
||||
};
|
||||
|
||||
vi.mock('@/providers/RouterProvider', () => ({
|
||||
useRouter: () => mockRouterValue,
|
||||
RouterProvider: ({ children }: { children: React.ReactNode }) => children,
|
||||
}));
|
||||
|
||||
describe('TopBar 组件', () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
const renderWithProvider = (ui: React.ReactElement) => {
|
||||
return render(
|
||||
<ThemeModeProvider>
|
||||
<RouterProvider>{ui}</RouterProvider>
|
||||
</ThemeModeProvider>,
|
||||
);
|
||||
};
|
||||
|
||||
describe('渲染测试', () => {
|
||||
it('不在 dashboard 时应渲染返回按钮', () => {
|
||||
mockRouterValue.currentPage = 'timestamp';
|
||||
renderWithProvider(<TopBar onOpenOptions={vi.fn()} />);
|
||||
expect(screen.getByLabelText('返回')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('在 dashboard 上不应渲染返回按钮', () => {
|
||||
mockRouterValue.currentPage = 'dashboard';
|
||||
renderWithProvider(<TopBar onOpenOptions={vi.fn()} />);
|
||||
expect(screen.queryByLabelText('返回')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('应渲染设置按钮', () => {
|
||||
renderWithProvider(<TopBar onOpenOptions={vi.fn()} />);
|
||||
expect(screen.getByLabelText('设置')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('交互测试', () => {
|
||||
it('点击设置按钮时应调用 onOpenOptions', () => {
|
||||
const handleOpenOptions = vi.fn();
|
||||
renderWithProvider(<TopBar onOpenOptions={handleOpenOptions} />);
|
||||
|
||||
fireEvent.click(screen.getByLabelText('设置'));
|
||||
expect(handleOpenOptions).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it('点击返回按钮时应调用 goBack', () => {
|
||||
mockRouterValue.currentPage = 'timestamp';
|
||||
renderWithProvider(<TopBar onOpenOptions={vi.fn()} />);
|
||||
|
||||
fireEvent.click(screen.getByLabelText('返回'));
|
||||
expect(mockRouterValue.goBack).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,32 @@
|
||||
import * as React from 'react';
|
||||
import { cva, type VariantProps } from 'class-variance-authority';
|
||||
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
const badgeVariants = cva(
|
||||
'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: 'border-transparent bg-primary text-primary-foreground hover:bg-primary/80',
|
||||
secondary:
|
||||
'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
|
||||
destructive:
|
||||
'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',
|
||||
outline: 'text-foreground',
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: 'default',
|
||||
},
|
||||
},
|
||||
);
|
||||
|
||||
export interface BadgeProps
|
||||
extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {}
|
||||
|
||||
function Badge({ className, variant, ...props }: BadgeProps) {
|
||||
return <div className={cn(badgeVariants({ variant }), className)} {...props} />;
|
||||
}
|
||||
|
||||
export { Badge, badgeVariants };
|
||||
@@ -0,0 +1,48 @@
|
||||
import * as React from 'react';
|
||||
import { Slot } from '@radix-ui/react-slot';
|
||||
import { cva, type VariantProps } from 'class-variance-authority';
|
||||
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
const buttonVariants = cva(
|
||||
'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: 'bg-primary text-primary-foreground hover:bg-primary/90',
|
||||
destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
|
||||
outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
|
||||
secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
|
||||
ghost: 'hover:bg-accent hover:text-accent-foreground',
|
||||
link: 'text-primary underline-offset-4 hover:underline',
|
||||
},
|
||||
size: {
|
||||
default: 'h-10 px-4 py-2',
|
||||
sm: 'h-9 rounded-md px-3',
|
||||
lg: 'h-11 rounded-md px-8',
|
||||
icon: 'h-10 w-10',
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: 'default',
|
||||
size: 'default',
|
||||
},
|
||||
},
|
||||
);
|
||||
|
||||
export interface ButtonProps
|
||||
extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
|
||||
asChild?: boolean;
|
||||
}
|
||||
|
||||
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
|
||||
({ className, variant, size, asChild = false, ...props }, ref) => {
|
||||
const Comp = asChild ? Slot : 'button';
|
||||
return (
|
||||
<Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />
|
||||
);
|
||||
},
|
||||
);
|
||||
Button.displayName = 'Button';
|
||||
|
||||
export { Button, buttonVariants };
|
||||
@@ -0,0 +1,26 @@
|
||||
import * as React from 'react';
|
||||
import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
|
||||
import { Check } from 'lucide-react';
|
||||
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
const Checkbox = React.forwardRef<
|
||||
React.ElementRef<typeof CheckboxPrimitive.Root>,
|
||||
React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<CheckboxPrimitive.Root
|
||||
ref={ref}
|
||||
className={cn(
|
||||
'grid place-content-center peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<CheckboxPrimitive.Indicator className={cn('grid place-content-center text-current')}>
|
||||
<Check className="h-4 w-4" />
|
||||
</CheckboxPrimitive.Indicator>
|
||||
</CheckboxPrimitive.Root>
|
||||
));
|
||||
Checkbox.displayName = CheckboxPrimitive.Root.displayName;
|
||||
|
||||
export { Checkbox };
|
||||
@@ -0,0 +1,101 @@
|
||||
import * as React from 'react';
|
||||
import * as DialogPrimitive from '@radix-ui/react-dialog';
|
||||
import { X } from 'lucide-react';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
const Dialog = DialogPrimitive.Root;
|
||||
|
||||
const DialogTrigger = DialogPrimitive.Trigger;
|
||||
|
||||
const DialogPortal = DialogPrimitive.Portal;
|
||||
|
||||
const DialogClose = DialogPrimitive.Close;
|
||||
|
||||
const DialogOverlay = React.forwardRef<
|
||||
React.ElementRef<typeof DialogPrimitive.Overlay>,
|
||||
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<DialogPrimitive.Overlay
|
||||
ref={ref}
|
||||
className={cn(
|
||||
'fixed inset-0 z-50 bg-black/80 dark:bg-black/60 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
|
||||
|
||||
const DialogContent = React.forwardRef<
|
||||
React.ElementRef<typeof DialogPrimitive.Content>,
|
||||
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
|
||||
>(({ className, children, ...props }, ref) => (
|
||||
<DialogPortal>
|
||||
<DialogOverlay />
|
||||
<DialogPrimitive.Content
|
||||
ref={ref}
|
||||
className={cn(
|
||||
'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-white dark:bg-gray-900 p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
<DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
|
||||
<X className="h-4 w-4" />
|
||||
<span className="sr-only">Close</span>
|
||||
</DialogPrimitive.Close>
|
||||
</DialogPrimitive.Content>
|
||||
</DialogPortal>
|
||||
));
|
||||
DialogContent.displayName = DialogPrimitive.Content.displayName;
|
||||
|
||||
const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
|
||||
<div className={cn('flex flex-col space-y-1.5 text-center sm:text-left', className)} {...props} />
|
||||
);
|
||||
DialogHeader.displayName = 'DialogHeader';
|
||||
|
||||
const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
|
||||
<div
|
||||
className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
DialogFooter.displayName = 'DialogFooter';
|
||||
|
||||
const DialogTitle = React.forwardRef<
|
||||
React.ElementRef<typeof DialogPrimitive.Title>,
|
||||
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<DialogPrimitive.Title
|
||||
ref={ref}
|
||||
className={cn('text-lg font-semibold leading-none tracking-tight', className)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
DialogTitle.displayName = DialogPrimitive.Title.displayName;
|
||||
|
||||
const DialogDescription = React.forwardRef<
|
||||
React.ElementRef<typeof DialogPrimitive.Description>,
|
||||
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<DialogPrimitive.Description
|
||||
ref={ref}
|
||||
className={cn('text-sm text-muted-foreground', className)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
DialogDescription.displayName = DialogPrimitive.Description.displayName;
|
||||
|
||||
export {
|
||||
Dialog,
|
||||
DialogPortal,
|
||||
DialogOverlay,
|
||||
DialogClose,
|
||||
DialogTrigger,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogFooter,
|
||||
DialogTitle,
|
||||
DialogDescription,
|
||||
};
|
||||
@@ -0,0 +1,21 @@
|
||||
import * as React from 'react';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
const Input = React.forwardRef<HTMLInputElement, React.InputHTMLAttributes<HTMLInputElement>>(
|
||||
({ className, type, ...props }, ref) => {
|
||||
return (
|
||||
<input
|
||||
type={type}
|
||||
className={cn(
|
||||
'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
|
||||
className,
|
||||
)}
|
||||
ref={ref}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
},
|
||||
);
|
||||
Input.displayName = 'Input';
|
||||
|
||||
export { Input };
|
||||
@@ -0,0 +1,19 @@
|
||||
import * as React from 'react';
|
||||
import * as LabelPrimitive from '@radix-ui/react-label';
|
||||
import { cva, type VariantProps } from 'class-variance-authority';
|
||||
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
const labelVariants = cva(
|
||||
'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
|
||||
);
|
||||
|
||||
const Label = React.forwardRef<
|
||||
React.ElementRef<typeof LabelPrimitive.Root>,
|
||||
React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & VariantProps<typeof labelVariants>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<LabelPrimitive.Root ref={ref} className={cn(labelVariants(), className)} {...props} />
|
||||
));
|
||||
Label.displayName = LabelPrimitive.Root.displayName;
|
||||
|
||||
export { Label };
|
||||
@@ -0,0 +1,150 @@
|
||||
import * as React from 'react';
|
||||
import * as SelectPrimitive from '@radix-ui/react-select';
|
||||
import { Check, ChevronDown, ChevronUp } from 'lucide-react';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
const Select = SelectPrimitive.Root;
|
||||
|
||||
const SelectGroup = SelectPrimitive.Group;
|
||||
|
||||
const SelectValue = SelectPrimitive.Value;
|
||||
|
||||
const SelectTrigger = React.forwardRef<
|
||||
React.ElementRef<typeof SelectPrimitive.Trigger>,
|
||||
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
|
||||
>(({ className, children, ...props }, ref) => (
|
||||
<SelectPrimitive.Trigger
|
||||
ref={ref}
|
||||
className={cn(
|
||||
'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
<SelectPrimitive.Icon asChild>
|
||||
<ChevronDown className="h-4 w-4 opacity-50" />
|
||||
</SelectPrimitive.Icon>
|
||||
</SelectPrimitive.Trigger>
|
||||
));
|
||||
SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
|
||||
|
||||
const SelectScrollUpButton = React.forwardRef<
|
||||
React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
|
||||
React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<SelectPrimitive.ScrollUpButton
|
||||
ref={ref}
|
||||
className={cn('flex cursor-default items-center justify-center py-1', className)}
|
||||
{...props}
|
||||
>
|
||||
<ChevronUp className="h-4 w-4" />
|
||||
</SelectPrimitive.ScrollUpButton>
|
||||
));
|
||||
SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
|
||||
|
||||
const SelectScrollDownButton = React.forwardRef<
|
||||
React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
|
||||
React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<SelectPrimitive.ScrollDownButton
|
||||
ref={ref}
|
||||
className={cn('flex cursor-default items-center justify-center py-1', className)}
|
||||
{...props}
|
||||
>
|
||||
<ChevronDown className="h-4 w-4" />
|
||||
</SelectPrimitive.ScrollDownButton>
|
||||
));
|
||||
SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
|
||||
|
||||
const SelectContent = React.forwardRef<
|
||||
React.ElementRef<typeof SelectPrimitive.Content>,
|
||||
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
|
||||
>(({ className, children, position = 'popper', ...props }, ref) => (
|
||||
<SelectPrimitive.Portal>
|
||||
<SelectPrimitive.Content
|
||||
ref={ref}
|
||||
className={cn(
|
||||
'relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
|
||||
position === 'popper' &&
|
||||
'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
|
||||
className,
|
||||
)}
|
||||
position={position}
|
||||
{...props}
|
||||
>
|
||||
<SelectScrollUpButton />
|
||||
<SelectPrimitive.Viewport
|
||||
className={cn(
|
||||
'p-1',
|
||||
position === 'popper' &&
|
||||
'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]',
|
||||
)}
|
||||
>
|
||||
{children}
|
||||
</SelectPrimitive.Viewport>
|
||||
<SelectScrollDownButton />
|
||||
</SelectPrimitive.Content>
|
||||
</SelectPrimitive.Portal>
|
||||
));
|
||||
SelectContent.displayName = SelectPrimitive.Content.displayName;
|
||||
|
||||
const SelectLabel = React.forwardRef<
|
||||
React.ElementRef<typeof SelectPrimitive.Label>,
|
||||
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<SelectPrimitive.Label
|
||||
ref={ref}
|
||||
className={cn('py-1.5 pl-8 pr-2 text-sm font-semibold', className)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
SelectLabel.displayName = SelectPrimitive.Label.displayName;
|
||||
|
||||
const SelectItem = React.forwardRef<
|
||||
React.ElementRef<typeof SelectPrimitive.Item>,
|
||||
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
|
||||
>(({ className, children, ...props }, ref) => (
|
||||
<SelectPrimitive.Item
|
||||
ref={ref}
|
||||
className={cn(
|
||||
'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
|
||||
<SelectPrimitive.ItemIndicator>
|
||||
<Check className="h-4 w-4" />
|
||||
</SelectPrimitive.ItemIndicator>
|
||||
</span>
|
||||
|
||||
<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
|
||||
</SelectPrimitive.Item>
|
||||
));
|
||||
SelectItem.displayName = SelectPrimitive.Item.displayName;
|
||||
|
||||
const SelectSeparator = React.forwardRef<
|
||||
React.ElementRef<typeof SelectPrimitive.Separator>,
|
||||
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<SelectPrimitive.Separator
|
||||
ref={ref}
|
||||
className={cn('-mx-1 my-1 h-px bg-muted', className)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
|
||||
|
||||
export {
|
||||
Select,
|
||||
SelectGroup,
|
||||
SelectValue,
|
||||
SelectTrigger,
|
||||
SelectContent,
|
||||
SelectLabel,
|
||||
SelectItem,
|
||||
SelectSeparator,
|
||||
SelectScrollUpButton,
|
||||
SelectScrollDownButton,
|
||||
};
|
||||
@@ -0,0 +1,27 @@
|
||||
import * as React from 'react';
|
||||
import * as SwitchPrimitives from '@radix-ui/react-switch';
|
||||
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
const Switch = React.forwardRef<
|
||||
React.ElementRef<typeof SwitchPrimitives.Root>,
|
||||
React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<SwitchPrimitives.Root
|
||||
className={cn(
|
||||
'peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
ref={ref}
|
||||
>
|
||||
<SwitchPrimitives.Thumb
|
||||
className={cn(
|
||||
'pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0',
|
||||
)}
|
||||
/>
|
||||
</SwitchPrimitives.Root>
|
||||
));
|
||||
Switch.displayName = SwitchPrimitives.Root.displayName;
|
||||
|
||||
export { Switch };
|
||||
@@ -0,0 +1,131 @@
|
||||
import { describe, expect, it } from 'vitest';
|
||||
import {
|
||||
FEATURES,
|
||||
getAllFeatureKeys,
|
||||
getDefaultPageOrder,
|
||||
getDefaultVisibleFeatureKeys,
|
||||
getFeatureByKey,
|
||||
} from '@/config/features';
|
||||
|
||||
describe('features', () => {
|
||||
describe('FEATURES', () => {
|
||||
it('should have 11 features defined', () => {
|
||||
expect(FEATURES).toHaveLength(11);
|
||||
});
|
||||
|
||||
it('should have all required properties for each feature', () => {
|
||||
FEATURES.forEach((feature) => {
|
||||
expect(feature).toHaveProperty('key');
|
||||
expect(feature).toHaveProperty('labelKey');
|
||||
expect(feature).toHaveProperty('descriptionKey');
|
||||
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.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');
|
||||
expect(typeof feature.themeColorKey).toBe('string');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
it('should have unique keys for each feature', () => {
|
||||
const keys = FEATURES.map((f) => f.key);
|
||||
const uniqueKeys = new Set(keys);
|
||||
expect(uniqueKeys.size).toBe(keys.length);
|
||||
});
|
||||
});
|
||||
|
||||
describe('getFeatureByKey', () => {
|
||||
it('should return dashboard feature', () => {
|
||||
const feature = getFeatureByKey('dashboard');
|
||||
expect(feature).toBeDefined();
|
||||
expect(feature?.key).toBe('dashboard');
|
||||
expect(feature?.labelKey).toBe('dashboard_title');
|
||||
});
|
||||
|
||||
it('should return timestamp feature', () => {
|
||||
const feature = getFeatureByKey('timestamp');
|
||||
expect(feature).toBeDefined();
|
||||
expect(feature?.key).toBe('timestamp');
|
||||
expect(feature?.labelKey).toBe('timestamp_title');
|
||||
expect(feature?.themeColorKey).toBeDefined();
|
||||
});
|
||||
|
||||
it('should return storageCleaner feature', () => {
|
||||
const feature = getFeatureByKey('storageCleaner');
|
||||
expect(feature).toBeDefined();
|
||||
expect(feature?.key).toBe('storageCleaner');
|
||||
expect(feature?.labelKey).toBe('storageCleaner_title');
|
||||
});
|
||||
|
||||
it('should return undefined for invalid key', () => {
|
||||
const feature = getFeatureByKey('invalid' as any);
|
||||
expect(feature).toBeUndefined();
|
||||
});
|
||||
});
|
||||
|
||||
describe('getDefaultVisibleFeatureKeys', () => {
|
||||
it('should return only visible features', () => {
|
||||
const visibleKeys = getDefaultVisibleFeatureKeys();
|
||||
visibleKeys.forEach((key) => {
|
||||
const feature = getFeatureByKey(key);
|
||||
expect(feature?.defaultVisible).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
it('should include dashboard, timestamp, storageCleaner, qrCode', () => {
|
||||
const visibleKeys = getDefaultVisibleFeatureKeys();
|
||||
expect(visibleKeys).toContain('dashboard');
|
||||
expect(visibleKeys).toContain('timestamp');
|
||||
expect(visibleKeys).toContain('storageCleaner');
|
||||
expect(visibleKeys).toContain('qrCode');
|
||||
});
|
||||
});
|
||||
|
||||
describe('getAllFeatureKeys', () => {
|
||||
it('should return all feature keys', () => {
|
||||
const allKeys = getAllFeatureKeys();
|
||||
expect(allKeys).toHaveLength(11);
|
||||
expect(allKeys).toContain('dashboard');
|
||||
expect(allKeys).toContain('timestamp');
|
||||
expect(allKeys).toContain('storageCleaner');
|
||||
expect(allKeys).toContain('qrCode');
|
||||
expect(allKeys).toContain('textStatistics');
|
||||
expect(allKeys).toContain('jwt');
|
||||
expect(allKeys).toContain('jsonDiff');
|
||||
expect(allKeys).toContain('base64Converter');
|
||||
expect(allKeys).toContain('markdownToHtml');
|
||||
expect(allKeys).toContain('htmlToMarkdown');
|
||||
expect(allKeys).toContain('rightClickRestorer');
|
||||
});
|
||||
});
|
||||
|
||||
describe('getDefaultPageOrder', () => {
|
||||
it('should exclude dashboard from page order', () => {
|
||||
const pageOrder = getDefaultPageOrder();
|
||||
expect(pageOrder).not.toContain('dashboard');
|
||||
});
|
||||
|
||||
it('should include timestamp, storageCleaner, qrCode in page order', () => {
|
||||
const pageOrder = getDefaultPageOrder();
|
||||
expect(pageOrder).toContain('timestamp');
|
||||
expect(pageOrder).toContain('storageCleaner');
|
||||
expect(pageOrder).toContain('qrCode');
|
||||
});
|
||||
|
||||
it('should have 10 items in page order', () => {
|
||||
const pageOrder = getDefaultPageOrder();
|
||||
expect(pageOrder).toHaveLength(10);
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,215 @@
|
||||
import { type ComponentType, lazy } from 'react';
|
||||
import type { LucideProps } from 'lucide-react';
|
||||
import type { PageType } from '@/types/storage';
|
||||
import {
|
||||
Clock,
|
||||
Database,
|
||||
QrCode,
|
||||
FileText,
|
||||
Key,
|
||||
GitCompareArrows,
|
||||
ArrowLeftRight,
|
||||
Code,
|
||||
File,
|
||||
MousePointerClick,
|
||||
} from 'lucide-react';
|
||||
|
||||
export type PaletteColorKey = 'primary' | 'success' | 'warning' | 'error' | 'secondary' | 'info';
|
||||
|
||||
// 懒加载页面组件
|
||||
const DashboardPage = lazy(() => import('@/pages/Dashboard'));
|
||||
const TimestampPage = lazy(() => import('@/pages/Timestamp'));
|
||||
const StorageCleanerPage = lazy(() => import('@/pages/StorageCleaner'));
|
||||
const QrCodePage = lazy(() => import('@/pages/QrCode'));
|
||||
const TextStatisticsPage = lazy(() => import('@/pages/TextStatistics'));
|
||||
const JwtPage = lazy(() => import('@/pages/Jwt'));
|
||||
const JsonToolsPage = lazy(() => import('@/pages/JsonTools'));
|
||||
const Base64ConverterPage = lazy(() => import('@/pages/Base64Converter'));
|
||||
const MarkdownToHtmlPage = lazy(() => import('@/pages/MarkdownToHtml'));
|
||||
const HtmlToMarkdownPage = lazy(() => import('@/pages/HtmlToMarkdown'));
|
||||
const RightClickRestorerPage = lazy(() => import('@/pages/RightClickRestorer'));
|
||||
|
||||
export interface FeatureConfig {
|
||||
key: PageType;
|
||||
labelKey: string;
|
||||
descriptionKey: string;
|
||||
themeColorKey?: PaletteColorKey;
|
||||
icon?: ComponentType<LucideProps>;
|
||||
defaultVisible: boolean;
|
||||
components: {
|
||||
popup: ComponentType;
|
||||
sidepanel: ComponentType;
|
||||
tab: ComponentType;
|
||||
};
|
||||
}
|
||||
|
||||
export const FEATURES: FeatureConfig[] = [
|
||||
{
|
||||
key: 'dashboard',
|
||||
labelKey: 'dashboard_title',
|
||||
descriptionKey: '',
|
||||
defaultVisible: true,
|
||||
components: {
|
||||
popup: DashboardPage,
|
||||
sidepanel: DashboardPage,
|
||||
tab: DashboardPage,
|
||||
},
|
||||
},
|
||||
{
|
||||
key: 'timestamp',
|
||||
labelKey: 'timestamp_title',
|
||||
descriptionKey: 'timestamp_description',
|
||||
themeColorKey: 'primary',
|
||||
icon: Clock,
|
||||
defaultVisible: true,
|
||||
components: {
|
||||
popup: TimestampPage,
|
||||
sidepanel: TimestampPage,
|
||||
tab: TimestampPage,
|
||||
},
|
||||
},
|
||||
{
|
||||
key: 'storageCleaner',
|
||||
labelKey: 'storageCleaner_title',
|
||||
descriptionKey: 'storageCleaner_description',
|
||||
themeColorKey: 'warning',
|
||||
icon: Database,
|
||||
defaultVisible: true,
|
||||
components: {
|
||||
popup: StorageCleanerPage,
|
||||
sidepanel: StorageCleanerPage,
|
||||
tab: StorageCleanerPage,
|
||||
},
|
||||
},
|
||||
{
|
||||
key: 'qrCode',
|
||||
labelKey: 'qrCode_title',
|
||||
descriptionKey: 'qrCode_description',
|
||||
themeColorKey: 'success',
|
||||
icon: QrCode,
|
||||
defaultVisible: true,
|
||||
components: {
|
||||
popup: QrCodePage,
|
||||
sidepanel: QrCodePage,
|
||||
tab: QrCodePage,
|
||||
},
|
||||
},
|
||||
{
|
||||
key: 'textStatistics',
|
||||
labelKey: 'textStatistics_title',
|
||||
descriptionKey: 'textStatistics_description',
|
||||
themeColorKey: 'secondary',
|
||||
icon: FileText,
|
||||
defaultVisible: true,
|
||||
components: {
|
||||
popup: TextStatisticsPage,
|
||||
sidepanel: TextStatisticsPage,
|
||||
tab: TextStatisticsPage,
|
||||
},
|
||||
},
|
||||
{
|
||||
key: 'jwt',
|
||||
labelKey: 'jwt_title',
|
||||
descriptionKey: 'jwt_description',
|
||||
themeColorKey: 'info',
|
||||
icon: Key,
|
||||
defaultVisible: true,
|
||||
components: {
|
||||
popup: JwtPage,
|
||||
sidepanel: JwtPage,
|
||||
tab: JwtPage,
|
||||
},
|
||||
},
|
||||
{
|
||||
key: 'jsonDiff',
|
||||
labelKey: 'jsonDiff_title',
|
||||
descriptionKey: 'jsonDiff_description',
|
||||
themeColorKey: 'primary',
|
||||
icon: GitCompareArrows,
|
||||
defaultVisible: true,
|
||||
components: {
|
||||
popup: JsonToolsPage,
|
||||
sidepanel: JsonToolsPage,
|
||||
tab: JsonToolsPage,
|
||||
},
|
||||
},
|
||||
{
|
||||
key: 'base64Converter',
|
||||
labelKey: 'base64Converter_title',
|
||||
descriptionKey: 'base64Converter_description',
|
||||
themeColorKey: 'info',
|
||||
icon: ArrowLeftRight,
|
||||
defaultVisible: true,
|
||||
components: {
|
||||
popup: Base64ConverterPage,
|
||||
sidepanel: Base64ConverterPage,
|
||||
tab: Base64ConverterPage,
|
||||
},
|
||||
},
|
||||
{
|
||||
key: 'markdownToHtml',
|
||||
labelKey: 'markdownToHtml_title',
|
||||
descriptionKey: 'markdownToHtml_description',
|
||||
themeColorKey: 'secondary',
|
||||
icon: Code,
|
||||
defaultVisible: true,
|
||||
components: {
|
||||
popup: MarkdownToHtmlPage,
|
||||
sidepanel: MarkdownToHtmlPage,
|
||||
tab: MarkdownToHtmlPage,
|
||||
},
|
||||
},
|
||||
{
|
||||
key: 'htmlToMarkdown',
|
||||
labelKey: 'htmlToMarkdown_title',
|
||||
descriptionKey: 'htmlToMarkdown_description',
|
||||
themeColorKey: 'secondary',
|
||||
icon: File,
|
||||
defaultVisible: true,
|
||||
components: {
|
||||
popup: HtmlToMarkdownPage,
|
||||
sidepanel: HtmlToMarkdownPage,
|
||||
tab: HtmlToMarkdownPage,
|
||||
},
|
||||
},
|
||||
{
|
||||
key: 'rightClickRestorer',
|
||||
labelKey: 'rightClickRestorer_title',
|
||||
descriptionKey: 'rightClickRestorer_description',
|
||||
themeColorKey: 'success',
|
||||
icon: MousePointerClick,
|
||||
defaultVisible: true,
|
||||
components: {
|
||||
popup: RightClickRestorerPage,
|
||||
sidepanel: RightClickRestorerPage,
|
||||
tab: RightClickRestorerPage,
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
export function getFeatureByKey(key: PageType): FeatureConfig | undefined {
|
||||
return FEATURES.find((f) => f.key === key);
|
||||
}
|
||||
|
||||
export function getDefaultVisibleFeatureKeys(): PageType[] {
|
||||
return FEATURES.filter((f) => f.defaultVisible).map((f) => f.key);
|
||||
}
|
||||
|
||||
export function getAllFeatureKeys(): PageType[] {
|
||||
return FEATURES.map((f) => f.key);
|
||||
}
|
||||
|
||||
export function getDefaultPageOrder(): PageType[] {
|
||||
return FEATURES.filter((f) => f.key !== 'dashboard').map((f) => f.key);
|
||||
}
|
||||
|
||||
export function getEntryPointType(): 'popup' | 'sidepanel' | 'tab' {
|
||||
const pathname = window.location.pathname;
|
||||
if (pathname.includes('sidepanel')) {
|
||||
return 'sidepanel';
|
||||
}
|
||||
if (new URLSearchParams(window.location.search).get('mode') === 'tab') {
|
||||
return 'tab';
|
||||
}
|
||||
return 'popup';
|
||||
}
|
||||
@@ -0,0 +1,144 @@
|
||||
import { describe, expect, it, vi, beforeEach } from 'vitest';
|
||||
import {
|
||||
createAllContextMenus,
|
||||
parseContextMenuClick,
|
||||
CONTEXT_MENU_CONFIGS,
|
||||
MAX_PAYLOAD_LENGTH,
|
||||
} from '@/utils/contextMenu';
|
||||
import { MessageAction } from '@/utils/messages';
|
||||
|
||||
describe('background 菜单注册与分流', () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
describe('菜单注册', () => {
|
||||
it('应该调用 createAllContextMenus 创建所有菜单项', () => {
|
||||
createAllContextMenus();
|
||||
|
||||
expect(chrome.contextMenus.create).toHaveBeenCalledTimes(CONTEXT_MENU_CONFIGS.length);
|
||||
});
|
||||
|
||||
it('应该创建父级菜单 Testing Tools', () => {
|
||||
createAllContextMenus();
|
||||
|
||||
expect(chrome.contextMenus.create).toHaveBeenCalledWith(
|
||||
expect.objectContaining({
|
||||
id: 'testing-tools-parent',
|
||||
title: 'Testing Tools',
|
||||
}),
|
||||
);
|
||||
});
|
||||
|
||||
it('应该创建 JWT 解析子菜单', () => {
|
||||
createAllContextMenus();
|
||||
|
||||
expect(chrome.contextMenus.create).toHaveBeenCalledWith(
|
||||
expect.objectContaining({
|
||||
id: 'jwt',
|
||||
title: '🔑 解析 JWT',
|
||||
parentId: 'testing-tools-parent',
|
||||
}),
|
||||
);
|
||||
});
|
||||
|
||||
it('应该创建网页链接转二维码子菜单', () => {
|
||||
createAllContextMenus();
|
||||
|
||||
expect(chrome.contextMenus.create).toHaveBeenCalledWith(
|
||||
expect.objectContaining({
|
||||
id: 'qrCode-page',
|
||||
title: '🔗 网页链接转二维码',
|
||||
contexts: ['page'],
|
||||
}),
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
describe('菜单点击解析', () => {
|
||||
const createMockOnClickData = (
|
||||
overrides: Partial<chrome.contextMenus.OnClickData> = {},
|
||||
): chrome.contextMenus.OnClickData => ({
|
||||
menuItemId: 'test',
|
||||
editable: false,
|
||||
pageUrl: 'https://example.com',
|
||||
...overrides,
|
||||
});
|
||||
|
||||
it('当有 selectionText 时应返回对应的 featureKey 和 payload', () => {
|
||||
const info = createMockOnClickData({
|
||||
menuItemId: 'jwt',
|
||||
selectionText: 'test-token',
|
||||
});
|
||||
|
||||
const result = parseContextMenuClick('jwt', info);
|
||||
|
||||
expect(result).toEqual({
|
||||
success: true,
|
||||
data: { featureKey: 'jwt', payload: 'test-token' },
|
||||
});
|
||||
});
|
||||
|
||||
it('当没有 selectionText 和 srcUrl 时应返回错误', () => {
|
||||
const info = createMockOnClickData({
|
||||
menuItemId: 'unknown',
|
||||
pageUrl: undefined,
|
||||
});
|
||||
|
||||
const result = parseContextMenuClick('unknown', info);
|
||||
|
||||
expect(result).toEqual({
|
||||
success: false,
|
||||
error: '无法获取有效数据',
|
||||
});
|
||||
});
|
||||
|
||||
it('当文本超过最大长度限制时应截断', () => {
|
||||
const longText = 'a'.repeat(MAX_PAYLOAD_LENGTH + 1000);
|
||||
const info = createMockOnClickData({
|
||||
menuItemId: 'textStatistics',
|
||||
selectionText: longText,
|
||||
});
|
||||
|
||||
const result = parseContextMenuClick('textStatistics', info);
|
||||
|
||||
expect(result.success).toBe(true);
|
||||
expect(result.data?.payload.length).toBe(MAX_PAYLOAD_LENGTH);
|
||||
});
|
||||
|
||||
it('当文本未超过最大长度限制时应保持原样', () => {
|
||||
const shortText = 'short text';
|
||||
const info = createMockOnClickData({
|
||||
menuItemId: 'textStatistics',
|
||||
selectionText: shortText,
|
||||
});
|
||||
|
||||
const result = parseContextMenuClick('textStatistics', info);
|
||||
|
||||
expect(result).toEqual({
|
||||
success: true,
|
||||
data: { featureKey: 'textStatistics', payload: 'short text' },
|
||||
});
|
||||
});
|
||||
|
||||
it('应该正确处理页面 URL 菜单点击', () => {
|
||||
const info = createMockOnClickData({
|
||||
menuItemId: 'storageCleaner',
|
||||
pageUrl: 'https://example.com/page',
|
||||
});
|
||||
|
||||
const result = parseContextMenuClick('storageCleaner', info);
|
||||
|
||||
expect(result).toEqual({
|
||||
success: true,
|
||||
data: { featureKey: 'storageCleaner', payload: 'https://example.com/page' },
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('消息类型定义', () => {
|
||||
it('CONTEXT_MENU_CLICKED 消息类型应正确定义', () => {
|
||||
expect(MessageAction.CONTEXT_MENU_CLICKED).toBe('contextMenuClicked');
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,189 @@
|
||||
import '../../.wxt/types/imports.d.ts';
|
||||
import { browser } from 'wxt/browser';
|
||||
import { MessageAction, onMessage, sendMessage } from '@/utils/messages';
|
||||
import { createAllContextMenus, parseContextMenuClick } from '@/utils/contextMenu';
|
||||
import { saveContextMenuData } from '@/utils/useContextMenuData';
|
||||
|
||||
export default defineBackground(() => {
|
||||
// 1. 扩展初次安装或更新时，注册右键上下文菜单
|
||||
browser.runtime.onInstalled.addListener(() => {
|
||||
createAllContextMenus();
|
||||
});
|
||||
|
||||
// 2. 右键点击路由
|
||||
browser.contextMenus.onClicked.addListener(async (info, _tab) => {
|
||||
const result = parseContextMenuClick(info.menuItemId as string, info);
|
||||
|
||||
if (!result.success || !result.data) {
|
||||
if (result.error) {
|
||||
console.warn('[Context Menu Warning]', result.error);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
const { featureKey, payload } = result.data;
|
||||
|
||||
try {
|
||||
const sidePanelState = await browser.storage.local.get('sidePanelOpen');
|
||||
const isSidePanelOpen = sidePanelState.sidePanelOpen === true;
|
||||
|
||||
if (isSidePanelOpen) {
|
||||
await sendMessage(MessageAction.CONTEXT_MENU_CLICKED, { featureKey, payload });
|
||||
return;
|
||||
}
|
||||
} catch (err) {
|
||||
console.debug('[Context Menu] Side panel pipeline is not available:', err);
|
||||
}
|
||||
|
||||
await saveContextMenuData({ featureKey, payload });
|
||||
|
||||
try {
|
||||
await browser.action.openPopup();
|
||||
} catch (err) {
|
||||
console.warn(
|
||||
'[Context Menu] 自动打开 popup 失败，请手动点击扩展图标，暂存数据已安全保留:',
|
||||
err,
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
// 监听扩展图标点击事件，安全激活侧边栏
|
||||
browser.action.onClicked.addListener(async (tab) => {
|
||||
if (tab.id) {
|
||||
try {
|
||||
await browser.sidePanel.open({ tabId: tab.id });
|
||||
} catch (err) {
|
||||
console.error('Failed to open side panel via extension action clicked:', err);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// 3. 注入主环境脚本（content script 无权访问 chrome.tabs/scripting，委托 background 执行）
|
||||
onMessage(MessageAction.INJECT_MAIN_WORLD_SCRIPT, async (message) => {
|
||||
const sender = message.sender as chrome.runtime.MessageSender | undefined;
|
||||
const tabId = sender?.tab?.id;
|
||||
|
||||
if (!tabId) {
|
||||
console.warn('[RightClickRestorer] Injection request missing tabId');
|
||||
return { success: false, message: 'Missing tabId' };
|
||||
}
|
||||
|
||||
try {
|
||||
await browser.scripting.executeScript({
|
||||
target: { tabId },
|
||||
func: () => {
|
||||
'use strict';
|
||||
const w = window as unknown as Record<string, unknown>;
|
||||
if (w.__testingToolsRightClickPatched) return;
|
||||
w.__testingToolsRightClickPatched = true;
|
||||
|
||||
const PROTECTED = ['contextmenu', 'copy', 'paste', 'cut', 'selectstart'];
|
||||
|
||||
/* 1. 屏蔽 MouseEvent.prototype.preventDefault（含 mousedown 右键） */
|
||||
const _origPreventDefault = MouseEvent.prototype.preventDefault;
|
||||
Object.defineProperty(MouseEvent.prototype, 'preventDefault', {
|
||||
value: function (this: MouseEvent) {
|
||||
const t = this.type;
|
||||
if (PROTECTED.includes(t) || (t === 'mousedown' && this.button === 2)) {
|
||||
return;
|
||||
}
|
||||
return _origPreventDefault.call(this);
|
||||
},
|
||||
writable: true,
|
||||
configurable: true,
|
||||
});
|
||||
|
||||
/* 2. 屏蔽 Event.prototype.stopPropagation / stopImmediatePropagation */
|
||||
const _origStopPropagation = Event.prototype.stopPropagation;
|
||||
Object.defineProperty(Event.prototype, 'stopPropagation', {
|
||||
value: function (this: Event) {
|
||||
if (PROTECTED.includes(this.type)) return;
|
||||
return _origStopPropagation.call(this);
|
||||
},
|
||||
writable: true,
|
||||
configurable: true,
|
||||
});
|
||||
|
||||
const _origStopImmediatePropagation = Event.prototype.stopImmediatePropagation;
|
||||
Object.defineProperty(Event.prototype, 'stopImmediatePropagation', {
|
||||
value: function (this: Event) {
|
||||
if (PROTECTED.includes(this.type)) return;
|
||||
return _origStopImmediatePropagation.call(this);
|
||||
},
|
||||
writable: true,
|
||||
configurable: true,
|
||||
});
|
||||
|
||||
/* 3. 拦截 document.oncontextmenu（处理 return false 方式） */
|
||||
let _docOnContextMenu: unknown = null;
|
||||
Object.defineProperty(document, 'oncontextmenu', {
|
||||
get() {
|
||||
return _docOnContextMenu;
|
||||
},
|
||||
set(fn: unknown) {
|
||||
if (typeof fn === 'function') {
|
||||
_docOnContextMenu = function (this: GlobalEventHandlers, e: MouseEvent) {
|
||||
const r = (fn as (this: GlobalEventHandlers, ev: MouseEvent) => unknown).call(
|
||||
this,
|
||||
e,
|
||||
);
|
||||
return r === false ? true : r;
|
||||
};
|
||||
} else {
|
||||
_docOnContextMenu = fn;
|
||||
}
|
||||
},
|
||||
configurable: true,
|
||||
});
|
||||
},
|
||||
world: 'MAIN',
|
||||
});
|
||||
|
||||
return { success: true };
|
||||
} catch (err) {
|
||||
const errorMsg = err instanceof Error ? err.message : String(err);
|
||||
console.error('[RightClickRestorer] executeScript failed:', errorMsg);
|
||||
return { success: false, message: errorMsg };
|
||||
}
|
||||
});
|
||||
|
||||
// 4. 异步刷新请求监听（统一使用 alarms API，避免 MV3 Service Worker 被销毁导致任务丢失）
|
||||
onMessage(MessageAction.RELOAD_TAB, async (message) => {
|
||||
const { tabId, delay = 0 } = message.data;
|
||||
|
||||
const executeReload = () => {
|
||||
browser.tabs.reload(tabId).catch((err) => {
|
||||
console.error('Failed to execute tab reload operation:', err);
|
||||
});
|
||||
};
|
||||
|
||||
if (delay <= 0) {
|
||||
executeReload();
|
||||
return { success: true };
|
||||
}
|
||||
|
||||
const alarmName = `reload-tab-${tabId}-${Date.now()}`;
|
||||
|
||||
// 创建一次性 Alarm，由浏览器内核保障触发（不受 Service Worker 生命周期影响）
|
||||
await browser.alarms.create(alarmName, { when: Date.now() + delay });
|
||||
|
||||
// 兜底清理：若 alarm 因异常未触发，delay 后 5 秒强制移除监听器并清理 alarm
|
||||
const cleanupTimeout = setTimeout(() => {
|
||||
browser.alarms.onAlarm.removeListener(alarmListener);
|
||||
browser.alarms.clear(alarmName).catch(() => {});
|
||||
}, delay + 5000);
|
||||
|
||||
const alarmListener = (alarm: { name: string }) => {
|
||||
if (alarm.name !== alarmName) return;
|
||||
|
||||
clearTimeout(cleanupTimeout);
|
||||
executeReload();
|
||||
browser.alarms.onAlarm.removeListener(alarmListener);
|
||||
browser.alarms.clear(alarmName).catch(() => {});
|
||||
};
|
||||
|
||||
browser.alarms.onAlarm.addListener(alarmListener);
|
||||
|
||||
return { success: true };
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,10 @@
|
||||
import '../../.wxt/types/imports.d.ts';
|
||||
import { initMessageHandler } from './content/messageHandler';
|
||||
|
||||
export default defineContentScript({
|
||||
matches: ['<all_urls>'],
|
||||
runAt: 'document_end',
|
||||
main() {
|
||||
initMessageHandler();
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,80 @@
|
||||
import type { ContextMenuClickedPayload } from '@/utils/messages';
|
||||
import { MessageAction, onMessage } from '@/utils/messages';
|
||||
import { getTextStats } from '@/utils/textStatistics';
|
||||
import { hidePopover, showTextStatsResult, showTimestampResult } from './uiPopover';
|
||||
|
||||
function getI18nText(key: string, fallback: string): string {
|
||||
if (typeof chrome !== 'undefined' && chrome.i18n) {
|
||||
return chrome.i18n.getMessage(key) || fallback;
|
||||
}
|
||||
return fallback;
|
||||
}
|
||||
|
||||
function convertTimestamp(input: string): string {
|
||||
const invalidText = getI18nText('invalidTimestamp', 'Invalid Timestamp');
|
||||
const num = Number(input.trim());
|
||||
|
||||
if (isNaN(num)) {
|
||||
return invalidText;
|
||||
}
|
||||
|
||||
// 1e12 判定毫秒级/秒级时间戳兼容
|
||||
const d = num > 1e12 ? new Date(num) : new Date(num * 1000);
|
||||
|
||||
if (isNaN(d.getTime())) {
|
||||
return invalidText;
|
||||
}
|
||||
|
||||
const year = d.getFullYear();
|
||||
const month = String(d.getMonth() + 1).padStart(2, '0');
|
||||
const day = String(d.getDate()).padStart(2, '0');
|
||||
const hours = String(d.getHours()).padStart(2, '0');
|
||||
const minutes = String(d.getMinutes()).padStart(2, '0');
|
||||
const seconds = String(d.getSeconds()).padStart(2, '0');
|
||||
|
||||
return `${year}/${month}/${day} ${hours}:${minutes}:${seconds}`;
|
||||
}
|
||||
|
||||
let lastClickX = 0;
|
||||
let lastClickY = 0;
|
||||
|
||||
document.addEventListener(
|
||||
'contextmenu',
|
||||
(e) => {
|
||||
lastClickX = e.clientX;
|
||||
lastClickY = e.clientY;
|
||||
},
|
||||
{ capture: true, passive: true },
|
||||
);
|
||||
|
||||
export function initContextMenuHandler(): void {
|
||||
const dismissPopover = (): void => {
|
||||
hidePopover();
|
||||
};
|
||||
|
||||
document.addEventListener('click', dismissPopover, { passive: true });
|
||||
document.addEventListener('scroll', dismissPopover, { passive: true });
|
||||
window.addEventListener('resize', dismissPopover, { passive: true });
|
||||
|
||||
onMessage(MessageAction.CONTEXT_MENU_CLICKED, (message) => {
|
||||
const { featureKey, payload } = message.data as ContextMenuClickedPayload;
|
||||
|
||||
switch (featureKey) {
|
||||
case 'timestamp': {
|
||||
const result = convertTimestamp(payload);
|
||||
showTimestampResult(lastClickX, lastClickY, payload, result);
|
||||
break;
|
||||
}
|
||||
|
||||
case 'textStatistics': {
|
||||
const stats = getTextStats(payload);
|
||||
showTextStatsResult(lastClickX, lastClickY, payload, stats);
|
||||
break;
|
||||
}
|
||||
|
||||
default:
|
||||
hidePopover();
|
||||
break;
|
||||
}
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
import { initContextMenuHandler } from './contextMenuHandler';
|
||||
|
||||
export function initMessageHandler(): void {
|
||||
initContextMenuHandler();
|
||||
}
|
||||
@@ -0,0 +1,277 @@
|
||||
const POPOVER_ID = 'testing-tools-popover';
|
||||
const POPOVER_STYLE_ID = 'testing-tools-popover-style';
|
||||
|
||||
function injectStyles(): void {
|
||||
if (document.getElementById(POPOVER_STYLE_ID)) return;
|
||||
|
||||
const style = document.createElement('style');
|
||||
style.id = POPOVER_STYLE_ID;
|
||||
style.textContent = `
|
||||
#${POPOVER_ID} {
|
||||
position: fixed;
|
||||
z-index: 2147483647;
|
||||
max-width: 400px;
|
||||
min-width: 200px;
|
||||
padding: 12px 16px;
|
||||
background: #1a1a2e;
|
||||
color: #e0e0e0;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
opacity: 0;
|
||||
visibility: hidden; /* 💡 1. 规整隐藏状态：允许排版引擎计算尺寸，同时阻断视觉呈现 */
|
||||
transform: translateY(-8px);
|
||||
transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#${POPOVER_ID}.visible {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transform: translateY(0);
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
#${POPOVER_ID} .popover-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 8px;
|
||||
padding-bottom: 8px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
#${POPOVER_ID} .popover-title {
|
||||
font-weight: 600;
|
||||
font-size: 12px;
|
||||
color: #a0a0b0;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
#${POPOVER_ID} .popover-close {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #808090;
|
||||
cursor: pointer;
|
||||
padding: 2px;
|
||||
font-size: 16px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
#${POPOVER_ID} .popover-close:hover {
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
#${POPOVER_ID} .popover-content {
|
||||
word-break: break-all;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
#${POPOVER_ID} .popover-label {
|
||||
color: #808090;
|
||||
font-size: 11px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
#${POPOVER_ID} .popover-value {
|
||||
color: #ffffff;
|
||||
font-family: 'SF Mono', 'Consolas', 'Monaco', monospace;
|
||||
font-size: 14px;
|
||||
padding: 6px 8px;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-radius: 4px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
#${POPOVER_ID} .stat-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 8px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
#${POPOVER_ID} .stat-item {
|
||||
padding: 6px 8px;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
#${POPOVER_ID} .stat-label {
|
||||
font-size: 11px;
|
||||
color: #808090;
|
||||
}
|
||||
|
||||
#${POPOVER_ID} .stat-value {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #ffffff;
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
}
|
||||
|
||||
function getOrCreatePopover(): HTMLElement {
|
||||
let popover = document.getElementById(POPOVER_ID);
|
||||
if (!popover) {
|
||||
injectStyles();
|
||||
popover = document.createElement('div');
|
||||
popover.id = POPOVER_ID;
|
||||
document.body.appendChild(popover);
|
||||
}
|
||||
return popover;
|
||||
}
|
||||
|
||||
// 💡 2. 安全防线：字符实体转义沙箱，彻底掐灭任意恶意脚本的执行通道
|
||||
function escapeHtml(text: string): string {
|
||||
const map: Record<string, string> = {
|
||||
'&': '&',
|
||||
'<': '<',
|
||||
'>': '>',
|
||||
'"': '"',
|
||||
"'": ''',
|
||||
};
|
||||
return text.replace(/[&<>"']/g, (m) => map[m]);
|
||||
}
|
||||
|
||||
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 top = y + 8;
|
||||
|
||||
if (left + rect.width > viewportWidth - 16) {
|
||||
left = viewportWidth - rect.width - 16;
|
||||
}
|
||||
if (left < 16) left = 16;
|
||||
|
||||
if (top + rect.height > viewportHeight - 16) {
|
||||
top = y - rect.height - 8;
|
||||
}
|
||||
if (top < 16) top = 16;
|
||||
|
||||
popover.style.left = `${left}px`;
|
||||
popover.style.top = `${top}px`;
|
||||
}
|
||||
|
||||
let hideTimeout: ReturnType<typeof setTimeout> | null = null;
|
||||
|
||||
export function showPopover(
|
||||
x: number,
|
||||
y: number,
|
||||
contentHtml: string,
|
||||
title?: string,
|
||||
duration: number = 5000,
|
||||
): void {
|
||||
const popover = getOrCreatePopover();
|
||||
|
||||
// 💡 3. 坚固的无障碍绑定：废除违规的行内 inline onclick，改用标准原生节点监听
|
||||
popover.innerHTML = '';
|
||||
|
||||
if (title) {
|
||||
const header = document.createElement('div');
|
||||
header.className = 'popover-header';
|
||||
|
||||
const titleSpan = document.createElement('span');
|
||||
titleSpan.className = 'popover-title';
|
||||
titleSpan.textContent = title; // ✅ 强安全性护航
|
||||
|
||||
const closeBtn = document.createElement('button');
|
||||
closeBtn.className = 'popover-close';
|
||||
closeBtn.innerHTML = '×';
|
||||
closeBtn.addEventListener('click', () => {
|
||||
popover.classList.remove('visible');
|
||||
});
|
||||
|
||||
header.appendChild(titleSpan);
|
||||
header.appendChild(closeBtn);
|
||||
popover.appendChild(header);
|
||||
}
|
||||
|
||||
const contentContainer = document.createElement('div');
|
||||
contentContainer.className = 'popover-content';
|
||||
contentContainer.innerHTML = contentHtml; // 内部拼装的方法已提前完成全消毒转义
|
||||
popover.appendChild(contentContainer);
|
||||
|
||||
// 提前移除激活类名，使 visibility: hidden 起效以供测量
|
||||
popover.classList.remove('visible');
|
||||
|
||||
requestAnimationFrame(() => {
|
||||
positionPopover(popover, x, y);
|
||||
popover.classList.add('visible');
|
||||
});
|
||||
|
||||
if (hideTimeout) clearTimeout(hideTimeout);
|
||||
|
||||
if (duration > 0) {
|
||||
hideTimeout = setTimeout(() => {
|
||||
hidePopover();
|
||||
}, duration);
|
||||
}
|
||||
}
|
||||
|
||||
export function hidePopover(): void {
|
||||
const popover = document.getElementById(POPOVER_ID);
|
||||
if (popover) {
|
||||
popover.classList.remove('visible');
|
||||
}
|
||||
if (hideTimeout) {
|
||||
clearTimeout(hideTimeout);
|
||||
hideTimeout = null;
|
||||
}
|
||||
}
|
||||
|
||||
export function showTimestampResult(x: number, y: number, timestamp: string, result: string): void {
|
||||
// 对外部传来的参数先全数塞入 escapeHtml 大闸进行纯氧化清洗
|
||||
const cleanTimestamp = escapeHtml(timestamp);
|
||||
const cleanResult = escapeHtml(result);
|
||||
|
||||
const content = `
|
||||
<div class="popover-label">输入时间戳</div>
|
||||
<div class="popover-value">${cleanTimestamp}</div>
|
||||
<div class="popover-label">转换结果</div>
|
||||
<div class="popover-value">${cleanResult}</div>
|
||||
`;
|
||||
showPopover(x, y, content, '⏰ 时间戳转换');
|
||||
}
|
||||
|
||||
export function showTextStatsResult(
|
||||
x: number,
|
||||
y: number,
|
||||
text: string,
|
||||
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 = `
|
||||
<div class="popover-label">选中文本</div>
|
||||
<div class="popover-value">${cleanText}</div>
|
||||
<div class="stat-grid">
|
||||
<div class="stat-item">
|
||||
<div class="stat-label">字符</div>
|
||||
<div class="stat-value">${stats.characters}</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-label">单词</div>
|
||||
<div class="stat-value">${stats.words}</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-label">行数</div>
|
||||
<div class="stat-value">${stats.lines}</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-label">字节</div>
|
||||
<div class="stat-value">${stats.bytes}</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
showPopover(x, y, content, '📊 文本统计');
|
||||
}
|
||||
@@ -0,0 +1,383 @@
|
||||
import { SyntheticEvent, useEffect, useMemo, useState } from 'react';
|
||||
import { GripVertical, RefreshCw } from 'lucide-react';
|
||||
import {
|
||||
closestCenter,
|
||||
DndContext,
|
||||
type DragEndEvent,
|
||||
KeyboardSensor,
|
||||
PointerSensor,
|
||||
useSensor,
|
||||
useSensors,
|
||||
} from '@dnd-kit/core';
|
||||
import {
|
||||
arrayMove,
|
||||
SortableContext,
|
||||
sortableKeyboardCoordinates,
|
||||
useSortable,
|
||||
verticalListSortingStrategy,
|
||||
} from '@dnd-kit/sortable';
|
||||
import { CSS } from '@dnd-kit/utilities';
|
||||
import type { PageType, StorageSchema } from '@/types/storage';
|
||||
import { storageUtil } from '@/utils/chromeStorage';
|
||||
import type { PaletteColorKey } from '@/config/features';
|
||||
import {
|
||||
getAllFeatureKeys,
|
||||
getDefaultPageOrder,
|
||||
getDefaultVisibleFeatureKeys,
|
||||
getFeatureByKey,
|
||||
} from '@/config/features';
|
||||
import GlobalSnackbar, { useSnackbarState } from '@/components/GlobalSnackbar';
|
||||
import PageErrorBoundary from '@/components/PageErrorBoundary';
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
|
||||
const PALETTE_COLORS: Record<PaletteColorKey, string> = {
|
||||
primary: '#1976d2',
|
||||
success: '#2e7d32',
|
||||
warning: '#e65100',
|
||||
error: '#c62828',
|
||||
secondary: '#9c27b0',
|
||||
info: '#0288d1',
|
||||
};
|
||||
|
||||
const getColorCode = (key: PaletteColorKey): string => PALETTE_COLORS[key];
|
||||
|
||||
const isValidPage = (page: unknown): page is PageType => {
|
||||
return typeof page === 'string' && (getAllFeatureKeys() as string[]).includes(page);
|
||||
};
|
||||
|
||||
const isValidPageList = (pages: unknown): pages is PageType[] => {
|
||||
return Array.isArray(pages) && pages.every(isValidPage);
|
||||
};
|
||||
|
||||
type WindowType = 'popup' | 'sidepanel' | 'tab';
|
||||
|
||||
interface SortableFeatureRowProps {
|
||||
pageKey: PageType;
|
||||
isLast: boolean;
|
||||
isChecked: boolean;
|
||||
isDisabled: boolean;
|
||||
onToggle: (key: PageType) => void;
|
||||
}
|
||||
|
||||
function SortableFeatureRow({
|
||||
pageKey,
|
||||
isLast,
|
||||
isChecked,
|
||||
isDisabled,
|
||||
onToggle,
|
||||
}: SortableFeatureRowProps) {
|
||||
const { t } = useI18n(['features']);
|
||||
const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
|
||||
id: pageKey,
|
||||
});
|
||||
|
||||
const feature = getFeatureByKey(pageKey);
|
||||
if (!feature) return null;
|
||||
|
||||
const colorKey = feature.themeColorKey ?? 'primary';
|
||||
const colorCode = getColorCode(colorKey);
|
||||
|
||||
const style = {
|
||||
transform: CSS.Transform.toString(transform),
|
||||
transition,
|
||||
zIndex: isDragging ? 1 : 'auto',
|
||||
position: 'relative' as const,
|
||||
backgroundColor: isDragging ? `${colorCode}0a` : 'transparent',
|
||||
boxShadow: isDragging ? '0 8px 20px rgba(0,0,0,0.08)' : 'none',
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={setNodeRef}
|
||||
style={style}
|
||||
className={`flex items-center justify-between p-4 sm:p-5 transition-all duration-200 hover:bg-muted ${
|
||||
isLast ? '' : 'border-b border-border'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center gap-3 sm:gap-4 flex-1 min-w-0">
|
||||
{/* 拖拽手柄 */}
|
||||
<div
|
||||
className="drag-handle text-muted-foreground cursor-grab touch-none transition-colors duration-200 hover:text-foreground active:cursor-grabbing"
|
||||
{...attributes}
|
||||
{...listeners}
|
||||
aria-label={`拖拽以调整 ${t(feature.labelKey)} 的位置`}
|
||||
>
|
||||
<GripVertical size={16} />
|
||||
</div>
|
||||
|
||||
{/* 功能图标 */}
|
||||
<div
|
||||
className="flex items-center justify-center w-9 h-9 rounded-xl flex-shrink-0"
|
||||
style={{
|
||||
backgroundColor: `${colorCode}1a`,
|
||||
color: colorCode,
|
||||
}}
|
||||
>
|
||||
{feature.icon && <feature.icon size={20} />}
|
||||
</div>
|
||||
|
||||
{/* 文本信息 */}
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="font-bold text-[0.95rem] leading-tight text-foreground">
|
||||
{t(feature.labelKey)}
|
||||
</div>
|
||||
{feature.descriptionKey && (
|
||||
<div
|
||||
className="text-xs text-muted-foreground font-medium mt-0.5 overflow-hidden text-ellipsis whitespace-nowrap"
|
||||
title={t(feature.descriptionKey)}
|
||||
>
|
||||
{t(feature.descriptionKey)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 开关 */}
|
||||
<button
|
||||
type="button"
|
||||
role="switch"
|
||||
aria-checked={isChecked}
|
||||
disabled={isDisabled}
|
||||
onClick={() => onToggle(pageKey)}
|
||||
className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 ${
|
||||
isChecked ? 'bg-primary' : 'bg-muted'
|
||||
} ${isDisabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}`}
|
||||
>
|
||||
<span
|
||||
className={`inline-block h-4 w-4 transform rounded-full bg-background transition-transform duration-200 ${
|
||||
isChecked ? 'translate-x-6' : 'translate-x-1'
|
||||
}`}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function App() {
|
||||
const { t } = useI18n(['features', 'common']);
|
||||
|
||||
const initialWindowType = useMemo(() => {
|
||||
if (typeof window === 'undefined') return 'popup';
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const tab = params.get('tab');
|
||||
if (tab === 'popup' || tab === 'sidepanel' || tab === 'tab') {
|
||||
return tab as WindowType;
|
||||
}
|
||||
return 'popup';
|
||||
}, []);
|
||||
|
||||
const [windowType, setWindowType] = useState<WindowType>(initialWindowType);
|
||||
const [visiblePages, setVisiblePages] = useState<PageType[]>([]);
|
||||
const [pageOrder, setPageOrder] = useState<PageType[]>([]);
|
||||
const [isLoaded, setIsLoaded] = useState(false);
|
||||
const { snackbarProps, showMessage } = useSnackbarState();
|
||||
|
||||
const sensors = useSensors(
|
||||
useSensor(PointerSensor, { activationConstraint: { distance: 4 } }),
|
||||
useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),
|
||||
);
|
||||
|
||||
const configKeys = useMemo(() => {
|
||||
switch (windowType) {
|
||||
case 'sidepanel':
|
||||
return {
|
||||
visible: 'app/sidepanelVisiblePages' as keyof StorageSchema,
|
||||
order: 'app/sidepanelPageOrder' as keyof StorageSchema,
|
||||
};
|
||||
case 'tab':
|
||||
return {
|
||||
visible: 'app/tabVisiblePages' as keyof StorageSchema,
|
||||
order: 'app/tabPageOrder' as keyof StorageSchema,
|
||||
};
|
||||
case 'popup':
|
||||
default:
|
||||
return {
|
||||
visible: 'app/popupVisiblePages' as keyof StorageSchema,
|
||||
order: 'app/popupPageOrder' as keyof StorageSchema,
|
||||
};
|
||||
}
|
||||
}, [windowType]);
|
||||
|
||||
useEffect(() => {
|
||||
const url = new URL(window.location.href);
|
||||
url.searchParams.set('tab', windowType);
|
||||
window.history.replaceState({}, '', url.toString());
|
||||
}, [windowType]);
|
||||
|
||||
useEffect(() => {
|
||||
const loadConfig = async () => {
|
||||
setIsLoaded(false);
|
||||
try {
|
||||
const [savedVisible, savedOrder] = await Promise.all([
|
||||
storageUtil.get(configKeys.visible, getDefaultVisibleFeatureKeys()),
|
||||
storageUtil.get(configKeys.order, getDefaultPageOrder()),
|
||||
]);
|
||||
setVisiblePages(
|
||||
isValidPageList(savedVisible) ? savedVisible : getDefaultVisibleFeatureKeys(),
|
||||
);
|
||||
setPageOrder(isValidPageList(savedOrder) ? savedOrder : getDefaultPageOrder());
|
||||
} catch (error) {
|
||||
console.error('Failed to load config:', error);
|
||||
setVisiblePages(getDefaultVisibleFeatureKeys());
|
||||
setPageOrder(getDefaultPageOrder());
|
||||
} finally {
|
||||
setIsLoaded(true);
|
||||
}
|
||||
};
|
||||
|
||||
loadConfig().catch(console.error);
|
||||
}, [configKeys]);
|
||||
|
||||
const showToast = (message: string, severity: 'success' | 'info' | 'warning') => {
|
||||
showMessage(message, { severity });
|
||||
};
|
||||
|
||||
const handlePageToggle = async (page: PageType) => {
|
||||
const isCurrentlyVisible = visiblePages.includes(page);
|
||||
let newPages: PageType[];
|
||||
|
||||
if (isCurrentlyVisible) {
|
||||
if (visiblePages.length <= 1) {
|
||||
showToast('至少需要保留一个可见页面', 'warning');
|
||||
return;
|
||||
}
|
||||
newPages = visiblePages.filter((p) => p !== page);
|
||||
} else {
|
||||
newPages = [...visiblePages, page];
|
||||
}
|
||||
|
||||
try {
|
||||
await storageUtil.set(configKeys.visible, newPages);
|
||||
setVisiblePages(newPages);
|
||||
const feature = getFeatureByKey(page);
|
||||
const label = feature ? t(feature.labelKey) : page;
|
||||
showToast(`已${isCurrentlyVisible ? '隐藏' : '显示'} ${label}`, 'success');
|
||||
} catch (error) {
|
||||
console.error('Failed to save config:', error);
|
||||
showToast('保存失败', 'warning');
|
||||
}
|
||||
};
|
||||
|
||||
const handleDragEnd = async (event: DragEndEvent) => {
|
||||
const { active, over } = event;
|
||||
if (!over || active.id === over.id) return;
|
||||
|
||||
const oldIndex = pageOrder.indexOf(active.id as PageType);
|
||||
const newIndex = pageOrder.indexOf(over.id as PageType);
|
||||
if (oldIndex < 0 || newIndex < 0) return;
|
||||
|
||||
const newOrder = arrayMove(pageOrder, oldIndex, newIndex);
|
||||
setPageOrder(newOrder);
|
||||
|
||||
try {
|
||||
await storageUtil.set(configKeys.order, newOrder);
|
||||
} catch (error) {
|
||||
console.error('Failed to save order:', error);
|
||||
showToast('排序保存失败', 'warning');
|
||||
}
|
||||
};
|
||||
|
||||
const handleRestoreDefaults = async () => {
|
||||
try {
|
||||
const defaults = getDefaultVisibleFeatureKeys();
|
||||
const defaultOrder = getDefaultPageOrder();
|
||||
|
||||
await Promise.all([
|
||||
storageUtil.set(configKeys.visible, defaults),
|
||||
storageUtil.set(configKeys.order, defaultOrder),
|
||||
]);
|
||||
|
||||
setVisiblePages(defaults);
|
||||
setPageOrder(defaultOrder);
|
||||
showToast('已恢复当前模式默认设置', 'success');
|
||||
} catch (error) {
|
||||
console.error('Failed to restore defaults:', error);
|
||||
showToast('恢复失败', 'warning');
|
||||
}
|
||||
};
|
||||
|
||||
const handleWindowTypeChange = (_event: SyntheticEvent, newType: WindowType) => {
|
||||
if (newType !== null) {
|
||||
setWindowType(newType);
|
||||
}
|
||||
};
|
||||
|
||||
if (!isLoaded) {
|
||||
return (
|
||||
<div className="flex justify-center items-center min-h-screen">
|
||||
<div className="w-6 h-6 border-2 border-primary border-t-transparent rounded-full animate-spin" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="app min-h-screen bg-background flex flex-col">
|
||||
<PageErrorBoundary>
|
||||
{/* 顶部标题与导航栏 */}
|
||||
<div className="w-full bg-background border-b border-border pt-8 sm:pt-12 pb-0 px-4 sm:px-8">
|
||||
<div className="max-w-3xl mx-auto">
|
||||
{/* Tab 与恢复按钮同行 */}
|
||||
<div className="flex items-end justify-between border-b-0">
|
||||
<div className="flex-1 flex">
|
||||
{(['popup', 'sidepanel', 'tab'] as WindowType[]).map((type) => (
|
||||
<button
|
||||
key={type}
|
||||
onClick={(e) => handleWindowTypeChange(e, type)}
|
||||
className={`px-4 sm:px-6 py-2 text-[0.9rem] font-bold transition-colors duration-200 ${
|
||||
windowType === type
|
||||
? 'text-primary border-b-2 border-primary'
|
||||
: 'text-muted-foreground hover:text-foreground'
|
||||
}`}
|
||||
>
|
||||
{type === 'popup' ? 'Popup 窗口' : type === 'sidepanel' ? '侧边栏' : '标签页'}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<button
|
||||
onClick={handleRestoreDefaults}
|
||||
className="mb-1 ml-2 p-1.5 text-muted-foreground hover:text-primary hover:bg-primary/10 rounded-lg transition-colors duration-200"
|
||||
title="恢复当前模式默认"
|
||||
>
|
||||
<RefreshCw size={16} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 主内容区域 */}
|
||||
<div className="flex-1 p-4 sm:p-8">
|
||||
<div className="max-w-3xl mx-auto">
|
||||
<div className="rounded-2xl border border-border overflow-hidden bg-card shadow-sm">
|
||||
<DndContext
|
||||
sensors={sensors}
|
||||
collisionDetection={closestCenter}
|
||||
onDragEnd={handleDragEnd}
|
||||
>
|
||||
<SortableContext items={pageOrder} strategy={verticalListSortingStrategy}>
|
||||
<div className="flex flex-col">
|
||||
{pageOrder.map((key, index, array) => {
|
||||
const isChecked = visiblePages.includes(key);
|
||||
const isDisabled = isChecked && visiblePages.length === 1;
|
||||
return (
|
||||
<SortableFeatureRow
|
||||
key={key}
|
||||
pageKey={key}
|
||||
isLast={index === array.length - 1}
|
||||
isChecked={isChecked}
|
||||
isDisabled={isDisabled}
|
||||
onToggle={handlePageToggle}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</SortableContext>
|
||||
</DndContext>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</PageErrorBoundary>
|
||||
|
||||
<GlobalSnackbar {...snackbarProps} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,125 @@
|
||||
import { describe, expect, it, vi, beforeEach } from 'vitest';
|
||||
import { render, screen, waitFor } from '@testing-library/react';
|
||||
import App from '../App';
|
||||
import { storageUtil } from '@/utils/chromeStorage';
|
||||
import {
|
||||
getDefaultVisibleFeatureKeys,
|
||||
getDefaultPageOrder,
|
||||
getFeatureByKey,
|
||||
} from '@/config/features';
|
||||
import { getMessage } from '@/utils/chromeI18n';
|
||||
|
||||
// Mock storageUtil
|
||||
vi.mock('@/utils/chromeStorage', () => ({
|
||||
storageUtil: {
|
||||
get: vi.fn(),
|
||||
set: vi.fn(() => Promise.resolve()),
|
||||
},
|
||||
}));
|
||||
|
||||
describe('Options App', () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
localStorage.clear();
|
||||
});
|
||||
|
||||
it('合法数据应正常加载并显示正确的功能列表', async () => {
|
||||
const defaultOrder = getDefaultPageOrder();
|
||||
|
||||
(storageUtil.get as any).mockImplementation((_key: string, defaultValue: any) =>
|
||||
Promise.resolve(defaultValue),
|
||||
);
|
||||
|
||||
render(<App />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.queryByRole('progressbar')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
// 验证默认可见的功能都被渲染出来了
|
||||
for (const key of defaultOrder) {
|
||||
const feature = getFeatureByKey(key);
|
||||
if (feature) {
|
||||
expect(screen.getByText(getMessage(feature.labelKey))).toBeInTheDocument();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
it('非法 visiblePages 数据应回退到默认值', async () => {
|
||||
const defaultVisible = getDefaultVisibleFeatureKeys();
|
||||
|
||||
(storageUtil.get as any).mockImplementation((key: string, defaultValue: any) => {
|
||||
if (key.includes('VisiblePages')) {
|
||||
return Promise.resolve(['invalidPage', 'anotherInvalid']);
|
||||
}
|
||||
return Promise.resolve(defaultValue);
|
||||
});
|
||||
|
||||
render(<App />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.queryByRole('progressbar')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
// 验证默认值的功能仍然被渲染（非法数据被回退）
|
||||
for (const key of defaultVisible) {
|
||||
const feature = getFeatureByKey(key);
|
||||
if (feature && key !== 'dashboard') {
|
||||
expect(screen.getByText(getMessage(feature.labelKey))).toBeInTheDocument();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
it('非法 pageOrder 数据应回退到默认值', async () => {
|
||||
const defaultOrder = getDefaultPageOrder();
|
||||
|
||||
(storageUtil.get as any).mockImplementation((key: string, defaultValue: any) => {
|
||||
if (key.includes('PageOrder')) {
|
||||
return Promise.resolve(['notARealPage', 123, null]);
|
||||
}
|
||||
return Promise.resolve(defaultValue);
|
||||
});
|
||||
|
||||
render(<App />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.queryByRole('progressbar')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
// 验证默认顺序的功能都被渲染
|
||||
for (const key of defaultOrder) {
|
||||
const feature = getFeatureByKey(key);
|
||||
if (feature) {
|
||||
expect(screen.getByText(getMessage(feature.labelKey))).toBeInTheDocument();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
it('非数组数据应回退到默认值', async () => {
|
||||
const defaultOrder = getDefaultPageOrder();
|
||||
|
||||
(storageUtil.get as any).mockImplementation((key: string, defaultValue: any) => {
|
||||
if (key.includes('VisiblePages')) {
|
||||
return Promise.resolve('not-an-array');
|
||||
}
|
||||
if (key.includes('PageOrder')) {
|
||||
return Promise.resolve({ foo: 'bar' });
|
||||
}
|
||||
return Promise.resolve(defaultValue);
|
||||
});
|
||||
|
||||
render(<App />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.queryByRole('progressbar')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
// 验证默认功能都被渲染
|
||||
for (const key of defaultOrder) {
|
||||
const feature = getFeatureByKey(key);
|
||||
if (feature) {
|
||||
expect(screen.getByText(getMessage(feature.labelKey))).toBeInTheDocument();
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,12 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>扩展设置 - Testing Tools</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="./main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,10 @@
|
||||
import ReactDOM from 'react-dom/client';
|
||||
import AppRoot from '@/providers/AppRoot';
|
||||
import '@/index.css';
|
||||
import App from './App';
|
||||
|
||||
ReactDOM.createRoot(document.getElementById('root')!).render(
|
||||
<AppRoot>
|
||||
<App />
|
||||
</AppRoot>,
|
||||
);
|
||||
@@ -0,0 +1,47 @@
|
||||
import RouterProvider from '@/providers/RouterProvider';
|
||||
import TopBar from '@/components/TopBar';
|
||||
import RouterContainer from '@/components/RouterContainer';
|
||||
import ErrorBoundary from '@/components/ErrorBoundary';
|
||||
import { SnackbarProvider } from '@/components/GlobalSnackbar';
|
||||
import { getEntryPointType } from '@/config/features';
|
||||
import { useMemo } from 'react';
|
||||
|
||||
export default function App() {
|
||||
const handleOpenOptions = () => {
|
||||
chrome.runtime.openOptionsPage().catch(console.error);
|
||||
};
|
||||
|
||||
const entryType = useMemo(() => getEntryPointType(), []);
|
||||
|
||||
const routerConfig = useMemo(() => {
|
||||
if (entryType === 'tab') {
|
||||
return {
|
||||
syncKey: 'app/tabRoute' as const,
|
||||
visiblePagesKey: 'app/tabVisiblePages' as const,
|
||||
pageOrderKey: 'app/tabPageOrder' as const,
|
||||
};
|
||||
}
|
||||
return {
|
||||
syncKey: 'app/popupRoute' as const,
|
||||
visiblePagesKey: 'app/popupVisiblePages' as const,
|
||||
pageOrderKey: 'app/popupPageOrder' as const,
|
||||
};
|
||||
}, [entryType]);
|
||||
|
||||
return (
|
||||
<RouterProvider
|
||||
syncKey={routerConfig.syncKey}
|
||||
visiblePagesKey={routerConfig.visiblePagesKey}
|
||||
pageOrderKey={routerConfig.pageOrderKey}
|
||||
>
|
||||
<SnackbarProvider initialOptions={{ autoHideDuration: 1500 }}>
|
||||
<div className="app flex flex-col w-[400px] max-w-[400px] min-w-[400px] h-[600px] min-h-[600px] overflow-hidden bg-background sm:w-screen sm:max-w-none sm:min-w-0 sm:h-screen sm:min-h-0">
|
||||
<TopBar onOpenOptions={handleOpenOptions} />
|
||||
<ErrorBoundary>
|
||||
<RouterContainer />
|
||||
</ErrorBoundary>
|
||||
</div>
|
||||
</SnackbarProvider>
|
||||
</RouterProvider>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Testing Tools - 标签页</title>
|
||||
<meta name="manifest.type" content="browser_action" />
|
||||
<style>
|
||||
/* Force initial popup size before React hydration */
|
||||
html, body {
|
||||
width: 400px;
|
||||
height: 600px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
background-color: hsl(var(--background));
|
||||
}
|
||||
/* Ensure full size for the root container */
|
||||
#root {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
/* If opened in a tab (mode=tab), reset the fixed size */
|
||||
@media screen and (min-width: 600px) {
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="./main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,10 @@
|
||||
import ReactDOM from 'react-dom/client';
|
||||
import AppRoot from '@/providers/AppRoot';
|
||||
import '@/index.css';
|
||||
import App from './App.tsx';
|
||||
|
||||
ReactDOM.createRoot(document.getElementById('root')!).render(
|
||||
<AppRoot>
|
||||
<App />
|
||||
</AppRoot>,
|
||||
);
|
||||
@@ -0,0 +1,194 @@
|
||||
import { MessageAction, onMessage, sendMessage } from '@/utils/messages';
|
||||
|
||||
const BADGE_ID = 'testing-tools-right-click-restorer-badge';
|
||||
const BADGE_STYLE_ID = 'testing-tools-right-click-restorer-badge-style';
|
||||
|
||||
let isRestored = false;
|
||||
|
||||
function updateBadge(): void {
|
||||
const badge = document.getElementById(BADGE_ID);
|
||||
if (badge) {
|
||||
badge.style.opacity = isRestored ? '1' : '0';
|
||||
}
|
||||
}
|
||||
|
||||
function createBadge(): void {
|
||||
if (document.getElementById(BADGE_ID)) return;
|
||||
|
||||
if (!document.getElementById(BADGE_STYLE_ID)) {
|
||||
const style = document.createElement('style');
|
||||
style.id = BADGE_STYLE_ID;
|
||||
style.textContent = `
|
||||
#${BADGE_ID} {
|
||||
position: fixed;
|
||||
bottom: 16px;
|
||||
right: 16px;
|
||||
z-index: 2147483646;
|
||||
padding: 6px 12px;
|
||||
background: #2e7d32;
|
||||
color: #ffffff;
|
||||
border-radius: 20px;
|
||||
font-size: 12px;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease-out;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
#${BADGE_ID} {
|
||||
background: #4caf50;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.4);
|
||||
}
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
}
|
||||
|
||||
const badge = document.createElement('div');
|
||||
badge.id = BADGE_ID;
|
||||
badge.textContent = '\u53f3\u952e\u5df2\u89e3\u9501';
|
||||
document.body.appendChild(badge);
|
||||
}
|
||||
|
||||
/* ======================== Main World 注入 ======================== */
|
||||
|
||||
async function injectMainWorldScript(): Promise<void> {
|
||||
try {
|
||||
const response = await sendMessage(MessageAction.INJECT_MAIN_WORLD_SCRIPT);
|
||||
if (!response.success) {
|
||||
console.error('[RightClickRestorer] Background injection failed:', response.message);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('[RightClickRestorer] Failed to request main world injection:', err);
|
||||
}
|
||||
}
|
||||
|
||||
/* ======================== Isolated World 事件拦截 ======================== */
|
||||
|
||||
function installEventIntercepts(): void {
|
||||
window.addEventListener(
|
||||
'contextmenu',
|
||||
(e) => {
|
||||
if (!isRestored) return;
|
||||
e.stopPropagation();
|
||||
},
|
||||
true,
|
||||
);
|
||||
|
||||
// 部分网站在 mousedown 阶段阻止 contextmenu
|
||||
window.addEventListener(
|
||||
'mousedown',
|
||||
(e) => {
|
||||
if (!isRestored) return;
|
||||
if (e.button === 2 || (e.buttons & 2) !== 0) {
|
||||
e.stopPropagation();
|
||||
}
|
||||
},
|
||||
true,
|
||||
);
|
||||
}
|
||||
|
||||
/* ======================== 遮罩层穿透 ======================== */
|
||||
|
||||
const MEDIA_TAGS = new Set(['IMG', 'VIDEO', 'CANVAS', 'SVG']);
|
||||
|
||||
function initMousePenetration(): void {
|
||||
window.addEventListener(
|
||||
'mousedown',
|
||||
(e) => {
|
||||
if (!isRestored || e.button !== 2) return;
|
||||
|
||||
const elements = document.elementsFromPoint(e.clientX, e.clientY);
|
||||
if (!elements.length) return;
|
||||
|
||||
let targetMedia: HTMLElement | null = null;
|
||||
for (const el of elements) {
|
||||
if (MEDIA_TAGS.has(el.tagName)) {
|
||||
targetMedia = el as HTMLElement;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if (!targetMedia) return;
|
||||
|
||||
const modified: Array<{ el: HTMLElement; original: string | null }> = [];
|
||||
let foundMedia = false;
|
||||
|
||||
for (const el of elements) {
|
||||
const htmlEl = el as HTMLElement;
|
||||
|
||||
if (el === targetMedia) {
|
||||
foundMedia = true;
|
||||
const original = htmlEl.style.pointerEvents || null;
|
||||
htmlEl.style.setProperty('pointer-events', 'all', 'important');
|
||||
modified.push({ el: htmlEl, original });
|
||||
continue;
|
||||
}
|
||||
|
||||
if (!foundMedia) {
|
||||
const original = htmlEl.style.pointerEvents || null;
|
||||
htmlEl.style.setProperty('pointer-events', 'none', 'important');
|
||||
modified.push({ el: htmlEl, original });
|
||||
}
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
for (const { el, original } of modified) {
|
||||
if (original === null || original === '') {
|
||||
el.style.removeProperty('pointer-events');
|
||||
} else {
|
||||
el.style.pointerEvents = original;
|
||||
}
|
||||
}
|
||||
}, 300);
|
||||
},
|
||||
true,
|
||||
);
|
||||
}
|
||||
|
||||
/* ======================== 激活保护 ======================== */
|
||||
|
||||
async function activateProtection(): Promise<void> {
|
||||
if (isRestored) return;
|
||||
|
||||
await injectMainWorldScript();
|
||||
|
||||
// 再次检查，防止并发调用导致重复注册
|
||||
if (isRestored) return;
|
||||
|
||||
installEventIntercepts();
|
||||
initMousePenetration();
|
||||
|
||||
isRestored = true;
|
||||
updateBadge();
|
||||
}
|
||||
|
||||
/* ======================== 消息通信 ======================== */
|
||||
|
||||
function initMessaging(): void {
|
||||
onMessage(MessageAction.RESTORE_RIGHT_CLICK, async () => {
|
||||
await activateProtection();
|
||||
return { success: true, restored: isRestored };
|
||||
});
|
||||
|
||||
onMessage(MessageAction.QUERY_RIGHT_CLICK_STATUS, () => {
|
||||
return { success: true, restored: isRestored };
|
||||
});
|
||||
}
|
||||
|
||||
/* ======================== 入口 ======================== */
|
||||
|
||||
export default defineContentScript({
|
||||
matches: ['<all_urls>'],
|
||||
runAt: 'document_start',
|
||||
main() {
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', createBadge, { once: true });
|
||||
} else {
|
||||
createBadge();
|
||||
}
|
||||
initMessaging();
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,35 @@
|
||||
import { useEffect } from 'react';
|
||||
import RouterProvider from '@/providers/RouterProvider';
|
||||
import TopBar from '@/components/TopBar';
|
||||
import RouterContainer from '@/components/RouterContainer';
|
||||
import ErrorBoundary from '@/components/ErrorBoundary';
|
||||
import { SnackbarProvider } from '@/components/GlobalSnackbar';
|
||||
import { MessageAction, sendMessage } from '@/utils/messages';
|
||||
|
||||
export default function App() {
|
||||
const handleOpenOptions = () => {
|
||||
chrome.runtime.openOptionsPage().catch((err) => {
|
||||
console.error('Failed to open options page:', err);
|
||||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
sendMessage(MessageAction.SIDE_PANEL_STATE_CHANGED, { isOpen: true });
|
||||
return () => {
|
||||
sendMessage(MessageAction.SIDE_PANEL_STATE_CHANGED, { isOpen: false });
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<RouterProvider defaultRoute="dashboard" syncKey="app/sidepanelRoute">
|
||||
<SnackbarProvider initialOptions={{ autoHideDuration: 1500 }}>
|
||||
<div className="app flex flex-col h-screen w-full overflow-hidden">
|
||||
<TopBar onOpenOptions={handleOpenOptions} />
|
||||
<ErrorBoundary>
|
||||
<RouterContainer />
|
||||
</ErrorBoundary>
|
||||
</div>
|
||||
</SnackbarProvider>
|
||||
</RouterProvider>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Testing Tools - Side Panel</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="./main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,10 @@
|
||||
import ReactDOM from 'react-dom/client';
|
||||
import AppRoot from '@/providers/AppRoot';
|
||||
import '@/index.css';
|
||||
import App from './App.tsx';
|
||||
|
||||
ReactDOM.createRoot(document.getElementById('root')!).render(
|
||||
<AppRoot>
|
||||
<App />
|
||||
</AppRoot>,
|
||||
);
|
||||
@@ -0,0 +1,6 @@
|
||||
import { type ClassValue, clsx } from 'clsx';
|
||||
import { twMerge } from 'tailwind-merge';
|
||||
|
||||
export function cn(...inputs: ClassValue[]) {
|
||||
return twMerge(clsx(inputs));
|
||||
}
|
||||
@@ -0,0 +1,253 @@
|
||||
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 { Button } from '@/components/ui/button';
|
||||
import { downloadBlob, formatFileSize } from '@/utils/base64Converter';
|
||||
import { useStorageState } from '@/utils/useStorageState';
|
||||
import type { Base64ConvertDirection } from '@/types/storage';
|
||||
import SwitchButtonGroup from '@/components/SwitchButtonGroup';
|
||||
import { useBase64Converter } from './useBase64Converter';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
const isValidDirection = (val: unknown): val is Base64ConvertDirection =>
|
||||
val === 'encode' || val === 'decode';
|
||||
|
||||
interface Base64ConverterSectionProps {
|
||||
mode: 'file' | 'image';
|
||||
}
|
||||
|
||||
export default function Base64ConverterSection({ mode }: Base64ConverterSectionProps) {
|
||||
const { t } = useI18n('base64Converter');
|
||||
|
||||
const [direction, setDirection] = useStorageState(
|
||||
`base64Converter/${mode}Mode/direction`,
|
||||
'encode',
|
||||
isValidDirection,
|
||||
);
|
||||
|
||||
const {
|
||||
result,
|
||||
info,
|
||||
isLoading,
|
||||
isDragging,
|
||||
setIsDragging,
|
||||
fileInputRef,
|
||||
encodeError,
|
||||
decodeInput,
|
||||
setDecodeInput,
|
||||
decoded,
|
||||
decodeError,
|
||||
decodedFileName,
|
||||
setCustomFileName,
|
||||
resetAll,
|
||||
safeFileSelect,
|
||||
maxFileSizeStr,
|
||||
} = useBase64Converter({ mode });
|
||||
|
||||
const handleDirectionChange = (next: Base64ConvertDirection) => {
|
||||
if (!next || next === direction) return;
|
||||
resetAll();
|
||||
setDirection(next);
|
||||
};
|
||||
|
||||
const handleDownload = () => {
|
||||
if (decoded) downloadBlob(decoded.blob, decodedFileName);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="w-full flex flex-col space-y-4">
|
||||
<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>
|
||||
|
||||
{direction === 'encode' ? (
|
||||
<div className="flex flex-col space-y-4">
|
||||
<div
|
||||
onDragOver={(e) => {
|
||||
e.preventDefault();
|
||||
setIsDragging(true);
|
||||
}}
|
||||
onDragLeave={() => setIsDragging(false)}
|
||||
onDrop={(e) => {
|
||||
e.preventDefault();
|
||||
setIsDragging(false);
|
||||
const file = e.dataTransfer.files[0];
|
||||
if (file) safeFileSelect(file);
|
||||
}}
|
||||
onClick={() => fileInputRef.current?.click()}
|
||||
className={cn(
|
||||
'flex flex-col items-center justify-center min-h-[190px] border-2 border-dashed rounded-2xl p-8 cursor-pointer',
|
||||
isDragging
|
||||
? 'border-primary bg-primary/10'
|
||||
: info
|
||||
? 'border-primary/60 bg-primary/5'
|
||||
: 'border-border bg-muted/40 hover:border-primary/80 hover:bg-muted/70',
|
||||
)}
|
||||
>
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
type="file"
|
||||
accept={mode === 'image' ? 'image/*' : undefined}
|
||||
hidden
|
||||
onChange={(e) => {
|
||||
const file = e.target.files?.[0];
|
||||
if (file) safeFileSelect(file);
|
||||
}}
|
||||
/>
|
||||
{isLoading ? (
|
||||
<div className="w-9 h-9 border-3 border-primary/20 border-t-primary rounded-full animate-spin" />
|
||||
) : info ? (
|
||||
<div className="flex flex-col items-center gap-1.5 text-center w-full">
|
||||
{mode === 'image' && result && (
|
||||
<div className="relative p-1 border border-border bg-background rounded-lg shadow-sm mb-1 max-w-[180px] overflow-hidden">
|
||||
<img
|
||||
src={result.output}
|
||||
alt="preview"
|
||||
className="max-h-32 w-full object-contain rounded"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<Upload className={cn('w-8 h-8 text-primary')} />
|
||||
<span className="text-sm font-bold text-foreground/90 max-w-[280px] truncate">
|
||||
{info.name}
|
||||
</span>
|
||||
<span className="text-xs text-muted-foreground/80 font-mono tabular-nums">
|
||||
{formatFileSize(info.size)} · {info.type}
|
||||
</span>
|
||||
<span className="text-[11px] font-medium text-primary/80 mt-1">
|
||||
{t('clickOrDropToReplace')}
|
||||
</span>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col items-center gap-1.5 text-center">
|
||||
{mode === 'image' ? (
|
||||
<ImageIcon className="w-8 h-8 text-muted-foreground/60" />
|
||||
) : (
|
||||
<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')}
|
||||
</span>
|
||||
<span className="text-[10px] font-medium text-muted-foreground/60">
|
||||
{t('maxFileSize', { max: maxFileSizeStr })}
|
||||
</span>
|
||||
{mode === 'image' && (
|
||||
<span className="text-[10px] font-medium text-muted-foreground/50">
|
||||
{t('supportedFormats')}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{encodeError && (
|
||||
<div className="p-3.5 bg-destructive/10 border border-destructive/20 rounded-xl text-xs font-semibold text-destructive">
|
||||
{encodeError}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{result && (
|
||||
<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')}
|
||||
</span>
|
||||
<div className="flex gap-2">
|
||||
<CopyButton
|
||||
text={result.rawBase64}
|
||||
tooltip={t('copyRaw')}
|
||||
className="h-6 px-2 rounded-md border text-[10px] font-bold"
|
||||
/>
|
||||
<CopyButton
|
||||
text={result.output}
|
||||
tooltip={t('copyDataUri')}
|
||||
className="h-6 px-2 rounded-md border text-[10px] font-bold"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<TextInputArea
|
||||
readOnly
|
||||
value={
|
||||
result.output.length > 2000
|
||||
? `${result.output.substring(0, 2000)}...`
|
||||
: result.output
|
||||
}
|
||||
showClear={false}
|
||||
minRows={4}
|
||||
/>
|
||||
<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)}
|
||||
</span>
|
||||
</span>
|
||||
<span className="text-border/60">|</span>
|
||||
<span>
|
||||
{t('encodedSize')}:{' '}
|
||||
<span className="font-semibold text-foreground/80">
|
||||
{formatFileSize(result.outputBytes)}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={resetAll}
|
||||
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>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col space-y-4">
|
||||
<TextInputArea
|
||||
placeholder={t('decodeBase64Placeholder')}
|
||||
value={decodeInput}
|
||||
onChange={setDecodeInput}
|
||||
externalError={decodeError || undefined}
|
||||
showClear={true}
|
||||
allowCopy={true}
|
||||
minRows={6}
|
||||
onClear={resetAll}
|
||||
/>
|
||||
{decoded && (
|
||||
<DecodeResultPaper
|
||||
title={mode === 'image' ? t('decodedImageOutput') : t('decodedFileOutput')}
|
||||
mimeType={decoded.mimeType}
|
||||
blobSize={decoded.blob.size}
|
||||
fileName={decodedFileName}
|
||||
onFileNameChange={setCustomFileName}
|
||||
onDownload={handleDownload}
|
||||
>
|
||||
{mode === 'image' && (
|
||||
<div className="relative p-1.5 border border-border bg-background dark:bg-muted/10 rounded-xl max-w-[220px] mb-3 overflow-hidden shadow-sm">
|
||||
<img
|
||||
src={`data:${decoded.mimeType};base64,${decoded.rawBase64}`}
|
||||
alt="decoded preview"
|
||||
className="max-h-40 w-full rounded-lg object-contain bg-[linear-gradient(45deg,#ccc_25%,transparent_25%),linear-gradient(-45deg,#ccc_25%,transparent_25%),linear-gradient(45deg,transparent_75%,#ccc_75%),linear-gradient(-45deg,transparent_75%,#ccc_75%)] bg-[size:10px_10px] bg-[position:0_0,0_5px,5px_-5px,-5px_0] dark:bg-none"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</DecodeResultPaper>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,167 @@
|
||||
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');
|
||||
|
||||
// 1. 纯净的核心源状态机：只保留输入源和转换方向
|
||||
const [input, setInput] = useState('');
|
||||
const [debouncedInput, setDebouncedInput] = useState('');
|
||||
const [direction, setDirection] = useState<'encode' | 'decode'>('encode');
|
||||
|
||||
// 2. 文本高频敲击防抖大闸：斩断频繁进行文本转 Base64 带来的 CPU 计算过热
|
||||
useEffect(() => {
|
||||
const handle = setTimeout(() => {
|
||||
setDebouncedInput(input);
|
||||
}, 200);
|
||||
return () => clearTimeout(handle);
|
||||
}, [input]);
|
||||
|
||||
// 3. 右键联动数据上下文：优雅原地合并受控状态
|
||||
const handleContextMenuData = useCallback((payload: string) => {
|
||||
setInput(payload);
|
||||
setDebouncedInput(payload);
|
||||
setDirection('decode');
|
||||
}, []);
|
||||
|
||||
useContextMenuData({ featureKey: 'base64Converter', onData: handleContextMenuData });
|
||||
|
||||
// 💡 4. 贯彻方案 A（彻底消灭 setOutput / setError）：
|
||||
// 让所有的转化逻辑、类型安全校验在 useMemo 内存管道中单次渲染一气呵成！
|
||||
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">
|
||||
{/* 受控方向切流中枢 */}
|
||||
<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>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,190 @@
|
||||
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
|
||||
import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
|
||||
import TextMode from '../TextMode';
|
||||
|
||||
// Mock CopyButton
|
||||
vi.mock('@/components/CopyButton', () => ({
|
||||
CopyButton: ({ text }: { text: string }) => <button data-testid="copy-button">{text}</button>,
|
||||
default: ({ text }: { text: string }) => <button data-testid="copy-button">{text}</button>,
|
||||
}));
|
||||
|
||||
describe('TextMode', () => {
|
||||
beforeEach(() => {
|
||||
vi.useFakeTimers({ shouldAdvanceTime: true });
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
vi.useRealTimers();
|
||||
});
|
||||
|
||||
it('应该渲染编码/解码切换按钮', () => {
|
||||
render(<TextMode />);
|
||||
expect(screen.getByText('编码')).toBeInTheDocument();
|
||||
expect(screen.getByText('解码')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('应该渲染输入框和转换按钮', () => {
|
||||
render(<TextMode />);
|
||||
expect(screen.getByPlaceholderText('输入需要编码为 Base64 的文本...')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('应该将文本编码为 Base64', async () => {
|
||||
render(<TextMode />);
|
||||
const input = screen.getByPlaceholderText('输入需要编码为 Base64 的文本...');
|
||||
fireEvent.change(input, { target: { value: 'Hello' } });
|
||||
|
||||
act(() => {
|
||||
vi.advanceTimersByTime(200);
|
||||
});
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('Base64 编码结果')).toBeInTheDocument();
|
||||
});
|
||||
expect(screen.getByRole('button', { name: 'SGVsbG8=' })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('应该解码 Base64 文本', async () => {
|
||||
render(<TextMode />);
|
||||
|
||||
// 切换到解码模式
|
||||
fireEvent.click(screen.getByText('解码'));
|
||||
|
||||
const input = screen.getByPlaceholderText('输入需要解码的 Base64 字符串...');
|
||||
fireEvent.change(input, { target: { value: 'SGVsbG8=' } });
|
||||
|
||||
act(() => {
|
||||
vi.advanceTimersByTime(200);
|
||||
});
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('解码文本结果')).toBeInTheDocument();
|
||||
});
|
||||
expect(screen.getByRole('button', { name: 'Hello' })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('应该对无效 Base64 显示错误', async () => {
|
||||
render(<TextMode />);
|
||||
|
||||
// 切换到解码模式
|
||||
fireEvent.click(screen.getByText('解码'));
|
||||
|
||||
const input = screen.getByPlaceholderText('输入需要解码的 Base64 字符串...');
|
||||
fireEvent.change(input, { target: { value: 'invalid!!!' } });
|
||||
|
||||
act(() => {
|
||||
vi.advanceTimersByTime(200);
|
||||
});
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('Base64 字符串无效')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it('切换方向时应该清除输出', async () => {
|
||||
render(<TextMode />);
|
||||
|
||||
// 先编码
|
||||
const input = screen.getByPlaceholderText('输入需要编码为 Base64 的文本...');
|
||||
fireEvent.change(input, { target: { value: 'Hello' } });
|
||||
|
||||
act(() => {
|
||||
vi.advanceTimersByTime(200);
|
||||
});
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByRole('button', { name: 'SGVsbG8=' })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
// 切换方向
|
||||
fireEvent.click(screen.getByText('解码'));
|
||||
|
||||
// 输出应该被清除
|
||||
await waitFor(() => {
|
||||
expect(screen.queryByRole('button', { name: 'SGVsbG8=' })).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it('点击清除按钮应该清空所有内容', async () => {
|
||||
render(<TextMode />);
|
||||
|
||||
const input = screen.getByPlaceholderText('输入需要编码为 Base64 的文本...');
|
||||
fireEvent.change(input, { target: { value: 'Hello' } });
|
||||
|
||||
act(() => {
|
||||
vi.advanceTimersByTime(200);
|
||||
});
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByRole('button', { name: 'SGVsbG8=' })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
fireEvent.click(screen.getByRole('button', { name: 'textInputArea.clear' }));
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.queryByRole('button', { name: 'SGVsbG8=' })).not.toBeInTheDocument();
|
||||
expect(input).toHaveValue('');
|
||||
});
|
||||
});
|
||||
|
||||
it('解码模式下粘贴图片 data URI 时应该显示切换图像模式的提示', () => {
|
||||
render(<TextMode />);
|
||||
|
||||
fireEvent.click(screen.getByText('解码'));
|
||||
|
||||
const input = screen.getByPlaceholderText('输入需要解码的 Base64 字符串...');
|
||||
fireEvent.change(input, {
|
||||
target: { value: 'data:image/png;base64,iVBORw0KGgo=' },
|
||||
});
|
||||
|
||||
expect(
|
||||
screen.getByText('检测到图片的 data URI，请使用「图像」选项卡进行解码。'),
|
||||
).toBeInTheDocument();
|
||||
expect(screen.getByText('切换到图像模式')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('粘贴非图片 data URI 时不应该显示图像模式提示', () => {
|
||||
render(<TextMode />);
|
||||
|
||||
fireEvent.click(screen.getByText('解码'));
|
||||
|
||||
const input = screen.getByPlaceholderText('输入需要解码的 Base64 字符串...');
|
||||
fireEvent.change(input, { target: { value: 'SGVsbG8=' } });
|
||||
|
||||
expect(
|
||||
screen.queryByText('检测到图片的 data URI，请使用「图像」选项卡进行解码。'),
|
||||
).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('点击切换图像模式按钮应该调用 onSwitchToImageMode 回调', () => {
|
||||
const onSwitch = vi.fn();
|
||||
render(<TextMode onSwitchToImageMode={onSwitch} />);
|
||||
|
||||
fireEvent.click(screen.getByText('解码'));
|
||||
const input = screen.getByPlaceholderText('输入需要解码的 Base64 字符串...');
|
||||
fireEvent.change(input, {
|
||||
target: { value: 'data:image/png;base64,iVBORw0KGgo=' },
|
||||
});
|
||||
|
||||
fireEvent.click(screen.getByText('切换到图像模式'));
|
||||
expect(onSwitch).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it('解码模式下对二进制数据应该显示更清晰的错误', async () => {
|
||||
render(<TextMode />);
|
||||
|
||||
fireEvent.click(screen.getByText('解码'));
|
||||
|
||||
const input = screen.getByPlaceholderText('输入需要解码的 Base64 字符串...');
|
||||
fireEvent.change(input, { target: { value: 'iVBORw0KGgo=' } });
|
||||
|
||||
act(() => {
|
||||
vi.advanceTimersByTime(200);
|
||||
});
|
||||
|
||||
await waitFor(() => {
|
||||
expect(
|
||||
screen.getByText('输入似乎是二进制数据（如图片）。请切换到「图像」选项卡。'),
|
||||
).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,67 @@
|
||||
import { describe, expect, it, vi } from 'vitest';
|
||||
import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
|
||||
import Base64ConverterPage from '../index';
|
||||
|
||||
// Mock getEntryPointType
|
||||
vi.mock('@/config/features', async (importOriginal) => {
|
||||
const actual = await importOriginal<typeof import('@/config/features')>();
|
||||
return {
|
||||
...actual,
|
||||
getEntryPointType: () => 'sidepanel',
|
||||
};
|
||||
});
|
||||
|
||||
// Mock 子组件
|
||||
vi.mock('../TextMode', () => ({
|
||||
default: ({ onSwitchToImageMode }: { onSwitchToImageMode?: () => void }) => (
|
||||
<div data-testid="text-mode">
|
||||
TextMode
|
||||
{onSwitchToImageMode && <button onClick={onSwitchToImageMode}>switchToImage</button>}
|
||||
</div>
|
||||
),
|
||||
}));
|
||||
|
||||
vi.mock('../Base64ConverterSection', () => ({
|
||||
default: ({ mode }: { mode: string }) => <div data-testid={`${mode}-mode`}>{mode}</div>,
|
||||
}));
|
||||
|
||||
const waitForStorageInit = () =>
|
||||
act(async () => {
|
||||
await Promise.resolve();
|
||||
});
|
||||
|
||||
describe('Base64ConverterPage', () => {
|
||||
it('应该默认渲染文本模式', async () => {
|
||||
render(<Base64ConverterPage />);
|
||||
await waitForStorageInit();
|
||||
expect(screen.getByTestId('text-mode')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('应该渲染模式切换按钮', async () => {
|
||||
render(<Base64ConverterPage />);
|
||||
await waitForStorageInit();
|
||||
expect(screen.getByText('文本')).toBeInTheDocument();
|
||||
expect(screen.getByText('文件')).toBeInTheDocument();
|
||||
expect(screen.getByText('图像')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('切换到文件模式应该渲染 FileMode', async () => {
|
||||
render(<Base64ConverterPage />);
|
||||
await waitForStorageInit();
|
||||
fireEvent.click(screen.getByText('文件'));
|
||||
await waitFor(() => {
|
||||
expect(screen.getByTestId('file-mode')).toBeInTheDocument();
|
||||
});
|
||||
expect(screen.queryByTestId('text-mode')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('切换到图像模式应该渲染 ImageMode', async () => {
|
||||
render(<Base64ConverterPage />);
|
||||
await waitForStorageInit();
|
||||
fireEvent.click(screen.getByText('图像'));
|
||||
await waitFor(() => {
|
||||
expect(screen.getByTestId('image-mode')).toBeInTheDocument();
|
||||
});
|
||||
expect(screen.queryByTestId('text-mode')).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,43 @@
|
||||
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 SwitchButtonGroup from '@/components/SwitchButtonGroup';
|
||||
|
||||
const VALID_PAGE_MODES: readonly Base64ConverterPageMode[] = ['text', 'file', 'image'];
|
||||
const isValidPageMode = (val: unknown): val is Base64ConverterPageMode =>
|
||||
typeof val === 'string' && (VALID_PAGE_MODES as readonly string[]).includes(val);
|
||||
|
||||
type PageMode = Base64ConverterPageMode;
|
||||
|
||||
export default function Index() {
|
||||
const { t } = useI18n('base64Converter');
|
||||
const [pageMode, setPageMode] = useStorageState(
|
||||
'base64Converter/pageMode',
|
||||
'text',
|
||||
isValidPageMode,
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="p-4 w-full flex flex-col space-y-4 min-h-[520px] select-none">
|
||||
<SwitchButtonGroup
|
||||
value={pageMode}
|
||||
options={[
|
||||
{ value: 'text', label: t('base64Converter:textMode') },
|
||||
{ value: 'file', label: t('base64Converter:fileMode') },
|
||||
{ value: 'image', label: t('base64Converter:imageMode') },
|
||||
]}
|
||||
onChange={(value: PageMode) => setPageMode(value)}
|
||||
size="small"
|
||||
className="w-full sm:w-auto"
|
||||
/>
|
||||
|
||||
<div className="w-full pt-1">
|
||||
{pageMode === 'text' && <TextMode onSwitchToImageMode={() => setPageMode('image')} />}
|
||||
{pageMode === 'file' && <Base64ConverterSection mode="file" />}
|
||||
{pageMode === 'image' && <Base64ConverterSection mode="image" />}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,154 @@
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
import type { FileToBase64Result } from '@/utils/base64Converter';
|
||||
import {
|
||||
base64ToBlob,
|
||||
fileToBase64,
|
||||
isFileSizeValid,
|
||||
isSupportedImageExtension,
|
||||
isSupportedImageType,
|
||||
MAX_FILE_SIZE,
|
||||
} from '@/utils/base64Converter';
|
||||
|
||||
interface FileInfo {
|
||||
name: string;
|
||||
size: number;
|
||||
type: string;
|
||||
}
|
||||
|
||||
interface UseBase64ConverterProps {
|
||||
mode: 'file' | 'image';
|
||||
}
|
||||
|
||||
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);
|
||||
const [isDragging, setIsDragging] = useState(false);
|
||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||
const cancelRef = useRef(false);
|
||||
|
||||
const [decodeInput, setDecodeInput] = useState('');
|
||||
const [debouncedDecodeInput, setDebouncedDecodeInput] = useState('');
|
||||
const [encodeError, setEncodeError] = useState<string | null>(null);
|
||||
const [customFileName, setCustomFileName] = useState('');
|
||||
|
||||
useEffect(() => {
|
||||
const handle = setTimeout(() => {
|
||||
setDebouncedDecodeInput(decodeInput);
|
||||
}, 250);
|
||||
return () => clearTimeout(handle);
|
||||
}, [decodeInput]);
|
||||
|
||||
const resetAll = useCallback(() => {
|
||||
cancelRef.current = true;
|
||||
setResult(null);
|
||||
setInfo(null);
|
||||
setIsLoading(false);
|
||||
setDecodeInput('');
|
||||
setDebouncedDecodeInput('');
|
||||
setCustomFileName('');
|
||||
setEncodeError(null);
|
||||
if (fileInputRef.current) fileInputRef.current.value = '';
|
||||
}, []);
|
||||
|
||||
const handleFileSelect = useCallback(
|
||||
async (file: File) => {
|
||||
cancelRef.current = false;
|
||||
setEncodeError(null);
|
||||
setResult(null);
|
||||
setInfo(null);
|
||||
|
||||
if (!isFileSizeValid(file.size)) {
|
||||
setEncodeError(t('fileSizeExceeded', { max: `${MAX_FILE_SIZE / 1024 / 1024} MB` }));
|
||||
return;
|
||||
}
|
||||
|
||||
if (
|
||||
mode === 'image' &&
|
||||
!isSupportedImageType(file.type) &&
|
||||
!isSupportedImageExtension(file.name)
|
||||
) {
|
||||
setEncodeError(t('unsupportedImageType'));
|
||||
return;
|
||||
}
|
||||
|
||||
setInfo({
|
||||
name: file.name,
|
||||
size: file.size,
|
||||
type: file.type || 'application/octet-stream',
|
||||
});
|
||||
setIsLoading(true);
|
||||
|
||||
try {
|
||||
const res = await fileToBase64(file);
|
||||
if (!cancelRef.current) setResult(res);
|
||||
} catch (e) {
|
||||
if (!cancelRef.current) {
|
||||
setEncodeError(e instanceof Error ? e.message : t('conversionFailed'));
|
||||
}
|
||||
} finally {
|
||||
if (!cancelRef.current) setIsLoading(false);
|
||||
}
|
||||
},
|
||||
[mode, t],
|
||||
);
|
||||
|
||||
const safeFileSelect = useCallback(
|
||||
(file: File) => {
|
||||
handleFileSelect(file).catch((err) => {
|
||||
console.error(`Base64 [${mode}] pipeline crash:`, err);
|
||||
});
|
||||
},
|
||||
[handleFileSelect, mode],
|
||||
);
|
||||
|
||||
const decodePipeline = useMemo(() => {
|
||||
const cleanedInput = debouncedDecodeInput.replace(/^data:image\/[a-z+]+;base64,/i, '').trim();
|
||||
if (!cleanedInput) return { decoded: null, error: null };
|
||||
|
||||
try {
|
||||
const res = base64ToBlob(cleanedInput);
|
||||
return { decoded: res, error: null };
|
||||
} catch (e) {
|
||||
const message = e instanceof Error ? e.message : '';
|
||||
return {
|
||||
decoded: null,
|
||||
error: message === 'Invalid Base64 string' ? t('invalidBase64') : t('conversionFailed'),
|
||||
};
|
||||
}
|
||||
}, [debouncedDecodeInput, t]);
|
||||
|
||||
const decoded = decodePipeline.decoded;
|
||||
const decodeError = decodePipeline.error;
|
||||
|
||||
const decodedFileName = useMemo(() => {
|
||||
if (customFileName) return customFileName;
|
||||
if (decoded) return `decoded${decoded.suggestedExtension}`;
|
||||
return '';
|
||||
}, [customFileName, decoded]);
|
||||
|
||||
// 💡 托管最大文件体积字符串算子，清除下游引入风险
|
||||
const maxFileSizeStr = `${MAX_FILE_SIZE / 1024 / 1024} MB`;
|
||||
|
||||
return {
|
||||
result,
|
||||
info,
|
||||
isLoading,
|
||||
isDragging,
|
||||
setIsDragging,
|
||||
fileInputRef,
|
||||
encodeError,
|
||||
decodeInput,
|
||||
setDecodeInput,
|
||||
decoded,
|
||||
decodeError,
|
||||
decodedFileName,
|
||||
setCustomFileName,
|
||||
resetAll,
|
||||
safeFileSelect,
|
||||
maxFileSizeStr,
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,107 @@
|
||||
import type { ComponentType } from 'react';
|
||||
import React from 'react';
|
||||
import type { LucideProps } from 'lucide-react';
|
||||
import { ChevronRight } from 'lucide-react';
|
||||
import type { PaletteColorKey } from '@/config/features';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
const PALETTE_COLORS: Record<PaletteColorKey, string> = {
|
||||
primary: '13, 148, 136', // teal
|
||||
success: '22, 163, 74', // green
|
||||
warning: '217, 119, 6', // amber (存储清理的橙色轴)
|
||||
error: '220, 38, 38', // red
|
||||
secondary: '147, 51, 232',
|
||||
info: '37, 99, 235', // blue
|
||||
};
|
||||
|
||||
export interface ToolCardProps extends React.HTMLAttributes<HTMLDivElement> {
|
||||
title: string;
|
||||
description?: string;
|
||||
snapshot?: React.ReactNode;
|
||||
colorKey: PaletteColorKey;
|
||||
icon: ComponentType<LucideProps>;
|
||||
onNavigate: () => void;
|
||||
}
|
||||
|
||||
export default function ToolCard({
|
||||
title,
|
||||
description,
|
||||
snapshot,
|
||||
colorKey,
|
||||
icon: IconComponent,
|
||||
onNavigate,
|
||||
className,
|
||||
...props
|
||||
}: ToolCardProps) {
|
||||
const rgbValues = PALETTE_COLORS[colorKey];
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
['--tool-color' as string]: rgbValues,
|
||||
}}
|
||||
/* 💡 核心修复点：
|
||||
- 坚决不用 h-full 或固定高度，锁死 h-auto（高度自适应流），配合 py-4 px-4 牢牢把内容包裹在卡片体内。
|
||||
- 废除原先会乱飘的内联 style 属性擦写，全权放权给 Tailwind 的声明式 hover 变体。
|
||||
*/
|
||||
className={cn(
|
||||
'group relative rounded-xl border border-border/70 bg-card text-card-foreground p-4 h-auto flex flex-col items-stretch justify-start gap-3 shadow-sm select-none box-border',
|
||||
'hover:bg-muted/30',
|
||||
'hover:border-[rgba(var(--tool-color),0.45)]',
|
||||
'hover:shadow-[0_8px_24px_-8px_rgba(var(--tool-color),0.14)] dark:hover:shadow-[0_8px_30px_-10px_rgba(var(--tool-color),0.25)]',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{/* 上半部分：核心信息交互排版轴 */}
|
||||
<div className="flex items-center justify-between w-full relative min-w-0 min-h-[44px]">
|
||||
<div className="flex gap-3 items-center min-w-0 flex-1 pr-2">
|
||||
{/* 左侧圆形图标容器 */}
|
||||
<div
|
||||
className={cn(
|
||||
'flex items-center justify-center w-10 h-10 rounded-xl shrink-0',
|
||||
'bg-[rgba(var(--tool-color),0.08)] dark:bg-[rgba(var(--tool-color),0.12)]',
|
||||
'text-[rgb(var(--tool-color))]',
|
||||
)}
|
||||
>
|
||||
<IconComponent className="h-5 w-5 shrink-0" />
|
||||
</div>
|
||||
|
||||
{/* 中间文字描述区：利用 flex-1 min-w-0 防御文本过长发生恶性撑开 */}
|
||||
<div className="flex-1 min-w-0 flex flex-col">
|
||||
<h4 className="font-bold text-sm tracking-tight text-foreground leading-snug">
|
||||
{title}
|
||||
</h4>
|
||||
{description && (
|
||||
<p className="text-[11px] font-medium text-muted-foreground/90 mt-0.5 leading-normal w-full truncate">
|
||||
{description}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 右侧指示小箭头 */}
|
||||
<div className="text-muted-foreground/40 group-hover:text-[rgb(var(--tool-color))] p-1 shrink-0 group-hover:translate-x-0.5">
|
||||
<ChevronRight className="h-4 w-4" />
|
||||
</div>
|
||||
|
||||
{/* 覆盖整个上半部分的绝对定位隐形跳转层（A11y 无障碍标准合规） */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={onNavigate}
|
||||
aria-label={`进入 ${title}`}
|
||||
className="absolute inset-0 w-full h-full cursor-pointer bg-transparent border-none opacity-0 focus-visible:outline-none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 下半部分：未来的动态预览沙箱独立承载区 */}
|
||||
{snapshot != null && (
|
||||
<div className="mt-1 pt-3 border-t border-dashed border-border/80 w-full relative z-10 select-text">
|
||||
{snapshot}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
ToolCard.displayName = 'ToolCard';
|
||||
@@ -0,0 +1,41 @@
|
||||
import { useRouter } from '@/providers/RouterProvider';
|
||||
import ToolCard from '@/pages/Dashboard/ToolCard';
|
||||
import { getFeatureByKey } from '@/config/features';
|
||||
import type { PageType } from '@/types/storage';
|
||||
import { useMemo } from 'react';
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
export default function DashboardPage() {
|
||||
const { navigateTo, visiblePages, pageOrder } = useRouter();
|
||||
const { t } = useI18n(['features']);
|
||||
|
||||
const visibleSet = useMemo(() => new Set<string>(visiblePages), [visiblePages]);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
'grid grid-cols-1 sm:grid-cols-[repeat(auto-fill,minmax(290px,1fr))] auto-rows-auto gap-3.5 p-3.5 w-full h-auto',
|
||||
'select-none',
|
||||
)}
|
||||
>
|
||||
{pageOrder.map((key) => {
|
||||
if (!visibleSet.has(key)) return null;
|
||||
|
||||
const feature = getFeatureByKey(key);
|
||||
if (!feature?.themeColorKey || feature.icon == null) return null;
|
||||
|
||||
return (
|
||||
<ToolCard
|
||||
key={key}
|
||||
title={t(feature.labelKey)}
|
||||
description={t(feature.descriptionKey)}
|
||||
colorKey={feature.themeColorKey}
|
||||
icon={feature.icon}
|
||||
onNavigate={() => navigateTo(key as PageType)}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,177 @@
|
||||
import { useCallback, useMemo, useState } from 'react';
|
||||
import { Download, Trash2 } from 'lucide-react';
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
import CopyButton from '@/components/CopyButton';
|
||||
import SwitchButtonGroup from '@/components/SwitchButtonGroup';
|
||||
import { Button } from '@/components/ui/button'; // 💡 1. 全面回归规范：引入原生的 shadcn 原子 Button
|
||||
import { useStorageState } from '@/utils/useStorageState';
|
||||
import type { HtmlToMarkdownPreviewMode } from '@/types/storage';
|
||||
import { downloadMarkdownFile, htmlToMarkdown, SAMPLE_HTML } from '@/utils/htmlToMarkdown';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
const isValidPreviewMode = (val: unknown): val is HtmlToMarkdownPreviewMode =>
|
||||
typeof val === 'string' && ['split', 'preview', 'markdown'].includes(val);
|
||||
|
||||
export default function HtmlToMarkdownPage() {
|
||||
const { t } = useI18n('htmlToMarkdown');
|
||||
const [previewMode, setPreviewMode] = useStorageState(
|
||||
'htmlToMarkdown/previewMode',
|
||||
'split' as HtmlToMarkdownPreviewMode,
|
||||
isValidPreviewMode,
|
||||
);
|
||||
const [html, setHtml] = useState(SAMPLE_HTML);
|
||||
|
||||
const result = useMemo(() => htmlToMarkdown(html), [html]);
|
||||
const error = result.hasError ? (result.error ?? null) : null;
|
||||
|
||||
const handleModeChange = useCallback(
|
||||
(newMode: HtmlToMarkdownPreviewMode) => {
|
||||
setPreviewMode(newMode);
|
||||
},
|
||||
[setPreviewMode],
|
||||
);
|
||||
|
||||
const handleClear = useCallback(() => {
|
||||
setHtml('');
|
||||
}, []);
|
||||
|
||||
const handleDownload = useCallback(() => {
|
||||
if (result.markdown) {
|
||||
downloadMarkdownFile(result.markdown, 'converted.md');
|
||||
}
|
||||
}, [result.markdown]);
|
||||
|
||||
const showInput = previewMode !== 'preview';
|
||||
const showOutput = previewMode !== 'markdown';
|
||||
|
||||
return (
|
||||
/* 💡 统一间距尺寸：
|
||||
- 彻底清除多余的 container max-w-7xl 这种网页大边距，
|
||||
- 统一收拢为我们先前在 Dashboard 页、JSON 工具箱制定的 p-4 space-y-4 标准极客桌面规格。
|
||||
*/
|
||||
<div className="p-4 w-full flex flex-col space-y-4 select-none">
|
||||
<div className="flex flex-col gap-4">
|
||||
{/* 工具栏集成区 */}
|
||||
<div className="flex flex-col sm:flex-row gap-3 justify-between items-stretch sm:items-center bg-secondary/40 rounded-xl border border-border/60 px-1.5 py-1.5 sm:h-12">
|
||||
<SwitchButtonGroup
|
||||
value={previewMode}
|
||||
options={[
|
||||
{ value: 'split', label: t('splitMode') },
|
||||
{ value: 'preview', label: t('previewMode') },
|
||||
{ value: 'markdown', label: t('markdownMode') },
|
||||
]}
|
||||
onChange={handleModeChange}
|
||||
size="small"
|
||||
className="w-full sm:w-auto"
|
||||
/>
|
||||
|
||||
<div className="flex gap-2 shrink-0">
|
||||
{/* 2. 重塑下载按钮：接入受控 Button，追加 active 物理微缩放动效 */}
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={handleDownload}
|
||||
disabled={!result.markdown}
|
||||
className="h-8 rounded-md font-medium text-xs gap-1.5 shadow-sm"
|
||||
>
|
||||
<Download className="h-3.5 w-3.5" />
|
||||
{t('download')}
|
||||
</Button>
|
||||
|
||||
{/* 重塑清空按钮 */}
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={handleClear}
|
||||
className="h-8 rounded-md font-medium text-xs gap-1.5 shadow-sm text-destructive hover:text-destructive hover:bg-destructive/5 dark:hover:bg-destructive/10 border-input/60"
|
||||
>
|
||||
<Trash2 className="h-3.5 w-3.5" />
|
||||
{t('clear')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 错误提示：
|
||||
- 💡 核心修复点：将硬编码的 bg-red-50 实色，完美超进化为系统的全自适应透明色变体
|
||||
*/}
|
||||
{error && (
|
||||
<div className="p-3.5 bg-destructive/10 border border-destructive/20 rounded-xl text-destructive text-xs font-semibold tracking-wide">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 双翼/单栏联动面板展示区 */}
|
||||
<div
|
||||
className={cn(
|
||||
'grid gap-4 min-h-[460px] w-full',
|
||||
showInput && showOutput ? 'grid-cols-1 md:grid-cols-2' : 'grid-cols-1',
|
||||
)}
|
||||
>
|
||||
{/* HTML 输入端卡片面板 */}
|
||||
{showInput && (
|
||||
/* 3. 智能聚焦框联动（Focus Ring Clamping）：
|
||||
- 外层容器追加 focus-within 变量追踪大闸。
|
||||
- 只要用户用鼠标点击了内部的 textarea，外层整块精巧的圆角大边框会一帧内亮起 primary 系统的深色呼吸发光环，
|
||||
- 这种“全外包裹层框聚焦”的体验极大模仿了本地原生 IDE 的硬核专业体验！
|
||||
*/
|
||||
<div className="border border-border rounded-xl bg-card text-card-foreground shadow-sm overflow-hidden flex flex-col focus-within:ring-1 focus-within:ring-ring focus-within:border-ring">
|
||||
{/* 卡片头部：改用标准的灰色 bg-muted/50 */}
|
||||
<div className="flex h-9 items-center justify-between px-4 bg-muted/50 border-b border-border select-none">
|
||||
<span className="text-[10px] font-bold text-muted-foreground/90 uppercase tracking-wider">
|
||||
{t('inputLabel')}
|
||||
</span>
|
||||
<span className="text-[10px] font-mono text-muted-foreground/60 tabular-nums">
|
||||
{t('charCount', { count: html.length })}
|
||||
</span>
|
||||
</div>
|
||||
<textarea
|
||||
value={html}
|
||||
onChange={(e) => setHtml(e.target.value)}
|
||||
placeholder={t('inputPlaceholder')}
|
||||
className="flex-1 min-h-[380px] p-4 bg-transparent font-mono text-xs leading-relaxed resize-none focus:outline-none text-foreground/90 select-text"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Markdown 输出端卡片面板 */}
|
||||
{showOutput && (
|
||||
<div className="border border-border rounded-xl bg-card text-card-foreground shadow-sm overflow-hidden flex flex-col">
|
||||
<div className="flex h-9 items-center justify-between px-4 bg-muted/50 border-b border-border select-none">
|
||||
<span className="text-[10px] font-bold text-muted-foreground/90 uppercase tracking-wider">
|
||||
{(previewMode as string) === 'markdown'
|
||||
? t('markdownOutputLabel')
|
||||
: t('previewLabel')}
|
||||
</span>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-[10px] font-mono text-muted-foreground/60 tabular-nums">
|
||||
{t('charCount', { count: result.markdownLength })}
|
||||
</span>
|
||||
<CopyButton
|
||||
text={result.markdown}
|
||||
className="h-6 w-6 rounded-md border text-muted-foreground"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{(previewMode as string) === 'markdown' ? (
|
||||
<textarea
|
||||
value={result.markdown}
|
||||
readOnly
|
||||
className="flex-1 min-h-[380px] p-4 font-mono text-xs leading-relaxed resize-none focus:outline-none bg-muted/30 dark:bg-muted/10 text-foreground/80 select-text"
|
||||
/>
|
||||
) : (
|
||||
<div className="flex-1 p-4 min-h-[380px] overflow-auto bg-transparent font-mono text-xs leading-relaxed whitespace-pre-wrap break-all text-foreground/90 select-text">
|
||||
{result.markdown || (
|
||||
<span className="text-muted-foreground/70 italic text-[11px] font-sans">
|
||||
{t('emptyHint')}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,93 @@
|
||||
import React from 'react';
|
||||
import { ChevronLeft, ChevronRight } from 'lucide-react';
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
import { cn } from '@/lib/utils'; // 1. 引入标准的 shadcn 工具函数
|
||||
|
||||
export interface DiffNavigatorProps extends React.HTMLAttributes<HTMLDivElement> {
|
||||
total: number;
|
||||
/** 0-based index */
|
||||
currentIndex: number;
|
||||
onPrev: () => void;
|
||||
onNext: () => void;
|
||||
}
|
||||
|
||||
export default function DiffNavigator({
|
||||
total,
|
||||
currentIndex,
|
||||
onPrev,
|
||||
onNext,
|
||||
className,
|
||||
...props
|
||||
}: DiffNavigatorProps) {
|
||||
const { t } = useI18n('jsonDiff');
|
||||
|
||||
// 计算当前的边界禁用状态守卫
|
||||
const isFirst = currentIndex <= 0;
|
||||
const isLast = currentIndex >= total - 1;
|
||||
|
||||
// 2. 空状态面板：对齐 shadcn 规范的中性低调卡片
|
||||
if (total === 0) {
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
'flex items-center justify-center gap-3 px-4 py-2 rounded-lg border border-border bg-muted/30 select-none',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<span className="text-xs font-semibold text-muted-foreground/90">
|
||||
{t('jsonDiff:noDiffs')}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
// 3. 完美适配暗黑模式：
|
||||
// 废除 bg-primary/10，采用标准的低阻尼中性色 bg-secondary/60 配合 border-border/80，
|
||||
// 在任何主题皮肤下都能呈现出高级的暗钛金控制栏质感。
|
||||
'inline-flex items-center justify-center gap-3 px-3 h-9 rounded-md border border-border/80 bg-secondary/60 shadow-sm',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{/* 上一处差异按钮 */}
|
||||
<button
|
||||
type="button"
|
||||
disabled={isFirst}
|
||||
aria-label={t('jsonDiff:previousDiff')}
|
||||
onClick={onPrev}
|
||||
className={cn(
|
||||
'p-1 rounded-md text-muted-foreground hover:bg-accent hover:text-foreground',
|
||||
'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring',
|
||||
'disabled:pointer-events-none disabled:opacity-30', // 4. 边界拦截：触顶时优雅淡化并锁死点击
|
||||
)}
|
||||
>
|
||||
<ChevronLeft className="h-4 w-4" />
|
||||
</button>
|
||||
|
||||
{/* 计数看板：强制等宽防止数字长短不一时产生宽度挤压跳动 */}
|
||||
<span className="text-xs font-bold font-mono min-w-[54px] text-center text-foreground/90 tabular-nums select-none">
|
||||
{currentIndex + 1} <span className="text-muted-foreground/60 font-sans mx-0.5">/</span>{' '}
|
||||
{total}
|
||||
</span>
|
||||
|
||||
{/* 下一处差异按钮 */}
|
||||
<button
|
||||
type="button"
|
||||
disabled={isLast}
|
||||
aria-label={t('jsonDiff:nextDiff')}
|
||||
onClick={onNext}
|
||||
className={cn(
|
||||
'p-1 rounded-md text-muted-foreground hover:bg-accent hover:text-foreground',
|
||||
'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring',
|
||||
'disabled:pointer-events-none disabled:opacity-30', // 4. 边界拦截：触底时优雅淡化并锁死点击
|
||||
)}
|
||||
>
|
||||
<ChevronRight className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,244 @@
|
||||
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';
|
||||
|
||||
// 💡 顶层 Interface 继承原生 HTML 容器属性，扩展灵活性
|
||||
export interface DiffResultProps extends React.HTMLAttributes<HTMLDivElement> {
|
||||
result: DiffResultType;
|
||||
viewMode: ViewMode;
|
||||
activePath?: string;
|
||||
}
|
||||
|
||||
export default function DiffResult({
|
||||
result,
|
||||
viewMode,
|
||||
activePath,
|
||||
className,
|
||||
...props
|
||||
}: DiffResultProps) {
|
||||
const { t } = useI18n('jsonDiff');
|
||||
|
||||
if (viewMode === 'sideBySide') {
|
||||
return (
|
||||
<div
|
||||
className={cn('flex flex-col md:flex-row gap-4 items-stretch w-full', className)}
|
||||
{...props}
|
||||
>
|
||||
<div className="flex-1 min-w-0">
|
||||
<SectionLabel text={t('jsonDiff:leftLabel')} />
|
||||
<JsonTree node={result.root} side="left" activePath={activePath} />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<SectionLabel text={t('jsonDiff:rightLabel')} />
|
||||
<JsonTree node={result.root} side="right" activePath={activePath} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
/* 1. 单栏拍平视图容器：
|
||||
- 对齐 shadcn 规范，使用 bg-card、border-border 隔离。
|
||||
- 注入 tabular-nums 配合 font-mono，消灭任何行高和字符抖动。
|
||||
*/
|
||||
<div
|
||||
className={cn(
|
||||
'rounded-xl border border-border bg-card font-mono text-xs shadow-sm overflow-x-auto min-h-[200px] max-h-[520px] overflow-y-auto p-1.5',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<UnifiedView node={result.root} depth={0} activePath={activePath} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const SectionLabel = ({ text }: { text: string }) => (
|
||||
<span className="block mb-2 text-[10px] font-bold tracking-wider text-muted-foreground/80 uppercase px-0.5 select-none">
|
||||
{text}
|
||||
</span>
|
||||
);
|
||||
|
||||
const formatPrimitive = (v: unknown): string => {
|
||||
if (v === undefined) return 'undefined';
|
||||
if (v === null) return 'null';
|
||||
if (typeof v === 'string') return JSON.stringify(v);
|
||||
if (typeof v === 'number' || typeof v === 'boolean') return String(v);
|
||||
return JSON.stringify(v);
|
||||
};
|
||||
|
||||
const isContainerType = (v: unknown): boolean =>
|
||||
(typeof v === 'object' && v !== null) || Array.isArray(v);
|
||||
|
||||
const prefixForType = (type: DiffType): string => {
|
||||
if (type === 'added') return '+';
|
||||
if (type === 'removed') return '-';
|
||||
if (type === 'modified') return '~';
|
||||
return ' ';
|
||||
};
|
||||
|
||||
// 2. 状态色彩超进化：
|
||||
// 拒绝硬编码实色系，全部换用高度安全的语义色变体与暗黑模式自适应。
|
||||
const typeThemeMap = {
|
||||
added: {
|
||||
text: 'text-emerald-600 dark:text-emerald-400',
|
||||
bg: 'bg-emerald-500/5 dark:bg-emerald-500/10',
|
||||
},
|
||||
removed: {
|
||||
text: 'text-destructive',
|
||||
bg: 'bg-destructive/5 dark:bg-destructive/10',
|
||||
},
|
||||
modified: {
|
||||
text: 'text-amber-600 dark:text-amber-400',
|
||||
bg: 'bg-amber-500/5 dark:bg-amber-500/10',
|
||||
},
|
||||
unchanged: {
|
||||
text: 'text-foreground/80',
|
||||
bg: 'bg-transparent',
|
||||
},
|
||||
};
|
||||
|
||||
interface UnifiedViewProps {
|
||||
node: DiffNode;
|
||||
depth: number;
|
||||
activePath?: string;
|
||||
}
|
||||
|
||||
const UnifiedView = ({ node, depth, activePath }: UnifiedViewProps) => {
|
||||
const isRoot = depth === 0;
|
||||
const hasChildren = Array.isArray(node.children) && node.children.length > 0;
|
||||
const isContainer =
|
||||
hasChildren || isContainerType(node.oldValue) || isContainerType(node.newValue);
|
||||
const keyLabel = isRoot ? '' : `${node.key}: `;
|
||||
|
||||
if (!isContainer) {
|
||||
if (node.type === 'modified') {
|
||||
return (
|
||||
<>
|
||||
<UnifiedRow
|
||||
depth={depth}
|
||||
type="removed"
|
||||
text={`${keyLabel}${formatPrimitive(node.oldValue)}`}
|
||||
active={activePath === node.path}
|
||||
/>
|
||||
<UnifiedRow
|
||||
depth={depth}
|
||||
type="added"
|
||||
text={`${keyLabel}${formatPrimitive(node.newValue)}`}
|
||||
active={activePath === node.path}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
const value = node.type === 'added' ? node.newValue : node.oldValue;
|
||||
return (
|
||||
<UnifiedRow
|
||||
depth={depth}
|
||||
type={node.type}
|
||||
text={`${keyLabel}${formatPrimitive(value)}`}
|
||||
active={activePath === node.path}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
// 容器节点整块渲染处理
|
||||
if (node.type === 'added') {
|
||||
return (
|
||||
<UnifiedRow
|
||||
depth={depth}
|
||||
type="added"
|
||||
text={`${keyLabel}${stringifyMultiline(node.newValue, depth)}`}
|
||||
active={activePath === node.path}
|
||||
multiline
|
||||
/>
|
||||
);
|
||||
}
|
||||
if (node.type === 'removed') {
|
||||
return (
|
||||
<UnifiedRow
|
||||
depth={depth}
|
||||
type="removed"
|
||||
text={`${keyLabel}${stringifyMultiline(node.oldValue, depth)}`}
|
||||
active={activePath === node.path}
|
||||
multiline
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
const isArr = Array.isArray(node.oldValue) || Array.isArray(node.newValue);
|
||||
const open = isArr ? '[' : '{';
|
||||
const close = isArr ? ']' : '}';
|
||||
|
||||
return (
|
||||
<>
|
||||
<UnifiedRow depth={depth} type="unchanged" text={`${keyLabel}${open}`} />
|
||||
{node.children?.map((child) => (
|
||||
<UnifiedView key={child.path} node={child} depth={depth + 1} activePath={activePath} />
|
||||
))}
|
||||
<UnifiedRow depth={depth} type="unchanged" text={close} />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
interface UnifiedRowProps {
|
||||
depth: number;
|
||||
type: DiffType;
|
||||
text: string;
|
||||
active?: boolean;
|
||||
multiline?: boolean;
|
||||
}
|
||||
|
||||
const UnifiedRow = ({ depth, type, text, active, multiline }: UnifiedRowProps) => {
|
||||
// 3. 高精度提取状态样式映射
|
||||
const currentTheme = typeThemeMap[type] || typeThemeMap.unchanged;
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
'flex items-start w-full font-mono py-0.5 select-text group',
|
||||
currentTheme.bg,
|
||||
currentTheme.text,
|
||||
// 4. 高亮定位条：不再使用生硬的蓝圆环，改为现代编辑器的“侧边左高亮带”设计，质感直接拉满
|
||||
active &&
|
||||
'bg-primary/10 relative before:absolute before:left-0 before:top-0 before:bottom-0 before:w-1 before:bg-blue-500',
|
||||
)}
|
||||
style={{
|
||||
// 维持高精度的 Padding 基线缩进
|
||||
paddingLeft: `${Math.max(0.5, depth * 1.25)}rem`,
|
||||
paddingRight: '0.5rem',
|
||||
}}
|
||||
>
|
||||
{/* 5. 前缀标识：等宽锁定，强行占据 w-5 并让符号居中对齐，达成 VSCode 般的整洁排版 */}
|
||||
<span className="font-bold w-5 shrink-0 text-center select-none opacity-70 tabular-nums">
|
||||
{prefixForType(type)}
|
||||
</span>
|
||||
|
||||
<span
|
||||
className={cn(
|
||||
'flex-1 break-all tracking-tight leading-normal',
|
||||
multiline ? 'whitespace-pre' : 'whitespace-nowrap',
|
||||
)}
|
||||
>
|
||||
{text}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const stringifyMultiline = (v: unknown, depth: number): string => {
|
||||
try {
|
||||
const json = JSON.stringify(v, null, 2);
|
||||
if (!json) return formatPrimitive(v);
|
||||
const indent = ' '.repeat(depth);
|
||||
return json
|
||||
.split('\n')
|
||||
.map((line, idx) => (idx === 0 ? line : indent + line))
|
||||
.join('\n');
|
||||
} catch {
|
||||
return formatPrimitive(v);
|
||||
}
|
||||
};
|
||||
|
||||
// 💡 彻底移除了文件底部引发 TS2484 冲突的 export type { DiffResultProps } 声明
|
||||
@@ -0,0 +1,142 @@
|
||||
import React, { useEffect, useMemo, useState } from 'react';
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
import { formatByteSize } from '@/utils/textStatistics';
|
||||
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;
|
||||
|
||||
// 1. 高阶性能调优：将文本变化收拢进行 250ms 极速防抖落盘，避免每一次敲击键盘都触发底层的复杂序列化算法
|
||||
useEffect(() => {
|
||||
const handle = setTimeout(() => {
|
||||
setDebouncedInput(input);
|
||||
}, 250);
|
||||
return () => clearTimeout(handle);
|
||||
}, [input]);
|
||||
|
||||
// 💡 2. 贯彻方案 A（衍生变量超进化）：
|
||||
// 彻底删掉 error 状态和对应的受控 useEffect 节点。
|
||||
// 语法错误由防抖文本在内存中同步推导，彻底斩断二次级联渲染链条，ESLint 警告自愈！
|
||||
const error = useMemo(() => {
|
||||
return validateJson(debouncedInput);
|
||||
}, [debouncedInput]);
|
||||
|
||||
// 3. 核心魔法：纯净的即时流式转换转换管线 (Live Compilation Pipeline)
|
||||
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('')}
|
||||
/>
|
||||
|
||||
{/* 4. 结果展示或状态引导卡片区 */}
|
||||
{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>
|
||||
|
||||
{/* 字节比对注入 tabular-nums font-mono，防止容量大小变动时字符横向抽搐 */}
|
||||
<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">
|
||||
{formatByteSize(result.originalBytes)}
|
||||
</span>
|
||||
</span>
|
||||
<span className="text-border/60">|</span>
|
||||
<span>
|
||||
{t('jsonFormat:formattedSize')}:{' '}
|
||||
<span className="font-semibold text-foreground/80">
|
||||
{formatByteSize(result.outputBytes)}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<CopyButton
|
||||
text={result.output}
|
||||
className="h-6 w-6 rounded-md border text-muted-foreground"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 转换出的数据流承载区：
|
||||
💡 修复点：移除了互相冲突打架的 select-all 类名，仅保留纯净、支持自由划线选中的 select-text 样式
|
||||
*/}
|
||||
<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>
|
||||
) : (
|
||||
/* 5. 空状态提示容器：完美的中性虚线引导，不喧宾夺主 */
|
||||
<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>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,44 @@
|
||||
import React from 'react';
|
||||
import TextInputArea from '@/components/TextInputArea';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
// 💡 核心修复：使用 Omit<..., 'onChange'> 强行挖掉原生的 onChange 签名
|
||||
// 这样我们自定义的 (value: string) => void 就能独占鳌头，彻底消灭 TS2430 接口冲突！
|
||||
export interface JsonDiffInputProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
|
||||
label: string;
|
||||
placeholder: string;
|
||||
value: string;
|
||||
onChange: (value: string) => void;
|
||||
error?: string | null;
|
||||
minRows?: number;
|
||||
}
|
||||
|
||||
export default function JsonDiffInput({
|
||||
label,
|
||||
placeholder,
|
||||
value,
|
||||
onChange,
|
||||
error,
|
||||
minRows = 10,
|
||||
className,
|
||||
...props
|
||||
}: JsonDiffInputProps) {
|
||||
return (
|
||||
<div className={cn('flex-1 min-w-0 flex flex-col', className)} {...props}>
|
||||
<span className="block mb-2 text-[10px] font-bold tracking-wide text-muted-foreground/80 uppercase select-none px-0.5">
|
||||
{label}
|
||||
</span>
|
||||
|
||||
<TextInputArea
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
placeholder={placeholder}
|
||||
minRows={minRows}
|
||||
maxRows={16}
|
||||
externalError={error ?? undefined}
|
||||
showClear={true}
|
||||
allowCopy={true}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,169 @@
|
||||
import { useEffect, useMemo, useState } from 'react';
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
import {
|
||||
formatJson,
|
||||
type JsonFormatOptions,
|
||||
type JsonFormatResult,
|
||||
validateJson,
|
||||
} from '@/utils/jsonFormatter';
|
||||
import { formatByteSize } from '@/utils/textStatistics';
|
||||
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);
|
||||
|
||||
// 1. 高频打字防抖落盘：防止大体积 JSON 在高频输入时发生卡顿
|
||||
useEffect(() => {
|
||||
const handle = setTimeout(() => {
|
||||
setDebouncedInput(input);
|
||||
}, 250);
|
||||
return () => clearTimeout(handle);
|
||||
}, [input]);
|
||||
|
||||
// 💡 2. 贯彻方案 A（衍生变量超进化）：
|
||||
// 彻底删除原有的 setError 状态和相关的 useEffect。
|
||||
// 语法错误由防抖文本在内存中同步推导，彻底斩断二次级联渲染链条，ESLint 警告瞬间消亡！
|
||||
const error = useMemo(() => {
|
||||
return validateJson(debouncedInput);
|
||||
}, [debouncedInput]);
|
||||
|
||||
// 3. 实时流式格式化管线
|
||||
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">
|
||||
{formatByteSize(result.originalBytes)}
|
||||
</span>
|
||||
</span>
|
||||
<span className="text-border/60">|</span>
|
||||
<span>
|
||||
{t('jsonFormat:formattedSize')}:{' '}
|
||||
<span className="font-semibold text-foreground/80">
|
||||
{formatByteSize(result.formattedBytes)}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<CopyButton
|
||||
text={result.formatted}
|
||||
className="h-6 w-6 rounded-md border text-muted-foreground"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 核心格式化数据面板：
|
||||
💡 修复点：移除了互相打架的 select-all 类名，仅保留纯正的代码高亮可选样式 select-text
|
||||
*/}
|
||||
<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,268 @@
|
||||
import React, { useEffect, useMemo, useRef, useState } from 'react';
|
||||
import { ChevronDown, ChevronRight } from 'lucide-react'; // 用正统的矢量箭头平替原生的字符 '▾' '▸'
|
||||
import type { DiffNode, DiffType } from './types';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
export type TreeSide = 'left' | 'right';
|
||||
|
||||
export interface JsonTreeProps extends React.HTMLAttributes<HTMLDivElement> {
|
||||
node: DiffNode;
|
||||
side: TreeSide;
|
||||
defaultExpandDepth?: number;
|
||||
activePath?: string;
|
||||
}
|
||||
|
||||
interface NodeRowProps {
|
||||
node: DiffNode;
|
||||
side: TreeSide;
|
||||
depth: number;
|
||||
defaultExpandDepth: number;
|
||||
activePath?: string;
|
||||
isLastChild: boolean;
|
||||
}
|
||||
|
||||
const formatPrimitive = (v: unknown): string => {
|
||||
if (v === null) return 'null';
|
||||
if (typeof v === 'string') return JSON.stringify(v);
|
||||
if (typeof v === 'number' || typeof v === 'boolean') return String(v);
|
||||
return JSON.stringify(v);
|
||||
};
|
||||
|
||||
const shouldRenderOnSide = (type: DiffType, side: TreeSide): boolean => {
|
||||
if (type === 'added') return side === 'right';
|
||||
if (type === 'removed') return side === 'left';
|
||||
return true;
|
||||
};
|
||||
|
||||
const getValueForSide = (node: DiffNode, side: TreeSide): unknown => {
|
||||
return side === 'left' ? node.oldValue : node.newValue;
|
||||
};
|
||||
|
||||
// 1. 核心状态色彩映射调色盘：完美自适应双色模式
|
||||
const typeThemeMap = {
|
||||
added: {
|
||||
text: 'text-emerald-600 dark:text-emerald-400',
|
||||
bg: 'bg-emerald-500/5 dark:bg-emerald-500/10 hover:bg-emerald-500/10 dark:hover:bg-emerald-500/15',
|
||||
},
|
||||
removed: {
|
||||
text: 'text-destructive',
|
||||
bg: 'bg-destructive/5 dark:bg-destructive/10 hover:bg-destructive/10 dark:hover:bg-destructive/15',
|
||||
},
|
||||
modified: {
|
||||
text: 'text-amber-600 dark:text-amber-400',
|
||||
bg: 'bg-amber-500/5 dark:bg-amber-500/10 hover:bg-amber-500/10 dark:hover:bg-amber-500/15',
|
||||
},
|
||||
unchanged: {
|
||||
text: 'text-foreground/80',
|
||||
bg: 'hover:bg-muted/60',
|
||||
},
|
||||
};
|
||||
|
||||
const isContainerValue = (v: unknown): boolean => {
|
||||
return (typeof v === 'object' && v !== null) || Array.isArray(v);
|
||||
};
|
||||
|
||||
/**
|
||||
* 💡 性能调优大闸：将 NodeRow 抽离为顶层独立组件并裹上 React.memo。
|
||||
* 配合精准的 Props Diff，使得某一行的展开闭合绝对不会连累到其他平级和上级节点。
|
||||
*/
|
||||
const NodeRow = React.memo(
|
||||
({ node, side, depth, defaultExpandDepth, activePath, isLastChild }: NodeRowProps) => {
|
||||
const [override, setOverride] = useState<'auto' | 'open' | 'closed'>('auto');
|
||||
const rowRef = useRef<HTMLDivElement | null>(null);
|
||||
|
||||
const onActivePath = useMemo(() => {
|
||||
return Boolean(
|
||||
activePath &&
|
||||
(activePath === node.path ||
|
||||
activePath.startsWith(`${node.path}.`) ||
|
||||
activePath.startsWith(`${node.path}[`)),
|
||||
);
|
||||
}, [activePath, node.path]);
|
||||
|
||||
const expanded =
|
||||
override === 'open'
|
||||
? true
|
||||
: override === 'closed'
|
||||
? 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
|
||||
className="text-transparent select-none opacity-0 h-[22px] leading-relaxed"
|
||||
style={{ paddingLeft: `${depth * 1.15}rem` }}
|
||||
>
|
||||
·
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const value = getValueForSide(node, side);
|
||||
const isContainer = isContainerValue(value) && Array.isArray(node.children);
|
||||
const isArray = Array.isArray(value);
|
||||
const theme = typeThemeMap[node.type] || typeThemeMap.unchanged;
|
||||
const isActive = activePath === node.path;
|
||||
const isRoot = depth === 0;
|
||||
|
||||
// 缩进样式封装：
|
||||
// 💡 视觉魔法：通过在左侧追加 before 细线，在每一层级下自动垂下一条优雅的 IDE 级“缩进指引线”
|
||||
const indentStyle = {
|
||||
paddingLeft: `${Math.max(0.25, depth * 1.15)}rem`,
|
||||
};
|
||||
|
||||
const indentClass = cn(
|
||||
'relative',
|
||||
depth > 0 &&
|
||||
'before:absolute before:left-[4px] before:top-0 before:bottom-0 before:w-[1px] before:bg-border/40',
|
||||
);
|
||||
|
||||
if (isContainer && node.children) {
|
||||
const open = isArray ? '[' : '{';
|
||||
const close = isArray ? ']' : '}';
|
||||
|
||||
return (
|
||||
<div ref={rowRef} className="w-full flex flex-col">
|
||||
{/* 大容器开端行 */}
|
||||
<div
|
||||
onClick={() => setOverride(expanded ? 'closed' : 'open')}
|
||||
className={cn(
|
||||
'group flex items-center gap-1 py-0.5 pr-2 text-xs font-mono select-none cursor-pointer rounded-sm w-full h-[22px] leading-relaxed',
|
||||
theme.bg,
|
||||
isActive &&
|
||||
'bg-primary/10 relative before:absolute before:left-0 before:top-0 before:bottom-0 before:w-0.5 before:bg-blue-500 rounded-none ring-0',
|
||||
)}
|
||||
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" />
|
||||
) : (
|
||||
<ChevronRight className="h-3 w-3" />
|
||||
)}
|
||||
</span>
|
||||
|
||||
{!isRoot && (
|
||||
<span className="text-foreground/90 font-bold tracking-tight">{node.key}:</span>
|
||||
)}
|
||||
|
||||
<span className="text-muted-foreground/80 font-semibold">{open}</span>
|
||||
|
||||
{!expanded && (
|
||||
<span className="text-[10px] px-1.5 py-0.2 rounded bg-muted/80 text-muted-foreground font-sans font-medium mx-1 select-none">
|
||||
{summarize(value)}
|
||||
</span>
|
||||
)}
|
||||
|
||||
{!expanded && (
|
||||
<span className="text-muted-foreground/80 font-semibold">
|
||||
{close}
|
||||
{isLastChild ? '' : ','}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 容器子节点递归区 */}
|
||||
{expanded && (
|
||||
<div className={indentClass}>
|
||||
{node.children.map((child, idx) => (
|
||||
<NodeRow
|
||||
key={child.path}
|
||||
node={child}
|
||||
side={side}
|
||||
depth={depth + 1}
|
||||
defaultExpandDepth={defaultExpandDepth}
|
||||
activePath={activePath}
|
||||
isLastChild={idx === node.children!.length - 1}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 大容器收尾行 */}
|
||||
{expanded && (
|
||||
<div
|
||||
className="text-muted-foreground/80 font-mono text-xs py-0.5 h-[22px] leading-relaxed"
|
||||
style={{ paddingLeft: `${depth * 1.15 + 0.88}rem` }}
|
||||
>
|
||||
{close}
|
||||
{isLastChild ? '' : ','}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// 叶子数据行分支
|
||||
return (
|
||||
<div
|
||||
ref={rowRef}
|
||||
className={cn(
|
||||
'flex items-center gap-1 py-0.5 pr-2 font-mono text-xs w-full h-[22px] leading-relaxed rounded-sm',
|
||||
theme.bg,
|
||||
isActive &&
|
||||
'bg-primary/10 relative before:absolute before:left-0 before:top-0 before:bottom-0 before:w-0.5 before:bg-blue-500 rounded-none ring-0',
|
||||
)}
|
||||
style={indentStyle}
|
||||
>
|
||||
<span className="w-3.5 shrink-0" /> {/* 与上方的折叠键轴线严格对齐 */}
|
||||
{!isRoot && (
|
||||
<span className="text-foreground/90 font-bold tracking-tight">{node.key}:</span>
|
||||
)}
|
||||
<span className={cn('font-medium tracking-tight truncate flex-1', theme.text)}>
|
||||
{formatPrimitive(value)}
|
||||
<span className="text-foreground/60 font-sans">{isLastChild ? '' : ','}</span>
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
NodeRow.displayName = 'NodeRow';
|
||||
|
||||
export default function JsonTree({
|
||||
node,
|
||||
side,
|
||||
defaultExpandDepth = 2,
|
||||
activePath,
|
||||
className,
|
||||
...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',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<NodeRow
|
||||
node={node}
|
||||
side={side}
|
||||
depth={0}
|
||||
defaultExpandDepth={defaultExpandDepth}
|
||||
activePath={activePath}
|
||||
isLastChild
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const summarize = (v: unknown): string => {
|
||||
if (Array.isArray(v)) return `${v.length} ${v.length === 1 ? 'item' : 'items'}`;
|
||||
if (v && typeof v === 'object') {
|
||||
const n = Object.keys(v).length;
|
||||
return `${n} ${n === 1 ? 'key' : 'keys'}`;
|
||||
}
|
||||
return '';
|
||||
};
|
||||
@@ -0,0 +1,191 @@
|
||||
import type { DiffNode, DiffResult, DiffType } from './types';
|
||||
|
||||
const ROOT_PATH = '$';
|
||||
const SENTINEL = Symbol('missing');
|
||||
|
||||
type MaybeMissing = unknown | typeof SENTINEL;
|
||||
|
||||
const isObject = (v: unknown): v is Record<string, unknown> =>
|
||||
typeof v === 'object' && v !== null && !Array.isArray(v);
|
||||
|
||||
const isArray = (v: unknown): v is unknown[] => Array.isArray(v);
|
||||
|
||||
/**
|
||||
* 健壮的 JSONPath 生成器：支持针对包含点号、空格或特殊字符的键名进行括号转义拦截
|
||||
*/
|
||||
const buildPath = (parent: string, key: string, isArrayChild: boolean): string => {
|
||||
if (isArrayChild) {
|
||||
return `${parent}[${key}]`;
|
||||
}
|
||||
const needsEscaping = key.includes('.') || key.includes('[') || key.includes(' ');
|
||||
const formattedKey = needsEscaping ? `["${key}"]` : `.${key}`;
|
||||
|
||||
return parent === ROOT_PATH ? `${ROOT_PATH}${formattedKey}` : `${parent}${formattedKey}`;
|
||||
};
|
||||
|
||||
const primitiveEqual = (a: unknown, b: unknown): boolean => {
|
||||
if (typeof a === 'number' && typeof b === 'number') {
|
||||
return Object.is(a, b);
|
||||
}
|
||||
return a === b;
|
||||
};
|
||||
|
||||
const diffNode = (
|
||||
left: MaybeMissing,
|
||||
right: MaybeMissing,
|
||||
key: string,
|
||||
path: string,
|
||||
diffPaths: string[],
|
||||
): DiffNode => {
|
||||
// 分支 1：节点增加行为拦截 (叶子节点状态)
|
||||
if (left === SENTINEL && right !== SENTINEL) {
|
||||
diffPaths.push(path);
|
||||
return {
|
||||
key,
|
||||
type: 'added',
|
||||
oldValue: undefined, // 💡 补齐：对齐移除 ? 后的类型规范
|
||||
newValue: right,
|
||||
path,
|
||||
isLeaf: !isObject(right) && !isArray(right),
|
||||
hasDiffInChildren: false, // 自身即是新增，子树无需向下检索
|
||||
};
|
||||
}
|
||||
|
||||
// 分支 2：节点删除行为拦截 (叶子节点状态)
|
||||
if (right === SENTINEL && left !== SENTINEL) {
|
||||
diffPaths.push(path);
|
||||
return {
|
||||
key,
|
||||
type: 'removed',
|
||||
oldValue: left,
|
||||
newValue: undefined, // 💡 补齐：对齐移除 ? 后的类型规范
|
||||
path,
|
||||
isLeaf: !isObject(left) && !isArray(left),
|
||||
hasDiffInChildren: false, // 自身即是删除，子树无需向下检索
|
||||
};
|
||||
}
|
||||
|
||||
const leftObj = isObject(left);
|
||||
const rightObj = isObject(right);
|
||||
const leftArr = isArray(left);
|
||||
const rightArr = isArray(right);
|
||||
|
||||
// 分支 3：双对象深层递归 (容器状态)
|
||||
if (leftObj && rightObj) {
|
||||
const keySet = new Set<string>();
|
||||
const leftKeys = Object.keys(left);
|
||||
const rightKeys = Object.keys(right);
|
||||
|
||||
for (let i = 0; i < leftKeys.length; i++) keySet.add(leftKeys[i]);
|
||||
for (let i = 0; i < rightKeys.length; i++) keySet.add(rightKeys[i]);
|
||||
|
||||
const children: DiffNode[] = [];
|
||||
keySet.forEach((k) => {
|
||||
const childPath = buildPath(path, k, false);
|
||||
const l: MaybeMissing = k in left ? left[k] : SENTINEL;
|
||||
const r: MaybeMissing = k in right ? right[k] : SENTINEL;
|
||||
children.push(diffNode(l, r, k, childPath, diffPaths));
|
||||
});
|
||||
|
||||
// 💡 核心改良：判定子节点中是否存在任何变动
|
||||
const hasDiffInChildren = children.some((c) => c.type !== 'unchanged' || c.hasDiffInChildren);
|
||||
|
||||
return {
|
||||
key,
|
||||
type: hasDiffInChildren ? 'modified' : 'unchanged',
|
||||
oldValue: left,
|
||||
newValue: right,
|
||||
children,
|
||||
path,
|
||||
isLeaf: false,
|
||||
hasDiffInChildren, // 完美注入预计算衍生状态
|
||||
};
|
||||
}
|
||||
|
||||
// 分支 4：双数组深层按序递归 (容器状态)
|
||||
if (leftArr && rightArr) {
|
||||
const len = Math.max(left.length, right.length);
|
||||
const children: DiffNode[] = new Array(len);
|
||||
|
||||
for (let i = 0; i < len; i++) {
|
||||
const k = String(i);
|
||||
const childPath = buildPath(path, k, true);
|
||||
const l: MaybeMissing = i < left.length ? left[i] : SENTINEL;
|
||||
const r: MaybeMissing = i < right.length ? right[i] : SENTINEL;
|
||||
children[i] = diffNode(l, r, k, childPath, diffPaths);
|
||||
}
|
||||
|
||||
// 💡 核心改良：判定子项中是否存在任何变动
|
||||
const hasDiffInChildren = children.some((c) => c.type !== 'unchanged' || c.hasDiffInChildren);
|
||||
|
||||
return {
|
||||
key,
|
||||
type: hasDiffInChildren ? 'modified' : 'unchanged',
|
||||
oldValue: left,
|
||||
newValue: right,
|
||||
children,
|
||||
path,
|
||||
isLeaf: false,
|
||||
hasDiffInChildren, // 完美注入预计算衍生状态
|
||||
};
|
||||
}
|
||||
|
||||
// 分支 5：绝对类型安全防护大闸 (双基本基元比对)
|
||||
const leftIsContainer = leftObj || leftArr;
|
||||
const rightIsContainer = rightObj || rightArr;
|
||||
|
||||
if (!leftIsContainer && !rightIsContainer) {
|
||||
if (left === null || right === null) {
|
||||
if (left === null && right === null) {
|
||||
return {
|
||||
key,
|
||||
type: 'unchanged',
|
||||
oldValue: left,
|
||||
newValue: right,
|
||||
path,
|
||||
isLeaf: true,
|
||||
hasDiffInChildren: false,
|
||||
};
|
||||
}
|
||||
} else if (typeof left === typeof right) {
|
||||
if (primitiveEqual(left, right)) {
|
||||
return {
|
||||
key,
|
||||
type: 'unchanged',
|
||||
oldValue: left,
|
||||
newValue: right,
|
||||
path,
|
||||
isLeaf: true,
|
||||
hasDiffInChildren: false,
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 类型完全发生突变错配，或者基本数值不相等
|
||||
diffPaths.push(path);
|
||||
return {
|
||||
key,
|
||||
type: 'modified',
|
||||
oldValue: left,
|
||||
newValue: right,
|
||||
path,
|
||||
isLeaf: !leftIsContainer && !rightIsContainer,
|
||||
hasDiffInChildren: false, // 变动在自身，后代无子树变动
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* 比较两个 JSON 值的差异，返回安全的差异树及高精度差异路径列表。
|
||||
*/
|
||||
export const diffJson = (left: unknown, right: unknown): DiffResult => {
|
||||
const diffPaths: string[] = [];
|
||||
const root = diffNode(left, right, '', ROOT_PATH, diffPaths);
|
||||
return {
|
||||
root,
|
||||
diffPaths,
|
||||
diffCount: diffPaths.length,
|
||||
};
|
||||
};
|
||||
|
||||
export type { DiffNode, DiffResult, DiffType };
|
||||
@@ -0,0 +1,201 @@
|
||||
import { useCallback, useEffect, useMemo, useState } from 'react';
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
import JsonDiffInput from './JsonDiffInput';
|
||||
import DiffResult from './DiffResult';
|
||||
import DiffNavigator from './DiffNavigator';
|
||||
import JsonFormatSection from './JsonFormatSection';
|
||||
import type { ConvertFunction } from './JsonConvertSection';
|
||||
import JsonConvertSection from './JsonConvertSection';
|
||||
import { diffJson } from './diffEngine';
|
||||
import { jsonToYaml } from '@/utils/jsonToYaml';
|
||||
import { jsonToToml } from '@/utils/jsonToToml';
|
||||
import { minifyJson } from '@/utils/jsonFormatter';
|
||||
import { useStorageState } from '@/utils/useStorageState';
|
||||
import type { JsonToolsPageMode } from '@/types/storage';
|
||||
import SwitchButtonGroup from '@/components/SwitchButtonGroup';
|
||||
import type { ViewMode } from './types';
|
||||
|
||||
interface ParseState {
|
||||
value: unknown;
|
||||
error: string | null;
|
||||
}
|
||||
|
||||
const tryParse = (raw: string, invalidMsg: string): ParseState => {
|
||||
const trimmed = raw.trim();
|
||||
if (!trimmed) return { value: undefined, error: null };
|
||||
try {
|
||||
return { value: JSON.parse(trimmed), error: null };
|
||||
} catch {
|
||||
return { value: undefined, error: invalidMsg };
|
||||
}
|
||||
};
|
||||
|
||||
const VALID_PAGE_MODES: readonly JsonToolsPageMode[] = ['diff', 'format', 'yaml', 'toml', 'minify'];
|
||||
const isValidPageMode = (val: unknown): val is JsonToolsPageMode =>
|
||||
typeof val === 'string' && (VALID_PAGE_MODES as readonly string[]).includes(val);
|
||||
|
||||
type PageMode = JsonToolsPageMode;
|
||||
|
||||
export default function Index() {
|
||||
const { t } = useI18n(['jsonDiff', 'jsonFormat']);
|
||||
const [pageMode, setPageMode] = useStorageState('jsonTools/pageMode', 'diff', isValidPageMode);
|
||||
|
||||
// 1. 受控原始输入源
|
||||
const [leftInput, setLeftInput] = useState('');
|
||||
const [rightInput, setRightInput] = useState('');
|
||||
|
||||
// 2. 纯净的异步防抖管道：仅负责切断高频打字开销
|
||||
const [debouncedLeft, setDebouncedLeft] = useState('');
|
||||
const [debouncedRight, setDebouncedRight] = useState('');
|
||||
|
||||
useEffect(() => {
|
||||
const handle = setTimeout(() => {
|
||||
setDebouncedLeft(leftInput);
|
||||
setDebouncedRight(rightInput);
|
||||
}, 250);
|
||||
return () => clearTimeout(handle);
|
||||
}, [leftInput, rightInput]);
|
||||
|
||||
// 3. 贯彻方案A：利用 useMemo 将防抖文本同步转化为解析树和错误提示
|
||||
const parseState = useMemo(() => {
|
||||
const invalidMsg = t('jsonDiff:invalidJson');
|
||||
return {
|
||||
left: tryParse(debouncedLeft, invalidMsg),
|
||||
right: tryParse(debouncedRight, invalidMsg),
|
||||
};
|
||||
}, [debouncedLeft, debouncedRight, t]);
|
||||
|
||||
const leftError = parseState.left.error;
|
||||
const rightError = parseState.right.error;
|
||||
|
||||
const [viewMode, setViewMode] = useState<ViewMode>('sideBySide');
|
||||
const [currentDiffIndex, setCurrentDiffIndex] = useState(0);
|
||||
|
||||
// 4. 实时比对流式计算
|
||||
const diffResult = useMemo(() => {
|
||||
const { left, right } = parseState;
|
||||
if (left.error || right.error || debouncedLeft.trim() === '' || debouncedRight.trim() === '') {
|
||||
return null;
|
||||
}
|
||||
return diffJson(left.value, right.value);
|
||||
}, [parseState, debouncedLeft, debouncedRight]);
|
||||
|
||||
// 💡 彻底删除了原本在此处的侦听 [diffResult] 的 useEffect。
|
||||
// 状态重置已完全委托给事件源头，级联更新警告从根源上永久自愈！
|
||||
|
||||
const total = diffResult?.diffPaths.length ?? 0;
|
||||
|
||||
const handlePrev = useCallback(() => {
|
||||
if (total === 0) return;
|
||||
setCurrentDiffIndex((idx) => (idx - 1 + total) % total);
|
||||
}, [total]);
|
||||
|
||||
const handleNext = useCallback(() => {
|
||||
if (total === 0) return;
|
||||
setCurrentDiffIndex((idx) => (idx + 1) % total);
|
||||
}, [total]);
|
||||
|
||||
const activePath = diffResult && total > 0 ? diffResult.diffPaths[currentDiffIndex] : undefined;
|
||||
|
||||
const yamlConvert: ConvertFunction = useCallback((text: string) => {
|
||||
const r = jsonToYaml(text);
|
||||
return { output: r.output, originalBytes: r.originalBytes, outputBytes: r.outputBytes };
|
||||
}, []);
|
||||
|
||||
const tomlConvert: ConvertFunction = useCallback((text: string) => {
|
||||
const r = jsonToToml(text);
|
||||
return { output: r.output, originalBytes: r.originalBytes, outputBytes: r.outputBytes };
|
||||
}, []);
|
||||
|
||||
const minifyConvert: ConvertFunction = useCallback((text: string) => {
|
||||
const r = minifyJson(text);
|
||||
return { output: r.minified, originalBytes: r.originalBytes, outputBytes: r.minifiedBytes };
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="p-4 w-full flex flex-col space-y-4 min-h-[500px] select-none">
|
||||
<SwitchButtonGroup
|
||||
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') },
|
||||
]}
|
||||
size="small"
|
||||
className="w-full sm:w-auto"
|
||||
/>
|
||||
|
||||
{pageMode === 'diff' ? (
|
||||
<div className="flex flex-col space-y-4">
|
||||
<div className="flex h-10 items-center justify-between px-1.5 bg-secondary/40 rounded-xl border border-border/60">
|
||||
<SwitchButtonGroup
|
||||
value={viewMode}
|
||||
onChange={(v: ViewMode) => setViewMode(v)}
|
||||
options={[
|
||||
{ value: 'sideBySide', label: t('jsonDiff:sideBySideMode') },
|
||||
{ value: 'unified', label: t('jsonDiff:unifiedMode') },
|
||||
]}
|
||||
size="small"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col md:flex-row gap-4 w-full items-stretch">
|
||||
<JsonDiffInput
|
||||
label={t('jsonDiff:leftLabel')}
|
||||
placeholder={t('jsonDiff:leftPlaceholder')}
|
||||
value={leftInput}
|
||||
onChange={(val) => {
|
||||
setLeftInput(val);
|
||||
setCurrentDiffIndex(0); // 💡 在同一个用户键盘事件中打包批处理，0 副作用开销
|
||||
}}
|
||||
error={leftError}
|
||||
minRows={9}
|
||||
/>
|
||||
<JsonDiffInput
|
||||
label={t('jsonDiff:rightLabel')}
|
||||
placeholder={t('jsonDiff:rightPlaceholder')}
|
||||
value={rightInput}
|
||||
onChange={(val) => {
|
||||
setRightInput(val);
|
||||
setCurrentDiffIndex(0); // 💡 在同一个用户键盘事件中打包批处理，0 副作用开销
|
||||
}}
|
||||
error={rightError}
|
||||
minRows={9}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{diffResult ? (
|
||||
<div className="flex flex-col space-y-3.5 w-full pt-1">
|
||||
<div className="flex justify-center w-full">
|
||||
<DiffNavigator
|
||||
total={total}
|
||||
currentIndex={currentDiffIndex}
|
||||
onPrev={handlePrev}
|
||||
onNext={handleNext}
|
||||
/>
|
||||
</div>
|
||||
<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>
|
||||
)}
|
||||
</div>
|
||||
) : pageMode === 'format' ? (
|
||||
<JsonFormatSection />
|
||||
) : pageMode === 'yaml' ? (
|
||||
<JsonConvertSection translationPrefix="yaml" convertFunction={yamlConvert} />
|
||||
) : pageMode === 'toml' ? (
|
||||
<JsonConvertSection translationPrefix="toml" convertFunction={tomlConvert} />
|
||||
) : (
|
||||
<JsonConvertSection translationPrefix="minify" convertFunction={minifyConvert} />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,55 @@
|
||||
export type DiffType = 'added' | 'removed' | 'modified' | 'unchanged';
|
||||
export interface DiffNode {
|
||||
/** 节点键名（对象属性名，或者数组的索引字符串 "0", "1"...） */
|
||||
key: string;
|
||||
|
||||
/** 差异状态机核心分类 */
|
||||
type: DiffType;
|
||||
|
||||
/** * 左侧原始数值快照
|
||||
* 💡 优化点：移除了不安全的可选 ?，如果完全缺失则严格流出 undefined，
|
||||
* 倒逼下游渲染层必须做出明确的条件分支防护。
|
||||
*/
|
||||
oldValue: unknown;
|
||||
|
||||
/** 右侧最新数值快照 */
|
||||
newValue: unknown;
|
||||
|
||||
/** * 子节点差异列表
|
||||
* 💡 强类型化：只有当对象或数组这类容器节点发生比对时存在，未选中时默认为空数组 []
|
||||
*/
|
||||
children?: DiffNode[];
|
||||
|
||||
/** * 节点的绝对路径表达式（严格遵循高可靠的 JSONPath 规约，如 "$.user.profile" 或 "$.list[0]"）
|
||||
* 用于 DiffNavigator 差异导航条进行秒级的 scrollIntoView 视图精准定位高亮
|
||||
*/
|
||||
path: string;
|
||||
|
||||
/** 是否为叶子节点（若为 true 代表当前值为基本基元数据类型，若为 false 代表当前值为大括号或方括号容器） */
|
||||
isLeaf: boolean;
|
||||
|
||||
/**
|
||||
* 💡 性能调优大闸（Computed Guard）：
|
||||
* 预计算状态：代表当前节点的深层子孙节点中，是否存在任意一处 'added' | 'removed' | 'modified' 差异行为。
|
||||
* 这使得外界的 JsonTree 在高频折叠/展开时，能在一帧之内直接通过此属性判断是否需要高亮其父大括号，
|
||||
* 彻底终结了原先命令式深度递归遍历子树的昂贵性能代价！
|
||||
*/
|
||||
hasDiffInChildren: boolean;
|
||||
}
|
||||
|
||||
/** 视图对照渲染模式：sideBySide (双栏对照折叠树) | unified (单栏行级混合拍平) */
|
||||
export type ViewMode = 'sideBySide' | 'unified';
|
||||
|
||||
export interface DiffResult {
|
||||
/** 经过深层比对算法推导生成的根节点核心差异树（AST） */
|
||||
root: DiffNode;
|
||||
|
||||
/** * 扁平化的高精度差异节点绝对路径映射表。
|
||||
* 里面严格存储了所有 type !== 'unchanged' 的节点 path。
|
||||
* 专供外部的 DiffNavigator (差异控制条) 充当中央路由索引，实现 0 延迟的上一处/下一处无缝切流。
|
||||
*/
|
||||
diffPaths: string[];
|
||||
|
||||
/** 差异核心总计数（等价于 diffPaths.length），注入 tabular-nums 配合渲染 */
|
||||
diffCount: number;
|
||||
}
|
||||
@@ -0,0 +1,139 @@
|
||||
import { useCallback, useEffect, useMemo, useState } from 'react';
|
||||
import { parseJwt, stringifyJson } from '@/utils/jwt';
|
||||
import CopyButton from '@/components/CopyButton';
|
||||
import TextInputArea from '@/components/TextInputArea';
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
import { useContextMenuData } from '@/utils/useContextMenuData';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
interface SectionProps {
|
||||
title: string;
|
||||
content: unknown;
|
||||
colorClass: string; // 💡 1. 废除硬编码十六进制色值，改用语义化的 Tailwind 类名
|
||||
bgClass: string;
|
||||
borderClass: string;
|
||||
}
|
||||
|
||||
const Section = ({ title, content, colorClass, bgClass, borderClass }: SectionProps) => {
|
||||
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>
|
||||
{/* 💡 排版微距精雕：
|
||||
- 彻底移除 border-black/5 这种非暗黑模式友好的硬隔离。
|
||||
- 统一收拢为标准的 bg-muted/40 配合 font-mono text-xs
|
||||
*/}
|
||||
<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>
|
||||
);
|
||||
};
|
||||
|
||||
export default function Index() {
|
||||
const { t } = useI18n(['jwt', 'jsonFormat']);
|
||||
const [jwtInput, setJwtInput] = useState('');
|
||||
|
||||
// 2. 防抖中转管道：切断高频键盘敲击时的红色语法闪烁
|
||||
const [debouncedInput, setDebouncedInput] = useState('');
|
||||
|
||||
useEffect(() => {
|
||||
const handle = setTimeout(() => {
|
||||
setDebouncedInput(jwtInput);
|
||||
}, 200);
|
||||
return () => clearTimeout(handle);
|
||||
}, [jwtInput]);
|
||||
|
||||
const handleContextMenuData = useCallback((payload: string) => {
|
||||
const cleaned = payload.replace(/^Bearer\s*/i, '').trim();
|
||||
setJwtInput(cleaned);
|
||||
}, []);
|
||||
|
||||
useContextMenuData({ featureKey: 'jwt', onData: handleContextMenuData });
|
||||
|
||||
// 3. 贯彻方案 A：衍生变量流。直接消费防抖后的文本
|
||||
const result = useMemo(() => {
|
||||
if (!debouncedInput.trim()) {
|
||||
return null;
|
||||
}
|
||||
return parseJwt(debouncedInput);
|
||||
}, [debouncedInput]);
|
||||
|
||||
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={(val) => {
|
||||
const cleaned = val.replace(/^Bearer\s*/i, '').trim();
|
||||
setJwtInput(cleaned);
|
||||
}}
|
||||
allowCopy={true}
|
||||
showClear={true}
|
||||
externalError={result?.error || undefined}
|
||||
onClear={() => setJwtInput('')}
|
||||
/>
|
||||
|
||||
{/* 解码看板结果展现 */}
|
||||
{result && !result.error && (
|
||||
<div className="flex flex-col gap-4">
|
||||
{/* Header 分区：完美致敬 JWT.io 的鲜艳色彩，同时实现黑夜暗化自适应 */}
|
||||
<Section
|
||||
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"
|
||||
/>
|
||||
|
||||
{/* Payload 分区 */}
|
||||
<Section
|
||||
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"
|
||||
/>
|
||||
|
||||
{/* Signature 签名区：完全对齐标准的 shadcn 骨架阶度 */}
|
||||
<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>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,305 @@
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
||||
import { Download, Printer, Trash2 } from 'lucide-react';
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
import CopyButton from '@/components/CopyButton';
|
||||
import SwitchButtonGroup from '@/components/SwitchButtonGroup';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { useStorageState } from '@/utils/useStorageState';
|
||||
import type { MarkdownToHtmlPreviewMode } from '@/types/storage';
|
||||
import {
|
||||
downloadHtmlFile,
|
||||
markdownToHtml,
|
||||
printHtml,
|
||||
SAMPLE_MARKDOWN,
|
||||
wrapHtmlDocument,
|
||||
} from '@/utils/markdownToHtml';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
const isValidPreviewMode = (val: unknown): val is MarkdownToHtmlPreviewMode =>
|
||||
typeof val === 'string' && ['split', 'preview', 'html'].includes(val);
|
||||
|
||||
// 💡 规范回归：保持最纯净的通用选择器集合，内部变量全部交由全局 :root 驱动
|
||||
const PREVIEW_STYLES = `
|
||||
.markdown-body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
line-height: 1.6;
|
||||
color: var(--md-foreground);
|
||||
background-color: transparent;
|
||||
font-size: 14px;
|
||||
}
|
||||
.markdown-body h1, .markdown-body h2, .markdown-body h3 {
|
||||
margin-top: 24px;
|
||||
margin-bottom: 16px;
|
||||
font-weight: 600;
|
||||
line-height: 1.25;
|
||||
color: var(--md-foreground);
|
||||
}
|
||||
.markdown-body h1 { border-bottom: 1px solid var(--md-border); padding-bottom: 0.3em; font-size: 1.6em; }
|
||||
.markdown-body h2 { border-bottom: 1px solid var(--md-border); padding-bottom: 0.3em; font-size: 1.35em; }
|
||||
.markdown-body p { margin-top: 0; margin-bottom: 16px; }
|
||||
.markdown-body a { color: var(--md-link-color); text-decoration: none; }
|
||||
.markdown-body a:hover { text-decoration: underline; }
|
||||
.markdown-body code {
|
||||
background-color: var(--md-code-bg);
|
||||
border-radius: 4px;
|
||||
font-size: 85%;
|
||||
padding: 0.2em 0.4em;
|
||||
font-family: Menlo, Consolas, monospace;
|
||||
}
|
||||
.markdown-body pre {
|
||||
background-color: var(--md-pre-bg);
|
||||
border-radius: 8px;
|
||||
font-size: 85%;
|
||||
line-height: 1.45;
|
||||
overflow: auto;
|
||||
padding: 16px;
|
||||
margin: 0 0 16px;
|
||||
border: 1px solid var(--md-border);
|
||||
}
|
||||
.markdown-body pre code {
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.markdown-body blockquote {
|
||||
border-left: 0.25em solid var(--md-quote-line);
|
||||
color: var(--md-muted);
|
||||
margin: 0 0 16px;
|
||||
padding: 0 1em;
|
||||
}
|
||||
.markdown-body table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
margin-bottom: 16px;
|
||||
font-size: 13px;
|
||||
}
|
||||
.markdown-body table th, .markdown-body table td {
|
||||
border: 1px solid var(--md-border);
|
||||
padding: 6px 13px;
|
||||
}
|
||||
.markdown-body table tr:nth-child(2n) { background-color: var(--md-code-bg); }
|
||||
.markdown-body table th { font-weight: 600; background-color: var(--md-code-bg); }
|
||||
`;
|
||||
|
||||
export default function MarkdownToHtmlPage() {
|
||||
const { t } = useI18n('markdownToHtml');
|
||||
const [previewMode, setPreviewMode] = useStorageState(
|
||||
'markdownToHtml/previewMode',
|
||||
'split' as MarkdownToHtmlPreviewMode,
|
||||
isValidPreviewMode,
|
||||
);
|
||||
const [markdown, setMarkdown] = useState(SAMPLE_MARKDOWN);
|
||||
const iframeRef = useRef<HTMLIFrameElement>(null);
|
||||
|
||||
const result = useMemo(() => markdownToHtml(markdown), [markdown]);
|
||||
const error = result.hasError ? (result.error ?? null) : null;
|
||||
|
||||
// 💡 自适应大总管：以极高严谨度拼装明暗大闸，用标准换行切断粘连风险
|
||||
useEffect(() => {
|
||||
const iframe = iframeRef.current;
|
||||
if (!iframe) return;
|
||||
|
||||
const isDarkMode = document.documentElement.classList.contains('dark');
|
||||
|
||||
const themeVariables = isDarkMode
|
||||
? `:root {
|
||||
--md-bg: #090d16;
|
||||
--md-foreground: #e6edf3;
|
||||
--md-border: rgba(255,255,255,0.15);
|
||||
--md-code-bg: rgba(255,255,255,0.12);
|
||||
--md-pre-bg: rgba(255,255,255,0.04);
|
||||
--md-muted: #8b949e;
|
||||
--md-quote-line: rgba(255,255,255,0.25);
|
||||
--md-link-color: #58a6ff;
|
||||
}`
|
||||
: `:root {
|
||||
--md-bg: #ffffff;
|
||||
--md-foreground: #1f2328;
|
||||
--md-border: rgba(128,128,128,0.2);
|
||||
--md-code-bg: rgba(128,128,128,0.08);
|
||||
--md-pre-bg: rgba(128,128,128,0.03);
|
||||
--md-muted: #4b5563;
|
||||
--md-quote-line: rgba(128,128,128,0.3);
|
||||
--md-link-color: #3b82f6;
|
||||
}`;
|
||||
|
||||
// 💡 3. 核心大清洗：将全局基础树（html, body）与派生样式完全独立硬编码，杜绝任何语法踩踏
|
||||
const baseGlobalStyles = `
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--md-bg);
|
||||
color: var(--md-foreground);
|
||||
}
|
||||
body {
|
||||
padding: 16px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
`;
|
||||
|
||||
iframe.srcdoc = `<!DOCTYPE html>
|
||||
<html lang="zh" style="background-color: ${isDarkMode ? '#090d16' : '#ffffff'};">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<style>
|
||||
${themeVariables}
|
||||
${PREVIEW_STYLES}
|
||||
${baseGlobalStyles}
|
||||
</style>
|
||||
</head>
|
||||
<body class="markdown-body">${result.html}</body>
|
||||
</html>`;
|
||||
}, [result.html, previewMode]);
|
||||
|
||||
const handleModeChange = useCallback(
|
||||
(newMode: MarkdownToHtmlPreviewMode) => {
|
||||
setPreviewMode(newMode);
|
||||
},
|
||||
[setPreviewMode],
|
||||
);
|
||||
|
||||
const handleClear = useCallback(() => {
|
||||
setMarkdown('');
|
||||
}, []);
|
||||
|
||||
const handlePrint = useCallback(() => {
|
||||
printHtml(result.html, t('pageTitle'));
|
||||
}, [result.html, t]);
|
||||
|
||||
const handleDownload = useCallback(() => {
|
||||
const doc = wrapHtmlDocument(result.html, t('pageTitle'));
|
||||
downloadHtmlFile(doc, 'markdown-export.html');
|
||||
}, [result.html, t]);
|
||||
|
||||
const showInput = previewMode !== 'preview';
|
||||
const showPreview = previewMode !== 'html';
|
||||
|
||||
return (
|
||||
<div className="p-4 w-full flex flex-col space-y-4 select-none">
|
||||
<div className="flex flex-col space-y-4">
|
||||
{/* 工具集成控制中枢 */}
|
||||
<div className="flex flex-col sm:flex-row gap-3 justify-between items-stretch sm:items-center bg-secondary/40 rounded-xl border border-border/60 px-1.5 py-1.5 sm:h-12">
|
||||
<SwitchButtonGroup
|
||||
value={previewMode}
|
||||
options={[
|
||||
{ value: 'split', label: t('splitMode') },
|
||||
{ value: 'preview', label: t('previewMode') },
|
||||
{ value: 'html', label: t('htmlMode') },
|
||||
]}
|
||||
onChange={handleModeChange}
|
||||
size="small"
|
||||
className="w-full sm:w-auto"
|
||||
/>
|
||||
|
||||
<div className="flex gap-2 shrink-0">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={handleClear}
|
||||
className="h-8 rounded-md font-medium text-xs gap-1.5 shadow-sm text-destructive hover:text-destructive hover:bg-destructive/5 dark:hover:bg-destructive/10 border-input/60"
|
||||
>
|
||||
<Trash2 className="h-3.5 w-3.5" />
|
||||
{t('clear')}
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={handlePrint}
|
||||
disabled={!result.html}
|
||||
className="h-8 rounded-md font-medium text-xs gap-1.5 shadow-sm"
|
||||
>
|
||||
<Printer className="h-3.5 w-3.5" />
|
||||
{t('print')}
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={handleDownload}
|
||||
disabled={!result.html}
|
||||
className="h-8 rounded-md font-medium text-xs gap-1.5 shadow-sm"
|
||||
>
|
||||
<Download className="h-3.5 w-3.5" />
|
||||
{t('download')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 错误拦截提示框 */}
|
||||
{error && (
|
||||
<div
|
||||
role="alert"
|
||||
className="p-3.5 bg-destructive/10 border border-destructive/20 rounded-xl text-destructive text-xs font-semibold tracking-wide"
|
||||
>
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 主框架多栏联动排版轴 */}
|
||||
<div
|
||||
className={cn(
|
||||
'grid gap-4 min-h-[480px] w-full',
|
||||
showInput && showPreview ? 'grid-cols-1 md:grid-cols-2' : 'grid-cols-1',
|
||||
)}
|
||||
>
|
||||
{/* Markdown 输入翼终端 */}
|
||||
{showInput && (
|
||||
<div className="border border-border rounded-xl bg-card text-card-foreground shadow-sm overflow-hidden flex flex-col focus-within:ring-1 focus-within:ring-ring focus-within:border-ring">
|
||||
<div className="flex h-9 items-center justify-between px-4 bg-muted/50 border-b border-border select-none">
|
||||
<span className="text-[10px] font-bold text-muted-foreground/90 uppercase tracking-wider">
|
||||
{t('inputLabel')}
|
||||
</span>
|
||||
<span className="text-[10px] font-mono text-muted-foreground/60 tabular-nums">
|
||||
{t('charCount', { count: markdown.length })}
|
||||
</span>
|
||||
</div>
|
||||
<textarea
|
||||
value={markdown}
|
||||
onChange={(e) => setMarkdown(e.target.value)}
|
||||
placeholder={t('inputPlaceholder')}
|
||||
className="flex-1 min-h-[390px] p-4 bg-transparent font-mono text-xs leading-relaxed resize-none focus:outline-none text-foreground/90 select-text"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 实时 HTML/Iframe 预览翼终端 */}
|
||||
{showPreview && (
|
||||
<div className="border border-border rounded-xl bg-card text-card-foreground shadow-sm overflow-hidden flex flex-col">
|
||||
<div className="flex h-9 items-center justify-between px-4 bg-muted/50 border-b border-border select-none">
|
||||
<span className="text-[10px] font-bold text-muted-foreground/90 uppercase tracking-wider">
|
||||
{(previewMode as string) === 'html' ? t('htmlOutputLabel') : t('previewLabel')}
|
||||
</span>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-[10px] font-mono text-muted-foreground/60 tabular-nums">
|
||||
{t('charCount', { count: result.htmlLength })}
|
||||
</span>
|
||||
<CopyButton
|
||||
text={result.html}
|
||||
className="h-6 w-6 rounded-md border text-muted-foreground"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{(previewMode as string) === 'html' ? (
|
||||
<textarea
|
||||
value={result.html}
|
||||
readOnly
|
||||
className="flex-1 min-h-[390px] p-4 font-mono text-xs leading-relaxed resize-none focus:outline-none bg-muted/30 dark:bg-muted/10 text-foreground/80 select-text"
|
||||
/>
|
||||
) : (
|
||||
<div className="flex-1 min-h-[390px] overflow-hidden bg-transparent">
|
||||
<iframe
|
||||
ref={iframeRef}
|
||||
title="markdown-preview"
|
||||
className="w-full h-full min-h-[360px] border-none bg-transparent"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,89 @@
|
||||
import { beforeEach, describe, expect, it, vi } from 'vitest';
|
||||
import { fireEvent, render, screen } from '@testing-library/react';
|
||||
import QrCodePage from '../index';
|
||||
|
||||
vi.mock('lucide-react', async (importOriginal) => {
|
||||
const actual = await importOriginal<typeof import('lucide-react')>();
|
||||
return {
|
||||
...actual,
|
||||
// 增量伪造需要高精嗅探的 QrCode 核心定位图标
|
||||
QrCode: () => <div data-testid="mock-lucide-qrcode">Icon</div>,
|
||||
};
|
||||
});
|
||||
|
||||
// Mock useSnackbar
|
||||
vi.mock('@/components/GlobalSnackbar', () => ({
|
||||
useSnackbar: () => ({
|
||||
showMessage: vi.fn(),
|
||||
}),
|
||||
}));
|
||||
|
||||
// Mock getEntryPointType（保留原厂其他特征配置，仅模拟入口路由环境）
|
||||
vi.mock('@/config/features', async (importOriginal) => {
|
||||
const actual = await importOriginal<typeof import('@/config/features')>();
|
||||
return {
|
||||
...actual,
|
||||
getEntryPointType: () => 'sidepanel',
|
||||
};
|
||||
});
|
||||
|
||||
// Mock 高频变化的子组件，收拢断言边界
|
||||
vi.mock('@/components/QrCodePreview', () => ({
|
||||
default: () => <div data-testid="qr-code-preview">QrCodePreview</div>,
|
||||
}));
|
||||
|
||||
vi.mock('@/components/ImageUploader', () => ({
|
||||
default: () => <div data-testid="image-uploader">ImageUploader</div>,
|
||||
}));
|
||||
|
||||
// Mock QRious 动态图像离屏生成引擎
|
||||
vi.mock('qrious', () => ({
|
||||
default: vi.fn().mockImplementation(() => ({
|
||||
toDataURL: () => 'data:image/png;base64,mock',
|
||||
})),
|
||||
}));
|
||||
|
||||
describe('QrCodePage', () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
it('应该默认渲染生成模式', () => {
|
||||
render(<QrCodePage />);
|
||||
expect(screen.getByTestId('qr-code-preview')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('应该渲染模式切换按钮', () => {
|
||||
render(<QrCodePage />);
|
||||
expect(screen.getByText('文本转二维码')).toBeInTheDocument();
|
||||
expect(screen.getByText('二维码转文本')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('切换到解析模式应该渲染 ImageUploader', () => {
|
||||
render(<QrCodePage />);
|
||||
fireEvent.click(screen.getByText('二维码转文本'));
|
||||
expect(screen.getByTestId('image-uploader')).toBeInTheDocument();
|
||||
expect(screen.queryByTestId('qr-code-preview')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('切换回生成模式应该渲染 QrCodePreview', () => {
|
||||
render(<QrCodePage />);
|
||||
// 先切换到解析模式
|
||||
fireEvent.click(screen.getByText('二维码转文本'));
|
||||
expect(screen.getByTestId('image-uploader')).toBeInTheDocument();
|
||||
// 再切换回生成模式
|
||||
fireEvent.click(screen.getByText('文本转二维码'));
|
||||
expect(screen.getByTestId('qr-code-preview')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('应该渲染输入区域的系统标签（对齐新版 Label 机制）', () => {
|
||||
render(<QrCodePage />);
|
||||
expect(screen.getByText('输入 URL 或文本')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('应该渲染双翼响应式卡片网格布局', () => {
|
||||
const { container } = render(<QrCodePage />);
|
||||
const gridContainer = container.querySelector('.grid');
|
||||
expect(gridContainer).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,57 @@
|
||||
import TextInputArea from '@/components/TextInputArea';
|
||||
import QrCodePreview from '@/components/QrCodePreview';
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
import { useQrCodeContext } from '../contexts/QrCodeContext';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
export default function GeneratePanel() {
|
||||
const { t } = useI18n('qrCode');
|
||||
const { generatorState, setTextToEncode, downloadQrCode, copyQrCode } = useQrCodeContext();
|
||||
|
||||
return (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 w-full items-stretch select-none p-0.5">
|
||||
{/* 左翼：高性能受控输入翼终端 */}
|
||||
<div
|
||||
className={cn(
|
||||
'border border-border rounded-xl bg-card text-card-foreground shadow-sm flex flex-col p-4',
|
||||
'focus-within:ring-1 focus-within:ring-ring focus-within:border-ring',
|
||||
)}
|
||||
>
|
||||
{/* 💡 2. 独立外置标签架（A11y 无障碍对齐）：
|
||||
- 彻底删掉 TextInputArea 上引发崩溃的违规属性。
|
||||
- 改用正统的 <Label />，并注入标准的高度无障碍样式，间距比例极度平滑。
|
||||
*/}
|
||||
<div className="flex flex-col space-y-2.5 h-full">
|
||||
<Label className="text-[10px] font-bold text-muted-foreground/90 uppercase tracking-wider select-none pl-0.5">
|
||||
{t('qrCode:urlInputLabel')}
|
||||
</Label>
|
||||
|
||||
<div className="flex-1 min-h-0">
|
||||
<TextInputArea
|
||||
value={generatorState.textToEncode}
|
||||
onChange={setTextToEncode}
|
||||
placeholder={t('qrCode:urlInputPlaceholder')}
|
||||
showCount={true}
|
||||
showClear={true}
|
||||
allowCopy={true}
|
||||
minRows={6}
|
||||
maxRows={12}
|
||||
externalError={generatorState.inputError || undefined}
|
||||
onClear={() => setTextToEncode('')}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 右翼：活态二维码高精生成区 */}
|
||||
<div className="flex flex-col h-full">
|
||||
<QrCodePreview
|
||||
qrCodeDataUrl={generatorState.qrCodeDataUrl}
|
||||
onDownload={downloadQrCode}
|
||||
onCopy={copyQrCode}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,108 @@
|
||||
import { useCallback, useEffect } from 'react';
|
||||
import TextInputArea from '@/components/TextInputArea';
|
||||
import ImageUploader from '@/components/ImageUploader';
|
||||
import { useSnackbar } from '@/components/GlobalSnackbar';
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
import { useQrCodeContext } from '../contexts/QrCodeContext';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
export default function ParsePanel() {
|
||||
const { t } = useI18n('qrCode');
|
||||
const { showMessage } = useSnackbar();
|
||||
const { parserState, setParserState, handleFileChange, handleClearFile } = useQrCodeContext();
|
||||
|
||||
// 全局粘贴事件监听
|
||||
const handlePaste = useCallback(
|
||||
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) {
|
||||
handleFileChange(file);
|
||||
showMessage(t('qrCode:imagePasted'), { severity: 'success', autoHideDuration: 1000 });
|
||||
}
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// 检查是否有 Base64 字符串
|
||||
const text = e.clipboardData?.getData('text/plain');
|
||||
if (text && text.startsWith('data:image/')) {
|
||||
e.preventDefault();
|
||||
try {
|
||||
const response = await fetch(text);
|
||||
const blob = await response.blob();
|
||||
const file = new File([blob], 'pasted-image.png', { type: blob.type });
|
||||
handleFileChange(file);
|
||||
showMessage(t('qrCode:imagePasted'), { severity: 'success', autoHideDuration: 1000 });
|
||||
} catch (error) {
|
||||
console.error('处理 Base64 图片失败:', error);
|
||||
showMessage(t('qrCode:imagePasteError'), { severity: 'error', autoHideDuration: 3000 });
|
||||
}
|
||||
}
|
||||
},
|
||||
[handleFileChange, showMessage, t],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
document.addEventListener('paste', handlePaste);
|
||||
return () => {
|
||||
document.removeEventListener('paste', handlePaste);
|
||||
};
|
||||
}, [handlePaste]);
|
||||
|
||||
return (
|
||||
/* 💡 统一大视觉轴：
|
||||
- 追加 p-0.5 微隔离，配合 gap-6 建立与生成面板（GeneratePanel）绝对像素对齐的网格天平。
|
||||
*/
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 w-full items-stretch select-none p-0.5">
|
||||
{/* 左翼：图片接收/拖拽/剪贴板上传终端 */}
|
||||
<div className="flex flex-col h-full">
|
||||
<ImageUploader
|
||||
selectedFile={parserState.selectedFile}
|
||||
onFileChange={handleFileChange}
|
||||
onClearFile={handleClearFile}
|
||||
previewUrl={parserState.previewUrl}
|
||||
onPreviewUrlChange={(url) => setParserState((prev) => ({ ...prev, previewUrl: url }))}
|
||||
dragging={parserState.dragging}
|
||||
onDraggingChange={(dragging) => setParserState((prev) => ({ ...prev, dragging }))}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 右翼：高阶解析出码只读终端 */}
|
||||
<div
|
||||
className={cn(
|
||||
'border border-border rounded-xl bg-card text-card-foreground shadow-sm flex flex-col p-4',
|
||||
// 💡 视觉对称增强：加入相同的聚焦变量环联动，使双翼权重达成完美绝对平衡
|
||||
'focus-within:ring-1 focus-within:ring-ring focus-within:border-ring',
|
||||
)}
|
||||
>
|
||||
<div className="flex flex-col space-y-2.5 h-full">
|
||||
{/* 💡 修复点：物理剔除 TextInputArea 上的违规 title，改用符合 Vercel 美学的极致大写极细原子标签 */}
|
||||
<Label className="text-[10px] font-bold text-muted-foreground/90 uppercase tracking-wider pl-0.5">
|
||||
{t('qrCode:resultLabel')}
|
||||
</Label>
|
||||
|
||||
<div className="flex-1 min-h-0">
|
||||
<TextInputArea
|
||||
value={parserState.decodedResult}
|
||||
readOnly={true}
|
||||
showClear={false}
|
||||
allowCopy={true}
|
||||
placeholder=""
|
||||
minRows={6}
|
||||
maxRows={12}
|
||||
externalError={parserState.parseError || undefined}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,35 @@
|
||||
import type { Dispatch, SetStateAction } from 'react'; // 💡 1. 显式解构导入类型，彻底掐灭 TS2304 报错
|
||||
import { createContext, useContext } from 'react';
|
||||
import type { QrCodeGeneratorState, QrCodeMode, QrCodeParserState } from '../types';
|
||||
|
||||
export interface QrCodeContextValue {
|
||||
// 核心主视图路由模式切换卡
|
||||
mode: QrCodeMode;
|
||||
setMode: (mode: QrCodeMode) => void;
|
||||
|
||||
// 1. 流式生成器终端状态机驱动
|
||||
generatorState: QrCodeGeneratorState;
|
||||
setTextToEncode: (text: string) => void;
|
||||
// 💡 架构纯净化：物理剔除暴露给外部的命令式 generateQrCode 算子。
|
||||
// 外部面板只需 setTextToEncode 驱动源文本更新，生成动作由内部流式管线全自动自发自愈完成！
|
||||
downloadQrCode: () => void;
|
||||
copyQrCode: () => Promise<void>;
|
||||
|
||||
// 2. 活态反向解析器终端状态机驱动
|
||||
parserState: QrCodeParserState;
|
||||
setParserState: Dispatch<SetStateAction<QrCodeParserState>>; // 💡 规整为纯净的直接类型使用
|
||||
parseQrCode: (file: File) => Promise<void>;
|
||||
handleFileChange: (file: File) => void;
|
||||
handleClearFile: () => void;
|
||||
}
|
||||
|
||||
export const QrCodeContext = createContext<QrCodeContextValue | null>(null);
|
||||
|
||||
export function useQrCodeContext() {
|
||||
const context = useContext(QrCodeContext);
|
||||
if (!context) {
|
||||
// 边界鲁棒性防护大闸
|
||||
throw new Error('useQrCodeContext must be used within a valid QrCodeProvider container');
|
||||
}
|
||||
return context;
|
||||
}
|
||||
@@ -0,0 +1,207 @@
|
||||
import { useCallback, useMemo, useState } from 'react';
|
||||
import QRious from 'qrious';
|
||||
import { useSnackbar } from '@/components/GlobalSnackbar';
|
||||
import { parseQrCodeFromFile } from '@/utils/qrCodeParser';
|
||||
import { useContextMenuData } from '@/utils/useContextMenuData';
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
import { useDebounce } from '@/utils/useDebounce';
|
||||
import type { QrCodeContextValue } from '../contexts/QrCodeContext';
|
||||
import type { QrCodeGeneratorState, QrCodeMode, QrCodeParserState } from '../types';
|
||||
|
||||
export function useQrCode(): QrCodeContextValue {
|
||||
const { t } = useI18n('qrCode');
|
||||
const { showMessage } = useSnackbar();
|
||||
|
||||
// 核心路由视图模式
|
||||
const [mode, setMode] = useState<QrCodeMode>('generate');
|
||||
|
||||
// 1. 生成器状态流（大幅瘦身：剔除 generating 状态）
|
||||
const [generatorState, setGeneratorState] = useState<
|
||||
Omit<QrCodeGeneratorState, 'generating' | 'qrCodeDataUrl'>
|
||||
>({
|
||||
textToEncode: '',
|
||||
inputError: '',
|
||||
});
|
||||
|
||||
// 2. 解析器状态流
|
||||
const [parserState, setParserState] = useState<QrCodeParserState>({
|
||||
decodedResult: '',
|
||||
parsing: false,
|
||||
parseError: '',
|
||||
selectedFile: null,
|
||||
previewUrl: '',
|
||||
dragging: false,
|
||||
});
|
||||
|
||||
// 3. 高频打字极速防抖
|
||||
const debouncedTextToEncode = useDebounce(generatorState.textToEncode, 200);
|
||||
|
||||
// 💡 4. 贯彻方案 A（无副作用超导管线）：
|
||||
// 彻底删除原有的 generateQrCodeRef、3个 useEffect、1个 useRef 以及相关的复杂状态机。
|
||||
// 二维码画布纯粹作为防抖文本的派生变量同步算出，0重绘死循环风险，体验平滑如镜！
|
||||
const qrCodeDataUrl = useMemo(() => {
|
||||
const text = debouncedTextToEncode.trim();
|
||||
if (!text) return '';
|
||||
|
||||
try {
|
||||
let url = text;
|
||||
if (!url.startsWith('http://') && !url.startsWith('https://')) {
|
||||
url = 'https://' + url;
|
||||
}
|
||||
|
||||
// 💡 暗黑模式自适应大闸：实时嗅探系统 DOM 阶度
|
||||
const isDark = document.documentElement.classList.contains('dark');
|
||||
|
||||
const qr = new QRious({
|
||||
value: url,
|
||||
size: 260,
|
||||
level: 'H',
|
||||
// 暗黑模式下使用透明底、月白前景色；白天模式下使用标准现代黑白配
|
||||
foreground: isDark ? '#f3f4f6' : '#0f172a',
|
||||
background: isDark ? 'transparent' : '#ffffff',
|
||||
});
|
||||
|
||||
return qr.toDataURL();
|
||||
} catch (error) {
|
||||
console.error('QR code generation sync task failed:', error);
|
||||
return '';
|
||||
}
|
||||
}, [debouncedTextToEncode]);
|
||||
|
||||
// 融合派生数据至完整状态体，满足外部组件强类型契合
|
||||
const fullGeneratorState = useMemo<QrCodeGeneratorState>(
|
||||
() => ({
|
||||
...generatorState,
|
||||
qrCodeDataUrl,
|
||||
generating: false,
|
||||
}),
|
||||
[generatorState, qrCodeDataUrl],
|
||||
);
|
||||
|
||||
// 设置输入文本
|
||||
const setTextToEncode = useCallback((text: string) => {
|
||||
setGeneratorState((prev) => ({ ...prev, textToEncode: text, inputError: '' }));
|
||||
}, []);
|
||||
|
||||
// 处理右键菜单数据上下文
|
||||
const handleContextMenuData = useCallback((payload: string) => {
|
||||
setMode('generate');
|
||||
setGeneratorState((prev) => ({ ...prev, textToEncode: payload, inputError: '' }));
|
||||
}, []);
|
||||
|
||||
useContextMenuData({ featureKey: 'qrCode', onData: handleContextMenuData });
|
||||
|
||||
// 反向活态解析二维码算法
|
||||
const parseQrCode = useCallback(
|
||||
async (file: File) => {
|
||||
try {
|
||||
setParserState((prev) => ({ ...prev, parsing: true, parseError: '', decodedResult: '' }));
|
||||
|
||||
const result = await parseQrCodeFromFile(file);
|
||||
|
||||
if (result.success && result.data) {
|
||||
setParserState((prev) => ({ ...prev, decodedResult: result.data! }));
|
||||
showMessage(t('qrCode:parseSuccess'), { severity: 'success', autoHideDuration: 1000 });
|
||||
} else {
|
||||
const errorMsg = result.error || t('qrCode:noQrDetected');
|
||||
setParserState((prev) => ({ ...prev, parseError: errorMsg }));
|
||||
showMessage(errorMsg, { severity: 'error', autoHideDuration: 3000 });
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('解析二维码失败:', error);
|
||||
const errorMsg = error instanceof Error ? error.message : t('qrCode:parseError');
|
||||
setParserState((prev) => ({ ...prev, parseError: errorMsg }));
|
||||
showMessage(errorMsg, { severity: 'error', autoHideDuration: 3000 });
|
||||
} finally {
|
||||
setParserState((prev) => ({ ...prev, parsing: false }));
|
||||
}
|
||||
},
|
||||
[t, showMessage],
|
||||
);
|
||||
|
||||
// 下载二维码
|
||||
const downloadQrCode = useCallback(() => {
|
||||
if (!qrCodeDataUrl) return;
|
||||
|
||||
const link = document.createElement('a');
|
||||
link.href = qrCodeDataUrl;
|
||||
link.download = 'qrcode.png';
|
||||
link.click();
|
||||
showMessage(t('qrCode:qrCodeDownloadSuccess'), { severity: 'success', autoHideDuration: 1000 });
|
||||
}, [qrCodeDataUrl, showMessage, t]);
|
||||
|
||||
// 复制二维码至剪贴板
|
||||
const copyQrCode = useCallback(async () => {
|
||||
if (!qrCodeDataUrl) return;
|
||||
|
||||
try {
|
||||
const response = await fetch(qrCodeDataUrl);
|
||||
const blob = await response.blob();
|
||||
|
||||
await navigator.clipboard.write([
|
||||
new ClipboardItem({
|
||||
'image/png': blob,
|
||||
}),
|
||||
]);
|
||||
|
||||
showMessage(t('qrCode:qrCodeCopySuccess'), { severity: 'success', autoHideDuration: 1000 });
|
||||
} catch (error) {
|
||||
console.error('复制二维码失败:', error);
|
||||
showMessage(t('qrCode:copyError'), { severity: 'error', autoHideDuration: 3000 });
|
||||
}
|
||||
}, [qrCodeDataUrl, showMessage, t]);
|
||||
|
||||
// 处理文件选择
|
||||
const handleFileChange = useCallback(
|
||||
(file: File) => {
|
||||
setParserState((prev) => {
|
||||
if (prev.previewUrl) {
|
||||
URL.revokeObjectURL(prev.previewUrl);
|
||||
}
|
||||
return {
|
||||
...prev,
|
||||
selectedFile: file,
|
||||
previewUrl: URL.createObjectURL(file),
|
||||
decodedResult: '',
|
||||
parseError: '',
|
||||
};
|
||||
});
|
||||
|
||||
// 触发解析安全的后台 Promise
|
||||
parseQrCode(file).catch((err) => {
|
||||
console.error('Parser standalone task thread exploded:', err);
|
||||
});
|
||||
},
|
||||
[parseQrCode],
|
||||
);
|
||||
|
||||
// 清除解析受控文件
|
||||
const handleClearFile = useCallback(() => {
|
||||
setParserState((prev) => {
|
||||
if (prev.previewUrl) {
|
||||
URL.revokeObjectURL(prev.previewUrl);
|
||||
}
|
||||
return {
|
||||
...prev,
|
||||
selectedFile: null,
|
||||
previewUrl: '',
|
||||
decodedResult: '',
|
||||
parseError: '',
|
||||
};
|
||||
});
|
||||
}, []);
|
||||
|
||||
return {
|
||||
mode,
|
||||
setMode,
|
||||
generatorState: fullGeneratorState,
|
||||
setTextToEncode,
|
||||
parseQrCode,
|
||||
downloadQrCode,
|
||||
copyQrCode,
|
||||
parserState,
|
||||
setParserState,
|
||||
handleFileChange,
|
||||
handleClearFile,
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,55 @@
|
||||
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';
|
||||
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') },
|
||||
];
|
||||
|
||||
return (
|
||||
<QrCodeContext.Provider value={qrCode}>
|
||||
{/* 💡 统一视觉规范大超进化：
|
||||
- 彻底剥离破坏流式宽度的 max-w-[400px] 枷锁，开启标准的 w-full 全自适应包裹。
|
||||
- 替换为标准的 p-4 呼吸内边距配合 flex flex-col space-y-4，接管系统级重排！
|
||||
*/}
|
||||
<div className="p-4 w-full flex flex-col space-y-4 min-h-[500px] select-none">
|
||||
{/* 流式中央控制切流卡：注入 sm 断点防御，防范单栏状态下发生变形 */}
|
||||
<div className="w-full sm:w-fit pt-0.5">
|
||||
<SwitchButtonGroup
|
||||
value={qrCode.mode}
|
||||
options={modeOptions}
|
||||
onChange={qrCode.setMode}
|
||||
size="small"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 💡 面板渲染沙箱：
|
||||
- 在切流渲染时，利用独立的 mt-2 增加纵深边界线。
|
||||
- 配合内部自带的双翼 Flex 聚焦大边框，形成坚固如铁的架构闭环！
|
||||
*/}
|
||||
<div className="w-full pt-1.5">
|
||||
{qrCode.mode === 'generate' ? (
|
||||
<div>
|
||||
<GeneratePanel />
|
||||
</div>
|
||||
) : (
|
||||
<div>
|
||||
<ParsePanel />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</QrCodeContext.Provider>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
/**
|
||||
* 二维码工具页面的状态类型定义
|
||||
*/
|
||||
|
||||
/** 二维码功能核心主路由模式 */
|
||||
export type QrCodeMode = 'generate' | 'parse';
|
||||
|
||||
/** * 二维码生成器的状态
|
||||
* 💡 架构优化：保留与全局 Context 骨架契合的形态，
|
||||
* 外部依然可以流畅读取这些状态，但在新架构下运行效率和稳定性大幅提升！
|
||||
*/
|
||||
export interface QrCodeGeneratorState {
|
||||
/** 受控的输入源文本（支持 URL 或任意文本快照） */
|
||||
textToEncode: string;
|
||||
/** 由防抖源文本流在单次渲染内存中同步派生出的二维码 Base64 Data URL */
|
||||
qrCodeDataUrl: string;
|
||||
/** 是否正在生成（流式架构下已默认为恒定 false 的非阻塞快照，保留作为 UI 骨架兼容） */
|
||||
generating: boolean;
|
||||
/** 输入文本校验或底层画布崩溃的错误提示信息 */
|
||||
inputError: string;
|
||||
}
|
||||
|
||||
/** * 二维码解析器的状态
|
||||
* 反向活态图片读取终端的流式驱动核心
|
||||
*/
|
||||
export interface QrCodeParserState {
|
||||
/** 解析解密出的原始文本结果 */
|
||||
decodedResult: string;
|
||||
/** 异步文件系统/画布读取时的后台线程状态锁 */
|
||||
parsing: boolean;
|
||||
/** 图像由于残缺、无矩阵或非标准二维码引发的解析错误信息 */
|
||||
parseError: string;
|
||||
/** 当前被拖拽、粘贴或点击选中的 File 原生文件句柄 */
|
||||
selectedFile: File | null;
|
||||
/** 内存沙箱级别的原生 Blob/File 图片临时预览虚拟 URL */
|
||||
previewUrl: string;
|
||||
/** 用户鼠标拖拽文件在边界内滑移悬停的活态状态大闸 */
|
||||
dragging: boolean;
|
||||
}
|
||||
@@ -0,0 +1,38 @@
|
||||
import { render, screen, fireEvent } from '@testing-library/react';
|
||||
import { describe, it, expect, vi, beforeEach } from 'vitest';
|
||||
import RightClickRestorerPage from '../index';
|
||||
|
||||
const mockUnlock = vi.fn();
|
||||
|
||||
vi.mock('../useRightClickRestorer', () => ({
|
||||
useRightClickRestorer: () => ({
|
||||
domain: 'example.com',
|
||||
isLoading: false,
|
||||
isUnlocked: false,
|
||||
isUnsupported: false,
|
||||
unlock: mockUnlock,
|
||||
}),
|
||||
}));
|
||||
|
||||
describe('RightClickRestorerPage', () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
it('should render current domain', () => {
|
||||
render(<RightClickRestorerPage />);
|
||||
expect(screen.getByText(/example\.com/)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render locked status', () => {
|
||||
render(<RightClickRestorerPage />);
|
||||
expect(screen.getByText(/未解锁/)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should call unlock when button clicked', () => {
|
||||
render(<RightClickRestorerPage />);
|
||||
const button = screen.getByRole('button');
|
||||
fireEvent.click(button);
|
||||
expect(mockUnlock).toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,92 @@
|
||||
import { renderHook, act, waitFor } from '@testing-library/react';
|
||||
import { useRightClickRestorer } from '../useRightClickRestorer';
|
||||
import { sendMessageToContent } from '@/utils/messages';
|
||||
|
||||
const mockTabsQuery = vi.fn();
|
||||
|
||||
vi.mock('@/utils/messages', () => ({
|
||||
MessageAction: {
|
||||
RESTORE_RIGHT_CLICK: 'restoreRightClick',
|
||||
QUERY_RIGHT_CLICK_STATUS: 'queryRightClickStatus',
|
||||
},
|
||||
sendMessageToContent: vi.fn(),
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
mockTabsQuery.mockResolvedValue([{ url: 'https://example.com/path' }]);
|
||||
chrome.tabs.query = mockTabsQuery;
|
||||
vi.mocked(sendMessageToContent).mockResolvedValue({ success: true, restored: false });
|
||||
});
|
||||
|
||||
describe('useRightClickRestorer', () => {
|
||||
it('should load domain and query status', async () => {
|
||||
const { result } = renderHook(() => 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(sendMessageToContent).toHaveBeenCalledWith('queryRightClickStatus');
|
||||
});
|
||||
|
||||
it('should mark internal pages as unsupported', async () => {
|
||||
mockTabsQuery.mockResolvedValue([{ url: 'chrome://newtab/' }]);
|
||||
chrome.tabs.query = mockTabsQuery;
|
||||
|
||||
const { result } = renderHook(() => useRightClickRestorer());
|
||||
|
||||
await waitFor(() => expect(result.current.isLoading).toBe(false));
|
||||
|
||||
expect(result.current.isUnsupported).toBe(true);
|
||||
expect(result.current.isUnlocked).toBe(false);
|
||||
expect(sendMessageToContent).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should unlock right click', async () => {
|
||||
vi.mocked(sendMessageToContent).mockResolvedValueOnce({ success: true, restored: false });
|
||||
vi.mocked(sendMessageToContent).mockResolvedValueOnce({ success: true, restored: true });
|
||||
|
||||
const { result } = renderHook(() => useRightClickRestorer());
|
||||
|
||||
await waitFor(() => expect(result.current.isLoading).toBe(false));
|
||||
|
||||
await act(async () => {
|
||||
await result.current.unlock();
|
||||
});
|
||||
|
||||
expect(result.current.isUnlocked).toBe(true);
|
||||
expect(sendMessageToContent).toHaveBeenLastCalledWith('restoreRightClick');
|
||||
});
|
||||
|
||||
it('should not unlock unsupported pages', async () => {
|
||||
mockTabsQuery.mockResolvedValue([{ url: 'chrome://settings/' }]);
|
||||
chrome.tabs.query = mockTabsQuery;
|
||||
|
||||
const { result } = renderHook(() => useRightClickRestorer());
|
||||
|
||||
await waitFor(() => expect(result.current.isLoading).toBe(false));
|
||||
|
||||
await act(async () => {
|
||||
await result.current.unlock();
|
||||
});
|
||||
|
||||
expect(result.current.isUnlocked).toBe(false);
|
||||
expect(sendMessageToContent).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should handle sendMessage failure gracefully', async () => {
|
||||
vi.mocked(sendMessageToContent).mockRejectedValue(new Error('Connection failed'));
|
||||
|
||||
const { result } = renderHook(() => useRightClickRestorer());
|
||||
|
||||
await waitFor(() => expect(result.current.isLoading).toBe(false));
|
||||
|
||||
await act(async () => {
|
||||
await result.current.unlock();
|
||||
});
|
||||
|
||||
expect(result.current.isUnlocked).toBe(false);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,85 @@
|
||||
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 { useRightClickRestorer } from './useRightClickRestorer';
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
|
||||
export default function RightClickRestorerPage() {
|
||||
const { t } = useI18n('rightClickRestorer');
|
||||
const { domain, isLoading, isUnlocked, isUnsupported, unlock } = useRightClickRestorer();
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center py-12 min-h-[280px] w-full">
|
||||
<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>
|
||||
|
||||
{/* 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>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,90 @@
|
||||
import { useCallback, 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;
|
||||
}
|
||||
}
|
||||
|
||||
export interface UseRightClickRestorerReturn {
|
||||
domain: string;
|
||||
isLoading: boolean;
|
||||
isUnlocked: boolean;
|
||||
isUnsupported: boolean;
|
||||
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);
|
||||
|
||||
useEffect(() => {
|
||||
const load = async () => {
|
||||
try {
|
||||
const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
|
||||
const url = tab?.url;
|
||||
|
||||
if (url) {
|
||||
try {
|
||||
setDomain(new URL(url).hostname);
|
||||
} catch {
|
||||
setDomain('');
|
||||
}
|
||||
}
|
||||
|
||||
if (isUnsupportedPage(url)) {
|
||||
setIsUnsupported(true);
|
||||
setIsLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
const response = await sendMessageToContent(MessageAction.QUERY_RIGHT_CLICK_STATUS);
|
||||
if (response?.success) {
|
||||
setIsUnlocked(response.restored);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('[RightClickRestorer] Failed to load state:', err);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
void load();
|
||||
}, []);
|
||||
|
||||
const unlock = useCallback(async () => {
|
||||
if (isUnsupported) return;
|
||||
|
||||
try {
|
||||
const response = await sendMessageToContent(MessageAction.RESTORE_RIGHT_CLICK);
|
||||
if (response?.success) {
|
||||
setIsUnlocked(response.restored);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('[RightClickRestorer] Failed to unlock:', err);
|
||||
}
|
||||
}, [isUnsupported]);
|
||||
|
||||
return {
|
||||
domain,
|
||||
isLoading,
|
||||
isUnlocked,
|
||||
isUnsupported,
|
||||
unlock,
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,67 @@
|
||||
/**
|
||||
* 自动刷新开关组件
|
||||
*
|
||||
* 用于 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';
|
||||
|
||||
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(
|
||||
'w-full p-4 rounded-xl border border-border bg-card text-card-foreground shadow-sm flex justify-between items-center',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{/* Label 与 Switch 通过 htmlFor + id 关联，支持点击文字触发开关 */}
|
||||
<Label
|
||||
htmlFor="auto-refresh-switch"
|
||||
className="text-sm font-bold text-foreground cursor-pointer select-none tracking-tight"
|
||||
>
|
||||
{t('storageCleaner:autoRefresh')}
|
||||
</Label>
|
||||
|
||||
<Switch id="auto-refresh-switch" checked={reloadAfterClean} onCheckedChange={onChange} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,50 @@
|
||||
import React from 'react';
|
||||
import { CheckCircle, XCircle } from 'lucide-react';
|
||||
import type { CleaningResult as CleaningResultType } from '@/types/storage';
|
||||
import { formatCleaningResult } from '@/utils/storageCleaner';
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
import { cn } from '@/lib/utils'; // 1. 引入 shadcn 核心类名合并工具
|
||||
|
||||
interface CleaningResultProps extends React.HTMLAttributes<HTMLDivElement> {
|
||||
result: CleaningResultType | null;
|
||||
}
|
||||
|
||||
export default function CleaningResult({ result, className, ...props }: CleaningResultProps) {
|
||||
const { t } = useI18n('storageCleaner');
|
||||
|
||||
if (!result) return null;
|
||||
|
||||
const isSuccess = result.success;
|
||||
|
||||
return (
|
||||
<div className={cn('w-full', className)} {...props}>
|
||||
{/* 2. 彻底重构容器类名结构：
|
||||
- 成功状态：采用 Tailwind 官方推荐的 emerald 体系，利用 /10 (10% 透明度) 和 /20 (边框)。
|
||||
- 失败状态：完全放权给标准的 border-destructive/20 和 bg-destructive/5。
|
||||
- 这样在明暗双色模式切换时，色彩会自动与背景完美融为一体。
|
||||
*/}
|
||||
<div
|
||||
className={cn(
|
||||
'flex items-start gap-3 rounded-xl py-2.5 px-3.5 border shadow-sm',
|
||||
isSuccess
|
||||
? 'bg-emerald-500/5 border-emerald-500/20 text-emerald-600 dark:text-emerald-400'
|
||||
: 'bg-destructive/5 border-destructive/20 text-destructive',
|
||||
)}
|
||||
>
|
||||
{/* 3. 图标样式向系统语义全面对齐 */}
|
||||
{isSuccess ? (
|
||||
<CheckCircle className="h-4 w-4 shrink-0 mt-0.5 text-emerald-500" />
|
||||
) : (
|
||||
<XCircle className="h-4 w-4 shrink-0 mt-0.5 text-destructive" />
|
||||
)}
|
||||
|
||||
{/* 4. 文本排版细节微调 */}
|
||||
<span className="text-xs sm:text-sm font-semibold leading-relaxed break-all">
|
||||
{isSuccess
|
||||
? formatCleaningResult(result, t)
|
||||
: result.error || t('storageCleaner:partialFailure')}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
import { AlertCircle } from 'lucide-react';
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
interface ErrorDisplayProps extends React.HTMLAttributes<HTMLDivElement> {
|
||||
error: string;
|
||||
}
|
||||
|
||||
export default function ErrorDisplay({ error, className, ...props }: ErrorDisplayProps) {
|
||||
const { t } = useI18n('storageCleaner');
|
||||
|
||||
return (
|
||||
// 1. 精简层级：单层外壳直接搞定居中、响应式高度与外部类名扩展
|
||||
<div
|
||||
className={cn(
|
||||
'flex flex-col items-center justify-center py-8 min-h-[240px] sm:min-h-[360px] p-4 text-center',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{/* 2. 核心卡片容器：
|
||||
- 彻底放弃 bg-red-50，改用标准的 bg-destructive/5（3%~5% 透明度的系统危险色）。
|
||||
- 边框改为 border-destructive/20。
|
||||
- 这样在黑夜模式下会自动完美混色，绝不刺眼。
|
||||
*/}
|
||||
<div className="w-full max-w-xs flex flex-col items-center justify-center rounded-xl p-5 border border-destructive/20 bg-destructive/5 shadow-sm">
|
||||
{/* 3. 图标与主要错误信息全面对接 text-destructive 语义色 */}
|
||||
<div className="flex h-10 w-10 items-center justify-center rounded-full bg-destructive/10 text-destructive mb-3.5 shrink-0">
|
||||
<AlertCircle className="h-5 w-5" />
|
||||
</div>
|
||||
|
||||
<p className="text-sm font-semibold leading-relaxed text-destructive break-all px-1 mb-2">
|
||||
{error}
|
||||
</p>
|
||||
|
||||
{/* 次要提示文本维持柔和的中性高级灰 */}
|
||||
<p className="text-xs font-medium leading-relaxed text-muted-foreground/90 px-2">
|
||||
{t('storageCleaner:errorStandardOnly')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,81 @@
|
||||
import React from 'react';
|
||||
import { formatSize } from '@/utils/storageCleaner';
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
import { cn } from '@/lib/utils';
|
||||
// 引入官方的 Checkbox 原子组件
|
||||
import { Checkbox } from '@/components/ui/checkbox';
|
||||
|
||||
interface OptionItemProps extends React.HTMLAttributes<HTMLDivElement> {
|
||||
labelKey: string;
|
||||
checked: boolean;
|
||||
size?: number;
|
||||
isCount?: boolean;
|
||||
onChange: () => void;
|
||||
}
|
||||
|
||||
export default function OptionItem({
|
||||
labelKey,
|
||||
checked,
|
||||
size,
|
||||
isCount = false,
|
||||
onChange,
|
||||
className,
|
||||
...props
|
||||
}: OptionItemProps) {
|
||||
const { t } = useI18n('storageCleaner');
|
||||
|
||||
return (
|
||||
<div
|
||||
// 3. 跨越级交互升级：将外部容器升级为一个高度敏感的可点击 Tab 热区
|
||||
onClick={onChange}
|
||||
className={cn(
|
||||
'flex justify-between items-center py-2.5 px-3.5 rounded-xl border cursor-pointer select-none',
|
||||
// 4. 彻底抛弃硬编码黄底：
|
||||
// - 选中时：使用 bg-primary/5 (系统主色超淡叠加) 配合标准 border-primary/30。
|
||||
// - 未选中时：保持透明 border-transparent，悬停呈现 bg-muted。
|
||||
// 这样在暗黑模式下会自动无缝混色，极为深邃、高级。
|
||||
checked
|
||||
? 'bg-primary/5 border-primary/30 shadow-sm'
|
||||
: 'bg-transparent border-transparent hover:bg-muted/70',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{/* 左侧数据区域 */}
|
||||
<div className="flex-1 min-w-0 mr-4">
|
||||
<span
|
||||
className={cn(
|
||||
'block text-xs font-semibold leading-tight truncate',
|
||||
checked ? 'text-foreground font-bold' : 'text-foreground/80',
|
||||
)}
|
||||
>
|
||||
{t(labelKey)}
|
||||
</span>
|
||||
|
||||
{/* 底部容量大小或计数标识 */}
|
||||
{size !== undefined && size > 0 ? (
|
||||
<span className="block text-[10px] font-mono font-medium text-muted-foreground/80 mt-0.5 tabular-nums">
|
||||
{isCount ? `${size} ${t('storageCleaner:countUnit')}` : formatSize(size)}
|
||||
</span>
|
||||
) : (
|
||||
<span className="block text-[10px] font-medium text-muted-foreground/60 mt-0.5 italic">
|
||||
{t('storageCleaner:noData')}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 5. 超进化：全面替换原生 input 标签
|
||||
完美调用 shadcn 的 Checkbox 组件。它自带全站统一的主色（Primary）、
|
||||
打钩选中时的平滑微放大缩放动效（Scale Animation），
|
||||
并且阻止冒泡，防范与外层的全局覆盖点击事件产生双重冲突。
|
||||
*/}
|
||||
<Checkbox
|
||||
checked={checked}
|
||||
// 阻止 Checkbox 自身的点击事件冒泡，因为外层 div 已经代理了点击逻辑
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
onCheckedChange={onChange}
|
||||
className="h-4 w-4 shrink-0 rounded border-input data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,110 @@
|
||||
import { Button } from '@/components/ui/button';
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from '@/components/ui/dialog';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { AlertTriangle } from 'lucide-react';
|
||||
import type { StorageCleanerOptions } from '@/types/storage';
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
export interface StorageCleanerConfirmProps {
|
||||
open: boolean;
|
||||
onClose: () => void;
|
||||
onConfirm: () => void;
|
||||
options: StorageCleanerOptions;
|
||||
}
|
||||
|
||||
export function StorageCleanerConfirm({
|
||||
open,
|
||||
onClose,
|
||||
onConfirm,
|
||||
options,
|
||||
}: StorageCleanerConfirmProps) {
|
||||
const { t } = useI18n('storageCleaner');
|
||||
|
||||
const selectedOptions = Object.entries(options)
|
||||
.filter(([_, value]) => value)
|
||||
.map(([key, _]) => t(`storageCleaner:options.${key as keyof StorageCleanerOptions}`));
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={(isOpen) => !isOpen && onClose()}>
|
||||
{/* 💡 终极修复秘诀：
|
||||
- 移除原来的 sm:max-w-[360px]，改用 max-w-[calc(100%-32px)] 或者是 w-[88%]。
|
||||
- 这样无论插件弹窗多窄，它的左右两侧都必然会被强制挤出至少 16px 的完美空白护边！
|
||||
- 将 p-5 转换为明确的 p-6，增大弹窗内部的呼吸感。
|
||||
*/}
|
||||
<DialogContent
|
||||
className={cn(
|
||||
'w-[90%] max-w-[340px] p-6 gap-0 rounded-2xl overflow-hidden shadow-xl border border-border bg-card text-card-foreground',
|
||||
)}
|
||||
>
|
||||
{/* 头部标题区域 */}
|
||||
<DialogHeader className="pt-1">
|
||||
<DialogTitle className="text-center text-lg font-bold tracking-tight text-foreground">
|
||||
{t('storageCleaner:confirmTitle')}
|
||||
</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
{/* 内容主体：限制最大宽度，防止内部元素在大分辨率下被横向拉得太松散 */}
|
||||
<div className="text-center py-4 flex flex-col items-center w-full max-w-[280px] mx-auto">
|
||||
<DialogDescription className="mb-4 text-xs font-medium text-muted-foreground/90 leading-relaxed">
|
||||
{t('storageCleaner:confirmDesc')}
|
||||
</DialogDescription>
|
||||
|
||||
{/* 待清理项目徽章群 */}
|
||||
<div className="flex flex-wrap gap-1.5 justify-center mb-5 w-full">
|
||||
{selectedOptions.map((label) => (
|
||||
<Badge
|
||||
key={label}
|
||||
variant="secondary"
|
||||
className="px-2.5 py-0.5 text-[11px] font-semibold border border-border/40 select-none bg-muted/60"
|
||||
>
|
||||
{label}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* 风险警告横幅 */}
|
||||
<div className="inline-flex items-center justify-center gap-1.5 px-3.5 py-2 rounded-lg bg-destructive/5 border border-dashed border-destructive/20 w-full max-w-[240px]">
|
||||
<AlertTriangle className="h-3.5 w-3.5 text-destructive shrink-0" />
|
||||
<span className="text-[11px] font-bold text-destructive leading-none tracking-tight">
|
||||
{t('storageCleaner:irreversible')}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 底部操作按钮区：
|
||||
💡 修复要点：
|
||||
- 增加 pt-2 隔开上方危险条。
|
||||
- 显式通过 w-full 配合 flex-col 铺满，在移动端/窄插件下垂直堆叠，最符合小屏直觉。
|
||||
*/}
|
||||
<DialogFooter className="flex flex-col gap-2 w-full pt-2">
|
||||
<Button
|
||||
variant="destructive"
|
||||
size="sm"
|
||||
onClick={onConfirm}
|
||||
className="w-full text-xs font-bold shadow-sm h-9"
|
||||
>
|
||||
{t('storageCleaner:confirmAction')}
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={onClose}
|
||||
className="w-full text-xs font-semibold shadow-sm h-9 text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
{t('common_buttons_cancel')}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
||||
export default StorageCleanerConfirm;
|
||||
@@ -0,0 +1,98 @@
|
||||
import React from 'react';
|
||||
import type { StorageCleanerOptions } from '@/types/storage';
|
||||
import OptionItem from './OptionItem';
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
import { cn } from '@/lib/utils';
|
||||
// 1. 引入官方标准的 Checkbox 原子组件
|
||||
import { Checkbox } from '@/components/ui/checkbox';
|
||||
import { Label } from '@/components/ui/label';
|
||||
|
||||
interface StorageOptionsGridProps extends React.HTMLAttributes<HTMLDivElement> {
|
||||
options: StorageCleanerOptions;
|
||||
sizes: Record<string, number>;
|
||||
allSelected: boolean;
|
||||
someSelected: boolean; // 重新激活半选状态
|
||||
onOptionChange: (key: keyof StorageCleanerOptions) => void;
|
||||
onSelectAll: (checked: boolean) => void;
|
||||
}
|
||||
|
||||
export default function StorageOptionsGrid({
|
||||
options,
|
||||
sizes,
|
||||
allSelected,
|
||||
someSelected,
|
||||
onOptionChange,
|
||||
onSelectAll,
|
||||
className,
|
||||
...props
|
||||
}: StorageOptionsGridProps) {
|
||||
const { t } = useI18n('storageCleaner');
|
||||
|
||||
const optionKeys: { key: keyof StorageCleanerOptions; isCount?: boolean }[] = [
|
||||
{ key: 'localStorage' },
|
||||
{ key: 'sessionStorage' },
|
||||
{ key: 'indexedDB' },
|
||||
{ key: 'cookies' },
|
||||
{ key: 'cacheStorage', isCount: true },
|
||||
{ key: 'serviceWorkers', isCount: true },
|
||||
];
|
||||
|
||||
// 2. 处理全选栏点击事件：包裹整个栏变成超级热区
|
||||
const handleToggleAll = () => {
|
||||
// 如果当前已经是全选，点击则取消全选；否则，点击就是全选
|
||||
onSelectAll(!allSelected);
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
'w-full rounded-xl border border-border bg-card text-card-foreground shadow-sm overflow-hidden',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{/* 核心网格区 */}
|
||||
<div className="p-3">
|
||||
{/* 💡 优化点：加入 items-stretch，确保左右卡片高度绝对对齐 */}
|
||||
<div className="grid grid-cols-2 gap-2.5 items-stretch">
|
||||
{optionKeys.map(({ key, isCount }) => (
|
||||
/* 💡 终极修复：直接把 key 挂在 OptionItem 上，移除了无意义的包裹 div */
|
||||
<OptionItem
|
||||
key={key}
|
||||
labelKey={`storageCleaner:options.${key}`}
|
||||
checked={options[key]}
|
||||
size={sizes[key]}
|
||||
isCount={isCount}
|
||||
onChange={() => onOptionChange(key)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 3. 全选功能底护栏超进化：
|
||||
- 整体赋予 cursor-pointer 和 onClick，点击一整行都能触发全选。
|
||||
- 悬停时自动变色提示可点击 (hover:bg-muted/50)。
|
||||
*/}
|
||||
<div
|
||||
onClick={handleToggleAll}
|
||||
className="border-t border-border flex justify-between items-center px-4 py-2.5 bg-muted/20 hover:bg-muted/50 cursor-pointer select-none"
|
||||
>
|
||||
<Label className="text-xs font-bold text-muted-foreground/90 cursor-pointer">
|
||||
{t('storageCleaner:selectAll')}
|
||||
</Label>
|
||||
|
||||
{/* 4. 降维打击：调用标准的 shadcn/ui Checkbox
|
||||
- 阻止冒泡：防止事件重复触发。
|
||||
- 完美注入半选逻辑：当 allSelected 为 false 但 someSelected 为 true 时，
|
||||
组件会自动呈现优雅的 "—" (减号) 半选视觉状态，向主流系统控制台高标准看齐！
|
||||
*/}
|
||||
<Checkbox
|
||||
checked={allSelected ? true : someSelected ? 'indeterminate' : false}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
onCheckedChange={(checked) => onSelectAll(checked === true)}
|
||||
className="h-4 w-4 shrink-0 rounded border-input data-[state=checked]:bg-primary data-[state=indeterminate]:bg-primary"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,92 @@
|
||||
import { Loader2 } from 'lucide-react'; // 引入标准的高级阻尼 Spinner 图标
|
||||
import { Button } from '@/components/ui/button';
|
||||
import StorageCleanerConfirm from '@/pages/StorageCleaner/StorageCleanerConfirm';
|
||||
import { useStorageCleaner } from './useStorageCleaner';
|
||||
import StorageOptionsGrid from './StorageOptionsGrid';
|
||||
import AutoRefreshToggle from './AutoRefreshToggle';
|
||||
import ErrorDisplay from './ErrorDisplay';
|
||||
import CleaningResult from './CleaningResult';
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
|
||||
export default function Index() {
|
||||
const { t } = useI18n('storageCleaner');
|
||||
|
||||
const {
|
||||
error,
|
||||
isInitializing,
|
||||
options,
|
||||
sizes,
|
||||
reloadAfterClean,
|
||||
loading,
|
||||
result,
|
||||
showConfirm,
|
||||
setShowConfirm,
|
||||
allSelected,
|
||||
someSelected,
|
||||
handleReloadAfterCleanChange,
|
||||
handleOptionChange,
|
||||
handleSelectAll,
|
||||
handleClean,
|
||||
} = useStorageCleaner();
|
||||
|
||||
const isButtonDisabled = !(someSelected || allSelected) || loading;
|
||||
|
||||
if (isInitializing) {
|
||||
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" />
|
||||
<span className="text-xs text-muted-foreground mt-2 font-medium tracking-wide">
|
||||
{t('storageCleaner:initializing')}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return <ErrorDisplay error={error} />;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="p-4 w-full flex flex-col space-y-3.5">
|
||||
<StorageOptionsGrid
|
||||
options={options}
|
||||
sizes={sizes}
|
||||
allSelected={allSelected}
|
||||
someSelected={someSelected}
|
||||
onOptionChange={handleOptionChange}
|
||||
onSelectAll={handleSelectAll}
|
||||
/>
|
||||
|
||||
<AutoRefreshToggle
|
||||
reloadAfterClean={reloadAfterClean}
|
||||
onChange={handleReloadAfterCleanChange}
|
||||
/>
|
||||
|
||||
<Button
|
||||
variant="destructive"
|
||||
size="default"
|
||||
onClick={() => setShowConfirm(true)}
|
||||
disabled={isButtonDisabled}
|
||||
className="w-full h-10 font-bold shadow-sm text-sm tracking-wide"
|
||||
>
|
||||
{loading ? (
|
||||
<>
|
||||
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||
{t('storageCleaner:cleaning')}
|
||||
</>
|
||||
) : (
|
||||
t('storageCleaner:cleanNow')
|
||||
)}
|
||||
</Button>
|
||||
|
||||
<CleaningResult result={result} />
|
||||
|
||||
<StorageCleanerConfirm
|
||||
open={showConfirm}
|
||||
onClose={() => setShowConfirm(false)}
|
||||
onConfirm={handleClean}
|
||||
options={options}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,269 @@
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
||||
import { storageUtil } from '@/utils/chromeStorage';
|
||||
import type {
|
||||
CleaningResult,
|
||||
StorageCleanerOptions,
|
||||
StorageCleanerPreferences,
|
||||
} from '@/types/storage';
|
||||
import {
|
||||
clearStorage,
|
||||
getCacheStorageSize,
|
||||
getCookieSize,
|
||||
getCurrentTab,
|
||||
getLocalStorageSize,
|
||||
getOriginStorageEstimate,
|
||||
getServiceWorkerCount,
|
||||
getSessionStorageSize,
|
||||
isRestrictedUrl,
|
||||
} from '@/utils/storageCleaner';
|
||||
import { MessageAction, sendMessage } from '@/utils/messages';
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
import { toast } from 'sonner'; // 1. 直接引用 shadcn 推荐的 Sonner 单例通知，踢出回调依赖
|
||||
|
||||
const DEFAULT_OPTIONS: StorageCleanerOptions = {
|
||||
localStorage: true,
|
||||
sessionStorage: true,
|
||||
indexedDB: true,
|
||||
cookies: true,
|
||||
cacheStorage: true,
|
||||
serviceWorkers: true,
|
||||
};
|
||||
|
||||
const DEFAULT_PREFERENCES: StorageCleanerPreferences = {
|
||||
reloadAfterClean: true,
|
||||
selectedTypes: DEFAULT_OPTIONS,
|
||||
};
|
||||
|
||||
export interface UseStorageCleanerReturn {
|
||||
domain: string;
|
||||
error: string;
|
||||
isInitializing: boolean;
|
||||
options: StorageCleanerOptions;
|
||||
sizes: Record<string, number>;
|
||||
reloadAfterClean: boolean;
|
||||
loading: boolean;
|
||||
result: CleaningResult | null;
|
||||
showConfirm: boolean;
|
||||
setShowConfirm: (show: boolean) => void;
|
||||
totalSize: number;
|
||||
allSelected: boolean;
|
||||
someSelected: boolean;
|
||||
|
||||
handleReloadAfterCleanChange: (checked: boolean) => void;
|
||||
handleOptionChange: (key: keyof StorageCleanerOptions) => void;
|
||||
handleSelectAll: (checked: boolean) => void;
|
||||
handleClean: () => Promise<void>;
|
||||
}
|
||||
|
||||
export function useStorageCleaner(): UseStorageCleanerReturn {
|
||||
const { t } = useI18n(['storageCleaner', 'common']);
|
||||
const [domain, setDomain] = useState<string>('');
|
||||
const [error, setError] = useState<string>('');
|
||||
const [isInitializing, setIsInitializing] = useState<boolean>(true);
|
||||
const [options, setOptions] = useState<StorageCleanerOptions>(DEFAULT_OPTIONS);
|
||||
const [sizes, setSizes] = useState<Record<string, number>>({});
|
||||
const [reloadAfterClean, setReloadAfterClean] = useState<boolean>(true);
|
||||
const [loading, setLoading] = useState<boolean>(false);
|
||||
const [result, setResult] = useState<CleaningResult | null>(null);
|
||||
const [showConfirm, setShowConfirm] = useState<boolean>(false);
|
||||
|
||||
const requestIdRef = useRef<number>(0);
|
||||
const debounceTimerRef = useRef<NodeJS.Timeout | null>(null);
|
||||
const storageTimerRef = useRef<NodeJS.Timeout | null>(null);
|
||||
const loadingRef = useRef(loading);
|
||||
|
||||
useEffect(() => {
|
||||
loadingRef.current = loading;
|
||||
}, [loading]);
|
||||
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
if (debounceTimerRef.current) clearTimeout(debounceTimerRef.current);
|
||||
if (storageTimerRef.current) clearTimeout(storageTimerRef.current);
|
||||
};
|
||||
}, []);
|
||||
|
||||
// 核心数据拉取链条
|
||||
const loadInfo = useCallback(async () => {
|
||||
const currentRequestId = ++requestIdRef.current;
|
||||
try {
|
||||
const tab = await getCurrentTab();
|
||||
if (currentRequestId !== requestIdRef.current) return;
|
||||
|
||||
if (!tab || !tab.url) {
|
||||
setError(t('storageCleaner:errorNoTab'));
|
||||
return;
|
||||
}
|
||||
if (isRestrictedUrl(tab.url)) {
|
||||
setError(t('storageCleaner:errorRestricted'));
|
||||
return;
|
||||
}
|
||||
|
||||
setError('');
|
||||
const url = tab.url;
|
||||
const tabId = tab.id!;
|
||||
setDomain(new URL(url).hostname);
|
||||
|
||||
const [savedPrefs, cSize, lsSize, ssSize, idbSize, cacheCount, swCount] = await Promise.all([
|
||||
storageUtil.get('storageCleaner/preferences', DEFAULT_PREFERENCES),
|
||||
getCookieSize(url),
|
||||
getLocalStorageSize(tabId),
|
||||
getSessionStorageSize(tabId),
|
||||
getOriginStorageEstimate(tabId),
|
||||
getCacheStorageSize(tabId),
|
||||
getServiceWorkerCount(tabId),
|
||||
]);
|
||||
|
||||
if (currentRequestId !== requestIdRef.current) return;
|
||||
|
||||
if (savedPrefs) {
|
||||
setReloadAfterClean(savedPrefs.reloadAfterClean ?? DEFAULT_PREFERENCES.reloadAfterClean);
|
||||
setOptions(savedPrefs.selectedTypes ?? DEFAULT_PREFERENCES.selectedTypes);
|
||||
}
|
||||
|
||||
setSizes({
|
||||
cookies: cSize,
|
||||
localStorage: lsSize,
|
||||
sessionStorage: ssSize,
|
||||
indexedDB: idbSize,
|
||||
cacheStorage: cacheCount,
|
||||
serviceWorkers: swCount,
|
||||
});
|
||||
} finally {
|
||||
if (currentRequestId === requestIdRef.current) {
|
||||
setIsInitializing(false);
|
||||
}
|
||||
}
|
||||
}, [t]);
|
||||
|
||||
const loadInfoRef = useRef(loadInfo);
|
||||
useEffect(() => {
|
||||
loadInfoRef.current = loadInfo;
|
||||
});
|
||||
|
||||
const debouncedLoadInfo = useCallback(() => {
|
||||
if (debounceTimerRef.current) clearTimeout(debounceTimerRef.current);
|
||||
debounceTimerRef.current = setTimeout(() => {
|
||||
loadInfoRef.current().catch(console.error);
|
||||
}, 300);
|
||||
}, []);
|
||||
|
||||
// 监听浏览器标签行为
|
||||
useEffect(() => {
|
||||
loadInfoRef.current().catch(console.error);
|
||||
|
||||
const handleTabChange = () => debouncedLoadInfo();
|
||||
const handleTabUpdated = (_tabId: number, changeInfo: { status?: string; url?: string }) => {
|
||||
if (changeInfo.status === 'complete' || changeInfo.url) {
|
||||
debouncedLoadInfo();
|
||||
}
|
||||
};
|
||||
|
||||
chrome.tabs.onActivated.addListener(handleTabChange);
|
||||
chrome.tabs.onUpdated.addListener(handleTabUpdated);
|
||||
chrome.windows.onFocusChanged.addListener(handleTabChange);
|
||||
|
||||
return () => {
|
||||
chrome.tabs.onActivated.removeListener(handleTabChange);
|
||||
chrome.tabs.onUpdated.removeListener(handleTabUpdated);
|
||||
chrome.windows.onFocusChanged.removeListener(handleTabChange);
|
||||
};
|
||||
}, [debouncedLoadInfo]);
|
||||
|
||||
useEffect(() => {
|
||||
if (isInitializing) return;
|
||||
|
||||
if (storageTimerRef.current) clearTimeout(storageTimerRef.current);
|
||||
storageTimerRef.current = setTimeout(async () => {
|
||||
await storageUtil
|
||||
.set('storageCleaner/preferences', {
|
||||
reloadAfterClean,
|
||||
selectedTypes: options,
|
||||
})
|
||||
.catch(console.error);
|
||||
}, 500);
|
||||
}, [options, reloadAfterClean, isInitializing]);
|
||||
|
||||
const handleReloadAfterCleanChange = useCallback((checked: boolean) => {
|
||||
setReloadAfterClean(checked);
|
||||
}, []);
|
||||
|
||||
const handleOptionChange = useCallback((key: keyof StorageCleanerOptions) => {
|
||||
setOptions((prev) => ({ ...prev, [key]: !prev[key] }));
|
||||
}, []);
|
||||
|
||||
const handleSelectAll = useCallback((checked: boolean) => {
|
||||
setOptions({
|
||||
localStorage: checked,
|
||||
sessionStorage: checked,
|
||||
indexedDB: checked,
|
||||
cookies: checked,
|
||||
cacheStorage: checked,
|
||||
serviceWorkers: checked,
|
||||
});
|
||||
}, []);
|
||||
|
||||
const handleClean = useCallback(async () => {
|
||||
if (loadingRef.current) return;
|
||||
|
||||
const tab = await getCurrentTab();
|
||||
if (!tab || !tab.id || !tab.url) {
|
||||
toast.warning(t('storageCleaner:errorNoTab'));
|
||||
return;
|
||||
}
|
||||
|
||||
setLoading(true);
|
||||
try {
|
||||
const cleaningResult = await clearStorage(tab.id, tab.url, options);
|
||||
setResult(cleaningResult);
|
||||
|
||||
if (reloadAfterClean && cleaningResult.success) {
|
||||
toast.success(t('storageCleaner:cleanSuccessReload'));
|
||||
await sendMessage(MessageAction.RELOAD_TAB, { tabId: tab.id, delay: 1000 });
|
||||
} else {
|
||||
await loadInfo();
|
||||
}
|
||||
} catch (err) {
|
||||
toast.error(`${t('storageCleaner:cleanError')}: ${String(err)}`);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
setShowConfirm(false);
|
||||
}
|
||||
}, [options, reloadAfterClean, loadInfo, t]);
|
||||
|
||||
const totalSize = useMemo(() => {
|
||||
return (
|
||||
(sizes.cookies || 0) +
|
||||
(sizes.localStorage || 0) +
|
||||
(sizes.sessionStorage || 0) +
|
||||
(sizes.indexedDB || 0)
|
||||
);
|
||||
}, [sizes]);
|
||||
|
||||
const selectionMetrics = useMemo(() => {
|
||||
const vals = Object.values(options);
|
||||
const all = vals.every(Boolean);
|
||||
const some = vals.some(Boolean) && !all;
|
||||
return { all, some };
|
||||
}, [options]);
|
||||
|
||||
return {
|
||||
domain,
|
||||
error,
|
||||
isInitializing,
|
||||
options,
|
||||
sizes,
|
||||
reloadAfterClean,
|
||||
loading,
|
||||
result,
|
||||
showConfirm,
|
||||
setShowConfirm,
|
||||
totalSize,
|
||||
allSelected: selectionMetrics.all,
|
||||
someSelected: selectionMetrics.some,
|
||||
handleReloadAfterCleanChange,
|
||||
handleOptionChange,
|
||||
handleSelectAll,
|
||||
handleClean,
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,62 @@
|
||||
import { useCallback, useMemo, useState } from 'react';
|
||||
import TextInputArea from '@/components/TextInputArea';
|
||||
import { formatByteSize, getTextStats } from '@/utils/textStatistics';
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
import { useContextMenuData } from '@/utils/useContextMenuData';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
export default function Index() {
|
||||
const { t } = useI18n('textStatistics');
|
||||
const [text, setText] = useState('');
|
||||
|
||||
const handleContextMenuData = useCallback((payload: string) => {
|
||||
setText(payload);
|
||||
}, []);
|
||||
|
||||
useContextMenuData({ featureKey: 'textStatistics', onData: handleContextMenuData });
|
||||
|
||||
// 实时计算统计信息，由 useMemo 拦截非必要计算
|
||||
const stats = useMemo(() => getTextStats(text), [text]);
|
||||
|
||||
const statItems = [
|
||||
{ label: t('textStatistics:characters'), value: stats.characters },
|
||||
{ label: t('textStatistics:words'), value: stats.words },
|
||||
{ label: t('textStatistics:lines'), value: stats.lines },
|
||||
{ label: t('textStatistics:bytes'), value: formatByteSize(stats.bytes) },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="p-4 w-full space-y-4">
|
||||
{/* 文本输入区域 */}
|
||||
<TextInputArea
|
||||
value={text}
|
||||
onChange={setText}
|
||||
placeholder={t('textStatistics:placeholder')}
|
||||
minRows={10}
|
||||
maxRows={18}
|
||||
showClear={true}
|
||||
allowCopy={true}
|
||||
/>
|
||||
|
||||
{/* 统计结果展示区域 */}
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-3">
|
||||
{statItems.map((item) => (
|
||||
<div
|
||||
key={item.label}
|
||||
className={cn(
|
||||
'flex flex-col justify-center items-center p-4 text-center rounded-xl border border-border bg-card shadow-sm text-card-foreground',
|
||||
'hover:-translate-y-0.5 hover:shadow-md hover:border-primary/50 focus-within:ring-1 focus-within:ring-ring',
|
||||
)}
|
||||
>
|
||||
<span className="text-xs font-medium text-muted-foreground tracking-wider mb-1 select-none">
|
||||
{item.label}
|
||||
</span>
|
||||
<span className="font-mono text-lg md:text-2xl font-extrabold text-primary break-all tracking-tight leading-none tabular-nums select-all">
|
||||
{item.value}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,99 @@
|
||||
import React, { useCallback, useEffect, useRef, useState } from 'react';
|
||||
import { Clock } from 'lucide-react';
|
||||
import CopyButton from '@/components/CopyButton';
|
||||
import { useSnackbar } from '@/components/GlobalSnackbar';
|
||||
import type { UnitType } from './constants';
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
import { cn } from '@/lib/utils'; // 引入标准的 shadcn 工具函数
|
||||
|
||||
interface LiveClockProps extends React.HTMLAttributes<HTMLDivElement> {
|
||||
unit: UnitType;
|
||||
onUseNow: (val: number) => void;
|
||||
}
|
||||
|
||||
const LiveClock = React.memo(({ unit, onUseNow, className, ...props }: LiveClockProps) => {
|
||||
const { t } = useI18n('timestamp');
|
||||
const { showMessage } = useSnackbar();
|
||||
const onUseNowRef = useRef(onUseNow);
|
||||
|
||||
// 1. 采用毫秒/秒的双态原子计数，避免无意义的重绘
|
||||
const [currentDisplay, setCurrentDisplay] = useState(() => {
|
||||
const initNow = Date.now();
|
||||
return {
|
||||
rawTime: initNow,
|
||||
text: String(Math.floor(initNow / (unit === 'ms' ? 1 : 1000))),
|
||||
};
|
||||
});
|
||||
|
||||
// 始终保持外部回调指针最新
|
||||
useEffect(() => {
|
||||
onUseNowRef.current = onUseNow;
|
||||
}, [onUseNow]);
|
||||
|
||||
// 2. 高频高灵敏度计时器 (200ms 刷新率)
|
||||
useEffect(() => {
|
||||
const tick = () => {
|
||||
const rightNow = Date.now();
|
||||
const nextText = String(Math.floor(rightNow / (unit === 'ms' ? 1 : 1000)));
|
||||
|
||||
// 性能核心：只有当生成的文本内容发生变化时，才触发 React 的 State 更新。
|
||||
// 在“秒(s)”单位下，这可以让组件的渲染频率暴跌 90%，做到极度省电和高性能。
|
||||
setCurrentDisplay((prev) => {
|
||||
if (prev.text === nextText) return prev;
|
||||
return { rawTime: rightNow, text: nextText };
|
||||
});
|
||||
};
|
||||
|
||||
// 200ms 的高速低延迟轮询，比 1000ms 更具响应灵敏度，且因为上面有过滤，完全不用担心引发性能损耗
|
||||
const tickId = setInterval(tick, 200);
|
||||
return () => clearInterval(tickId);
|
||||
}, [unit]);
|
||||
|
||||
const handleUseNow = useCallback(() => {
|
||||
// 捕获真实极其精准的绝对时间戳
|
||||
onUseNowRef.current(currentDisplay.rawTime);
|
||||
showMessage?.(t('timestamp:usedSuccess'), { severity: 'success' });
|
||||
}, [currentDisplay.rawTime, showMessage, t]);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
// 3. 完美适配 shadcn 暗黑模式：
|
||||
// 不再写死 bg-primary/10，改用更高级的 bg-secondary/50 和中性边框，
|
||||
// 在任何主题色下都能表现得低调且极具质感。
|
||||
'flex items-center gap-3 px-3 h-10 rounded-lg border border-border/80 bg-secondary/50',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<span className="text-muted-foreground font-bold text-[10px] uppercase tracking-wider whitespace-nowrap shrink-0 selection:bg-transparent select-none">
|
||||
{t('timestamp:currentTs')}
|
||||
</span>
|
||||
|
||||
{/* 4. tabular-nums 强制使用等宽数字布局，彻底消灭数字跳动时字符宽度不同带来的抖动颤噪感 */}
|
||||
<span className="flex-1 font-mono font-bold text-foreground text-sm tracking-tight leading-none truncate tabular-nums">
|
||||
{currentDisplay.text}
|
||||
</span>
|
||||
|
||||
{/* 5. 按钮重构成精巧的 shadcn 原子微动效风格 */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleUseNow}
|
||||
title={t('timestamp:useNowTooltip')}
|
||||
className="flex h-7 w-7 items-center justify-center rounded-md border border-input bg-background text-muted-foreground shadow-sm hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
|
||||
>
|
||||
<Clock className="w-3.5 h-3.5" />
|
||||
</button>
|
||||
|
||||
<CopyButton
|
||||
text={currentDisplay.text}
|
||||
tooltip={t('timestamp:copyTsTooltip')}
|
||||
className="h-7 w-7 rounded-md border"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
LiveClock.displayName = 'LiveClock';
|
||||
|
||||
export default LiveClock;
|
||||
@@ -0,0 +1,131 @@
|
||||
import React, { useMemo } from 'react';
|
||||
import dayjs from '@/utils/dayjs';
|
||||
import CopyButton from '@/components/CopyButton';
|
||||
import type { UnitType } from './constants';
|
||||
import { DATE_FORMAT } from './constants';
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
import { cn } from '@/lib/utils'; // shadcn 核心类名合并工具
|
||||
|
||||
interface ResultViewProps extends React.HTMLAttributes<HTMLDivElement> {
|
||||
result: string;
|
||||
mode: 'ts2dt' | 'dt2ts';
|
||||
unit: UnitType;
|
||||
zone: string;
|
||||
/** 无结果时是否渲染占位（桌面端右栏使用），默认 false */
|
||||
showEmptyPlaceholder?: boolean;
|
||||
}
|
||||
|
||||
const ResultView = React.memo(
|
||||
({
|
||||
result,
|
||||
mode,
|
||||
unit,
|
||||
zone,
|
||||
showEmptyPlaceholder = false,
|
||||
className,
|
||||
...props
|
||||
}: ResultViewProps) => {
|
||||
const { t } = useI18n('timestamp');
|
||||
|
||||
// 严谨计算时间衍生的附加时区/相对时间状态
|
||||
const extraInfo = useMemo(() => {
|
||||
if (!result) return null;
|
||||
const d =
|
||||
mode === 'ts2dt'
|
||||
? dayjs(result, DATE_FORMAT).tz(zone)
|
||||
: unit === 'ms'
|
||||
? dayjs(Number(result))
|
||||
: dayjs.unix(Number(result));
|
||||
|
||||
return {
|
||||
relative: d.fromNow(),
|
||||
iso: d.toISOString(),
|
||||
utc: d.utc().format(DATE_FORMAT) + ' UTC',
|
||||
};
|
||||
}, [result, mode, zone, unit]);
|
||||
|
||||
// 1. 空状态骨架面板：优雅匹配 shadcn 的中性灰色居中占位
|
||||
if (!result) {
|
||||
if (!showEmptyPlaceholder) return null;
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
'flex-1 flex items-center justify-center text-sm font-medium border border-dashed border-border/60 rounded-xl py-12 px-4 text-center text-muted-foreground bg-muted/20 min-h-[320px]',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{t('timestamp:resultEmpty')}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={cn('flex flex-col w-full', className)} {...props}>
|
||||
{/* 顶部小标签 */}
|
||||
<span className="block text-muted-foreground/90 mb-2.5 text-xs font-semibold tracking-wider uppercase">
|
||||
{t('timestamp:resultLabel')}
|
||||
</span>
|
||||
|
||||
{/*
|
||||
2. 核心结果大卡片：
|
||||
对齐 shadcn 官方卡片风格，使用 bg-card、border-border 构筑多层级阴影。
|
||||
核心数值直接拉粗为 text-foreground (在黑夜模式下会自动转为大气的纯白，完美避开刺眼强光)
|
||||
*/}
|
||||
<div className="bg-card text-card-foreground border border-border p-4 sm:p-5 rounded-xl relative mb-3.5 shadow-sm flex justify-between items-center gap-4 focus-within:ring-1 focus-within:ring-ring">
|
||||
<span className="font-mono font-extrabold text-foreground break-all text-xl sm:text-2xl tracking-tight leading-tight select-all tabular-nums">
|
||||
{result}
|
||||
</span>
|
||||
<CopyButton
|
||||
text={result}
|
||||
tooltip={t('timestamp:copyResultTooltip')}
|
||||
className="h-8 w-8 rounded-md shrink-0 border"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/*
|
||||
3. 衍生的附加参考数据区：
|
||||
背景改为低饱和度的 bg-muted/40 隔离带。
|
||||
内部数值降级为 text-muted-foreground，建立教科书般的完美“视觉权重层级”。
|
||||
*/}
|
||||
<div className="bg-muted/40 p-4 rounded-xl border border-border/50 flex flex-col gap-3">
|
||||
{[
|
||||
{ label: t('timestamp:relativeTime'), value: extraInfo?.relative },
|
||||
{ label: t('timestamp:iso8601'), value: extraInfo?.iso, isMono: true },
|
||||
{ label: t('timestamp:utcTime'), value: extraInfo?.utc, isMono: true },
|
||||
].map((item) => (
|
||||
<div
|
||||
key={item.label}
|
||||
className="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-1.5 py-0.5 border-b border-border/30 last:border-0 pb-2 sm:pb-0 last:pb-0"
|
||||
>
|
||||
<span className="text-muted-foreground font-semibold text-xs shrink-0 select-none">
|
||||
{item.label}
|
||||
</span>
|
||||
<div className="flex items-center justify-between sm:justify-end gap-2 min-w-0 w-full sm:w-auto">
|
||||
<span
|
||||
className={cn(
|
||||
'text-xs text-foreground/90 font-medium break-all text-left sm:text-right tabular-nums',
|
||||
item.isMono && 'font-mono text-[11px]', // ISO/UTC 等机器时间使用精细化等宽代码体
|
||||
)}
|
||||
>
|
||||
{item.value}
|
||||
</span>
|
||||
{item.value && (
|
||||
<CopyButton
|
||||
text={item.value}
|
||||
tooltip={t('timestamp:copyTooltip')}
|
||||
className="h-6 w-6 rounded-md border shrink-0 text-muted-foreground"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
ResultView.displayName = 'ResultView';
|
||||
|
||||
export default ResultView;
|
||||
@@ -0,0 +1,6 @@
|
||||
export const DATE_FORMAT = 'YYYY/MM/DD HH:mm:ss';
|
||||
|
||||
export const ZONES = ['Asia/Shanghai', 'America/New_York', 'Europe/London'] as const;
|
||||
|
||||
export type UnitType = 'ms' | 's';
|
||||
export type ZoneType = (typeof ZONES)[number];
|
||||
@@ -0,0 +1,133 @@
|
||||
import SwitchButtonGroup from '@/components/SwitchButtonGroup';
|
||||
import { ZONES } from './constants';
|
||||
import LiveClock from './LiveClock';
|
||||
import ResultView from './ResultView';
|
||||
import { useTimestampConverter } from './useTimestampConverter';
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
// 1. 引入标准的 shadcn/ui 原子表单组件（代替原生的原生 Input 和 Select）
|
||||
import { Input } from '@/components/ui/input';
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select';
|
||||
|
||||
export default function Index() {
|
||||
const { t } = useI18n('timestamp');
|
||||
|
||||
// 2. 完美对接全新重构后的统一单源响应式 Hook
|
||||
const {
|
||||
mode,
|
||||
input,
|
||||
unit,
|
||||
zone,
|
||||
result,
|
||||
error,
|
||||
setMode,
|
||||
setInput,
|
||||
setUnit,
|
||||
setZone,
|
||||
handleUseNow,
|
||||
} = useTimestampConverter();
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-background text-foreground antialiased selection:bg-primary/20">
|
||||
<div className="max-w-7xl mx-auto p-4 sm:p-6 space-y-4">
|
||||
{/* 动态参考信息时钟条 */}
|
||||
<LiveClock unit={unit} onUseNow={handleUseNow} />
|
||||
|
||||
{/* 核心工作台网格：桌面端 md+ 左右等宽分栏；移动端单栏堆叠 */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 items-stretch">
|
||||
{/* 左栏：转换工作台 */}
|
||||
<div className="p-5 rounded-xl border border-border bg-card text-card-foreground shadow-sm flex flex-col justify-between">
|
||||
<div className="flex flex-col gap-4">
|
||||
{/* 模式选择切换组 */}
|
||||
<SwitchButtonGroup
|
||||
value={mode}
|
||||
options={[
|
||||
{ value: 'ts2dt', label: t('timestamp:tsToDate') },
|
||||
{ value: 'dt2ts', label: t('timestamp:dateToTs') },
|
||||
]}
|
||||
onChange={(newMode) => setMode(newMode as 'ts2dt' | 'dt2ts')}
|
||||
size="small"
|
||||
/>
|
||||
|
||||
{/* 输入交互区 */}
|
||||
<div className="flex flex-col gap-1.5">
|
||||
{/*
|
||||
3. 替换为标准的 shadcn <Input /> 组件：
|
||||
享受原生高水准的 focus-visible 环形动画响应。
|
||||
*/}
|
||||
<Input
|
||||
type="text"
|
||||
placeholder={
|
||||
mode === 'ts2dt' ? t('timestamp:placeholderTs') : t('timestamp:placeholderDate')
|
||||
}
|
||||
value={input}
|
||||
onChange={(e: { target: { value: string } }) => setInput(e.target.value)}
|
||||
className={cn(
|
||||
'font-mono font-semibold h-10 shadow-sm placeholder:text-muted-foreground/60 focus:bg-background',
|
||||
error && 'border-destructive focus-visible:ring-destructive',
|
||||
)}
|
||||
/>
|
||||
|
||||
{/* 错误自愈提示 */}
|
||||
{error && <p className="text-destructive text-xs font-medium px-0.5">{error}</p>}
|
||||
</div>
|
||||
|
||||
{/* 核心配置群：单位切换 + 时区选择紧凑横排 */}
|
||||
<div className="flex flex-col sm:flex-row items-stretch gap-3 w-full">
|
||||
{/* 时间精度单位选择 */}
|
||||
<SwitchButtonGroup
|
||||
value={unit}
|
||||
options={[
|
||||
{ value: 'ms', label: t('timestamp:unitMs') },
|
||||
{ value: 's', label: t('timestamp:unitS') },
|
||||
]}
|
||||
onChange={(v) => setUnit(v as 'ms' | 's')}
|
||||
size="small"
|
||||
className="sm:w-auto shrink-0" // 窄屏下全宽，宽屏下自适应收缩
|
||||
/>
|
||||
|
||||
{/*
|
||||
4. 降维打击：将原生 <select> 强行超进化为标准的 shadcn <Select>：
|
||||
全操作系统的样式绝对一致，完美融合暗黑模式，悬浮弹窗自带微距磨砂玻璃阻尼动效。
|
||||
*/}
|
||||
<Select value={zone} onValueChange={(v: string) => setZone(v as typeof zone)}>
|
||||
<SelectTrigger className="flex-1 font-mono font-semibold h-9 shadow-sm bg-background">
|
||||
<SelectValue placeholder="选择时区" />
|
||||
</SelectTrigger>
|
||||
<SelectContent className="max-h-64 font-mono">
|
||||
{ZONES.map((z) => (
|
||||
<SelectItem
|
||||
key={z}
|
||||
value={z}
|
||||
className="text-xs font-semibold focus:bg-accent cursor-pointer"
|
||||
>
|
||||
{z}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/*
|
||||
5. 彻底移除了原先丑陋的手动 convert 按钮！
|
||||
在响应式 Hook 的加持下，此处留白或由排版自然撑开，界面视觉极其干净。
|
||||
*/}
|
||||
</div>
|
||||
|
||||
{/* 右栏：结果实时流展示卡片 */}
|
||||
<div className="p-5 rounded-xl border border-border bg-card text-card-foreground shadow-sm h-full flex flex-col">
|
||||
<ResultView result={result} mode={mode} unit={unit} zone={zone} showEmptyPlaceholder />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,124 @@
|
||||
import { useCallback, useMemo, useState } from 'react';
|
||||
import dayjs from '@/utils/dayjs';
|
||||
import type { UnitType, ZoneType } from './constants';
|
||||
import { DATE_FORMAT } from './constants';
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
import { useContextMenuData } from '@/utils/useContextMenuData';
|
||||
|
||||
export interface UseTimestampConverterReturn {
|
||||
mode: 'ts2dt' | 'dt2ts';
|
||||
input: string; // 统一为单一受控输入源
|
||||
unit: UnitType;
|
||||
zone: ZoneType;
|
||||
result: string;
|
||||
error: string;
|
||||
|
||||
setMode: (mode: 'ts2dt' | 'dt2ts') => void;
|
||||
setInput: (value: string) => void;
|
||||
setUnit: (unit: UnitType) => void;
|
||||
setZone: (zone: ZoneType) => void;
|
||||
handleUseNow: (now: number) => void;
|
||||
}
|
||||
|
||||
function isTimestampLike(input: string): boolean {
|
||||
const trimmed = input.trim();
|
||||
return /^\d+$/.test(trimmed) && trimmed.length >= 10;
|
||||
}
|
||||
|
||||
export function useTimestampConverter(): UseTimestampConverterReturn {
|
||||
const { t } = useI18n('timestamp');
|
||||
const [mode, setMode] = useState<'ts2dt' | 'dt2ts'>('ts2dt');
|
||||
const [unit, setUnit] = useState<UnitType>('ms');
|
||||
const [zone, setZone] = useState<ZoneType>('Asia/Shanghai');
|
||||
|
||||
// 1. 唯一受控源：不再区分 ts/dt，输入框在当前模式下展现的就是它的值
|
||||
const [input, setInput] = useState(() => String(Date.now()));
|
||||
|
||||
// 2. 核心魔法：利用 useMemo 达成 0 延迟响应式转换 (Reactive Pipeline)
|
||||
// 只要 input, mode, unit, zone 任何一个发生改变，结果和错误信息自动流出，废除 convert 按钮
|
||||
const conversionPipeline = useMemo(() => {
|
||||
const rawInput = input.trim();
|
||||
if (!rawInput) return { result: '', error: '' };
|
||||
|
||||
if (mode === 'ts2dt') {
|
||||
const num = Number(rawInput);
|
||||
if (isNaN(num)) {
|
||||
return { result: '', error: t('timestamp:errors.invalidNumber') };
|
||||
}
|
||||
const d = unit === 'ms' ? dayjs(num) : dayjs.unix(num);
|
||||
if (!d.isValid()) {
|
||||
return { result: '', error: t('timestamp:errors.invalidTimestamp') };
|
||||
}
|
||||
return { result: d.tz(zone).format(DATE_FORMAT), error: '' };
|
||||
} else {
|
||||
const d = dayjs.tz(rawInput, DATE_FORMAT, zone);
|
||||
if (!d.isValid()) {
|
||||
return { result: '', error: t('timestamp:errors.invalidFormat') };
|
||||
}
|
||||
const ms = d.valueOf();
|
||||
const outputTs = unit === 'ms' ? String(ms) : String(Math.floor(ms / 1000));
|
||||
return { result: outputTs, error: '' };
|
||||
}
|
||||
}, [input, mode, unit, zone, t]);
|
||||
|
||||
const { result, error } = conversionPipeline;
|
||||
|
||||
// 3. 处理右键菜单联动（直接修改唯一的 input，衍生转换自动触发）
|
||||
const handleContextMenuData = useCallback((payload: string) => {
|
||||
const trimmed = payload.trim();
|
||||
if (isTimestampLike(trimmed)) {
|
||||
setMode('ts2dt');
|
||||
const detectedUnit: UnitType = trimmed.length >= 13 ? 'ms' : 's';
|
||||
setUnit(detectedUnit);
|
||||
setInput(trimmed);
|
||||
} else {
|
||||
const d = dayjs(trimmed);
|
||||
if (d.isValid()) {
|
||||
setMode('dt2ts');
|
||||
setInput(d.format(DATE_FORMAT));
|
||||
} else {
|
||||
setMode('ts2dt');
|
||||
setInput(trimmed);
|
||||
}
|
||||
}
|
||||
}, []);
|
||||
|
||||
useContextMenuData({ featureKey: 'timestamp', onData: handleContextMenuData });
|
||||
|
||||
const handleUseNow = useCallback(
|
||||
(now: number) => {
|
||||
if (mode === 'ts2dt') {
|
||||
setInput(String(unit === 'ms' ? now : Math.floor(now / 1000)));
|
||||
} else {
|
||||
setInput(dayjs(now).tz(zone).format(DATE_FORMAT));
|
||||
}
|
||||
},
|
||||
[mode, unit, zone],
|
||||
);
|
||||
|
||||
// 4. 尊享级连贯交互：切换 Mode 时，自动把上一个模式计算出的结果喂进输入框
|
||||
// 比如：输入时间戳 -> 得到日期 -> 切换模式 -> 日期直接进入输入框，方便用户进行微调反向转换
|
||||
const handleSetMode = useCallback(
|
||||
(newMode: 'ts2dt' | 'dt2ts') => {
|
||||
setMode(newMode);
|
||||
if (result && !error) {
|
||||
setInput(result);
|
||||
}
|
||||
},
|
||||
[result, error],
|
||||
);
|
||||
|
||||
return {
|
||||
mode,
|
||||
input,
|
||||
unit,
|
||||
zone,
|
||||
result,
|
||||
error,
|
||||
setMode: handleSetMode,
|
||||
setInput,
|
||||
setUnit,
|
||||
setZone,
|
||||
handleUseNow,
|
||||
};
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user