feat: 添加硬件指纹功能并优化依赖管理

- 更新依赖管理文档,明确使用 Bun Catalog 统一管理版本并规范安装方式,新增已知问题与解决方案、依赖选择经验及 Git 工作流要求,强化团队协作与技术决策可追溯性。
- 添加硬件指纹页面,展示机器码、指纹质量等级及详细信息,并支持一键复制和缓存提示。
- 添加指纹路由配置并更新路由树类型定义以包含新路由路径和相关类型。
- 添加硬件指纹获取接口的契约定义,包含指纹字符串、质量等级、强标识符数量和时间戳的验证规则。
- 添加指纹合约到API合约导出中
- 添加硬件指纹获取接口,支持10分钟缓存并包含主硬盘序列号以提升指纹稳定性。
- 添加指纹路由到API路由器中
- 重构硬件指纹生成逻辑,引入缓存机制、质量等级评估和容错处理,提升稳定性与可维护性。
This commit is contained in:
2026-01-24 03:34:25 +08:00
parent 0612eda74c
commit 8ceb212033
8 changed files with 678 additions and 23 deletions

View File

@@ -0,0 +1,301 @@
import { useSuspenseQuery } from '@tanstack/react-query'
import { createFileRoute } from '@tanstack/react-router'
import { useEffect, useState } from 'react'
import { orpc } from '@/client/query-client'
export const Route = createFileRoute('/fingerprint')({
component: FingerprintPage,
loader: async ({ context }) => {
await context.queryClient.ensureQueryData(
orpc.fingerprint.get.queryOptions(),
)
},
})
function FingerprintPage() {
const query = useSuspenseQuery(orpc.fingerprint.get.queryOptions())
const [copied, setCopied] = useState(false)
const data = query.data
useEffect(() => {
if (copied) {
const timer = setTimeout(() => setCopied(false), 2000)
return () => clearTimeout(timer)
}
}, [copied])
const handleCopy = async () => {
await navigator.clipboard.writeText(data.fingerprint)
setCopied(true)
}
const qualityConfig = {
strong: {
label: '强',
color: 'text-green-600',
bg: 'bg-green-50',
border: 'border-green-200',
icon: '✓',
description: '推荐用于生产授权',
},
medium: {
label: '中',
color: 'text-yellow-600',
bg: 'bg-yellow-50',
border: 'border-yellow-200',
icon: '!',
description: '可用但不理想',
},
weak: {
label: '弱',
color: 'text-red-600',
bg: 'bg-red-50',
border: 'border-red-200',
icon: '×',
description: '仅适合开发/测试',
},
}
const config = qualityConfig[data.quality]
return (
<div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-slate-50 py-12 px-4 sm:px-6 font-sans">
<div className="max-w-4xl mx-auto space-y-8">
{/* Header */}
<div className="text-center space-y-3">
<h1 className="text-4xl font-bold text-slate-900 tracking-tight">
</h1>
<p className="text-slate-500 text-lg"></p>
</div>
{/* Main Card */}
<div className="bg-white rounded-3xl shadow-xl border border-slate-100 overflow-hidden">
{/* Quality Badge */}
<div className={`px-8 py-6 border-b ${config.bg} ${config.border}`}>
<div className="flex items-center justify-between">
<div className="flex items-center gap-3">
<div
className={`w-12 h-12 rounded-full ${config.bg} border-2 ${config.border} flex items-center justify-center text-2xl font-bold ${config.color}`}
>
{config.icon}
</div>
<div>
<div className="flex items-center gap-2">
<span className="text-sm font-medium text-slate-600">
</span>
<span
className={`px-3 py-1 rounded-full text-sm font-semibold ${config.bg} ${config.color} border ${config.border}`}
>
{config.label}
</span>
</div>
<p className="text-xs text-slate-500 mt-1">
{config.description}
</p>
</div>
</div>
<div className="text-right">
<div className="text-3xl font-bold text-slate-900">
{data.strongIdentifiersCount}
</div>
<div className="text-xs font-medium text-slate-400 uppercase tracking-wider">
</div>
</div>
</div>
</div>
{/* Fingerprint Display */}
<div className="px-8 py-8">
<div className="space-y-4">
<div className="flex items-center justify-between">
<div className="text-sm font-semibold text-slate-700 uppercase tracking-wider">
</div>
<button
type="button"
onClick={handleCopy}
className={`px-4 py-2 rounded-lg font-medium text-sm transition-all ${
copied
? 'bg-green-100 text-green-700 border-2 border-green-300'
: 'bg-slate-100 text-slate-700 hover:bg-slate-200 border-2 border-slate-200'
}`}
>
{copied ? '已复制 ✓' : '复制'}
</button>
</div>
<div className="relative group">
<div className="absolute inset-0 bg-gradient-to-r from-blue-500 to-purple-500 rounded-xl blur-sm opacity-0 group-hover:opacity-20 transition-opacity" />
<div className="relative bg-slate-900 rounded-xl p-6 font-mono text-sm break-all leading-relaxed text-slate-100 shadow-inner border-2 border-slate-800">
{data.fingerprint}
</div>
</div>
<div className="flex items-center gap-2 text-xs text-slate-500">
<svg
className="w-4 h-4"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
aria-hidden="true"
>
<title></title>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
<span>SHA-256 43 Base64URL </span>
</div>
</div>
</div>
{/* Metadata */}
<div className="px-8 py-6 bg-slate-50 border-t border-slate-100">
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<div className="space-y-2">
<div className="text-xs font-semibold text-slate-500 uppercase tracking-wider">
</div>
<div className="text-lg font-medium text-slate-900">
{new Date(data.timestamp).toLocaleString('zh-CN', {
year: 'numeric',
month: '2-digit',
day: '2-digit',
hour: '2-digit',
minute: '2-digit',
second: '2-digit',
})}
</div>
</div>
<div className="space-y-2">
<div className="text-xs font-semibold text-slate-500 uppercase tracking-wider">
</div>
<div className="flex items-center gap-2">
<div className="w-2 h-2 rounded-full bg-green-500 animate-pulse" />
<span className="text-lg font-medium text-slate-900">
10
</span>
</div>
</div>
</div>
</div>
</div>
{/* Info Cards */}
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
<div className="bg-white rounded-2xl shadow-md border border-slate-100 p-6 space-y-3">
<div className="w-10 h-10 rounded-lg bg-blue-100 flex items-center justify-center">
<svg
className="w-6 h-6 text-blue-600"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
aria-hidden="true"
>
<title></title>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
/>
</svg>
</div>
<h3 className="font-semibold text-slate-900"></h3>
<p className="text-sm text-slate-600 leading-relaxed">
使 HMAC-SHA256
</p>
</div>
<div className="bg-white rounded-2xl shadow-md border border-slate-100 p-6 space-y-3">
<div className="w-10 h-10 rounded-lg bg-purple-100 flex items-center justify-center">
<svg
className="w-6 h-6 text-purple-600"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
aria-hidden="true"
>
<title></title>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"
/>
</svg>
</div>
<h3 className="font-semibold text-slate-900"></h3>
<p className="text-sm text-slate-600 leading-relaxed">
UUID
</p>
</div>
<div className="bg-white rounded-2xl shadow-md border border-slate-100 p-6 space-y-3">
<div className="w-10 h-10 rounded-lg bg-green-100 flex items-center justify-center">
<svg
className="w-6 h-6 text-green-600"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
aria-hidden="true"
>
<title></title>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M13 10V3L4 14h7v7l9-11h-7z"
/>
</svg>
</div>
<h3 className="font-semibold text-slate-900"></h3>
<p className="text-sm text-slate-600 leading-relaxed">
</p>
</div>
</div>
{/* Usage Hint */}
<div className="bg-blue-50 border-2 border-blue-200 rounded-2xl p-6">
<div className="flex gap-4">
<div className="flex-shrink-0">
<svg
className="w-6 h-6 text-blue-600"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
aria-hidden="true"
>
<title></title>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
</div>
<div className="space-y-2">
<h4 className="font-semibold text-blue-900">使</h4>
<ul className="text-sm text-blue-800 space-y-1 list-disc list-inside">
<li></li>
<li></li>
<li>便</li>
</ul>
</div>
</div>
</div>
</div>
</div>
)
}