雨霖铃
06b9d29270
- 新增 constants.ts 文件，定义 JWT 输入占位符和配置常量，提升代码可读性。 - 删除 JwtSection 组件，重构为 JwtResultView 组件，简化结果展示逻辑。 - 更新 index.tsx，使用 JwtResultView 组件替代原有的 JWT 结果展示方式，优化页面结构。
50 lines
1.5 KiB
TypeScript
50 lines
1.5 KiB
TypeScript
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>
|
|
);
|
|
}
|