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

- 新增 constants.ts 文件，定义 JWT 输入占位符和配置常量，提升代码可读性。 - 删除 JwtSection 组件，重构为 JwtResultView 组件，简化结果展示逻辑。 - 更新 index.tsx，使用 JwtResultView 组件替代原有的 JWT 结果展示方式，优化页面结构。
2026-06-19 10:31:40 +08:00
parent 0906d1f425
commit 06b9d29270
5 changed files with 135 additions and 91 deletions
@@ -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>
+  );
+}