feat(Jwt): 重构 JWT 组件,新增常量和结果视图

- 新增 constants.ts 文件,定义 JWT 输入占位符和配置常量,提升代码可读性。
- 删除 JwtSection 组件,重构为 JwtResultView 组件,简化结果展示逻辑。
- 更新 index.tsx,使用 JwtResultView 组件替代原有的 JWT 结果展示方式,优化页面结构。
This commit is contained in:
雨霖铃
2026-06-19 10:31:40 +08:00
parent 0906d1f425
commit 06b9d29270
5 changed files with 135 additions and 91 deletions
+30
View File
@@ -0,0 +1,30 @@
import { CopyButton } from '@/components/CopyButton';
import { cn } from '@/lib/utils';
interface JwtCopyBlockProps {
title: string;
copyText: string;
titleClassName?: string;
containerClassName?: string;
children: React.ReactNode;
}
export default function JwtCopyBlock({
title,
copyText,
titleClassName,
containerClassName,
children,
}: JwtCopyBlockProps) {
return (
<div className={cn('p-4 rounded-xl border shadow-sm', containerClassName)}>
<div className="flex justify-between items-center mb-2 select-none">
<span className={cn('text-xs font-bold tracking-wider uppercase', titleClassName)}>
{title}
</span>
<CopyButton text={copyText} className="h-6 w-6 rounded-md border text-muted-foreground" />
</div>
{children}
</div>
);
}
@@ -0,0 +1,49 @@
import { stringifyJson } from '@/utils/jwt';
import type { JwtResult } from '@/utils/jwt';
import { cn } from '@/lib/utils';
import {
JWT_JSON_CONTENT_CLASS,
JWT_SECTION_CONFIG,
JWT_SIGNATURE_SECTION,
JWT_TEXT_CONTENT_CLASS,
} from '../constants';
import JwtCopyBlock from './JwtCopyBlock';
interface JwtResultViewProps {
result: JwtResult;
}
export default function JwtResultView({ result }: JwtResultViewProps) {
return (
<div className="flex flex-col gap-4">
{JWT_SECTION_CONFIG.map(({ contentKey, title, colorClass, bgClass, borderClass }) => {
const content = result[contentKey];
return (
<JwtCopyBlock
key={contentKey}
title={title}
copyText={JSON.stringify(content)}
titleClassName={colorClass}
containerClassName={cn('border-solid', bgClass, borderClass)}
>
<pre className={JWT_JSON_CONTENT_CLASS}>
{content ? stringifyJson(content) : '无法解析'}
</pre>
</JwtCopyBlock>
);
})}
<JwtCopyBlock
title={JWT_SIGNATURE_SECTION.title}
copyText={result.signature || ''}
titleClassName={JWT_SIGNATURE_SECTION.titleClassName}
containerClassName={JWT_SIGNATURE_SECTION.containerClassName}
>
<span className={JWT_TEXT_CONTENT_CLASS}>
{result.signature || JWT_SIGNATURE_SECTION.emptyLabel}
</span>
</JwtCopyBlock>
</div>
);
}