forked from imbytecat/fullstack-starter
imbytecat
8952bf4205
- 将 db 中间件重命名为 dbProvider，同时保留 db 作为别名以避免破坏现有路由。 - 记录并解决开发环境中数据库迁移和类型检查工具使用问题。 - 完善许可证激活功能，新增数据表与初始化逻辑，实现UPSERT操作及单例模式，添加RPC接口支持，修复时间戳类型不匹配问题。 - 创建设备信息和待办事项数据表，并为设备指纹添加唯一索引。 - 添加许可证激活表及指纹唯一索引 - 添加设备信息和待办事项表的数据库模式快照，包含字段定义、主键约束及指纹唯一索引。 - 添加初始数据库模式快照，包含设备信息、许可证激活和待办事项三张表的结构定义。 - 添加新的迁移日志文件以记录数据库版本变更和迁移步骤 - 确保设备信息在数据库中正确初始化，使用硬件指纹唯一标识设备并支持并发安全的单例模式初始化。 - 初始化许可证激活记录，确保基于硬件指纹创建或更新激活信息。 - 添加许可证激活管理页面，包含设备指纹展示、许可证输入激活功能及激活状态实时反馈。 - 添加许可证页面路由配置并更新相关路由类型和路径映射。 - 添加设备信息获取与许可证设置的接口契约定义，包含数据校验 schema 和接口输入输出规范。 - 添加设备和许可证合约接口到导出契约对象中 - 添加许可证相关API契约，定义获取激活状态和激活许可证的输入输出结构。 - 初始化设备和许可激活状态，并将数据库中间件重命名为dbProvider，同时导出原始db名称以保持兼容性。 - 添加设备信息获取和许可证设置接口，确保设备初始化并安全处理数据读写。 - 添加设备和许可证路由到API路由器中。 - 添加许可证激活状态查询和激活功能，支持通过数据库记录管理许可证信息并返回激活时间戳。 - 添加设备信息表结构，包含指纹、指纹质量等级、许可证及激活时间字段。 - 添加设备信息和许可证激活相关数据模型导出 - 添加许可证激活记录表，包含指纹、许可证信息及激活时间字段。
392 lines
15 KiB
TypeScript
392 lines
15 KiB
TypeScript
import {
|
|
useMutation,
|
|
useQueryClient,
|
|
useSuspenseQuery,
|
|
} from '@tanstack/react-query'
|
|
import { createFileRoute } from '@tanstack/react-router'
|
|
import { useState } from 'react'
|
|
import { orpc } from '@/client/query-client'
|
|
|
|
export const Route = createFileRoute('/license')({
|
|
component: License,
|
|
})
|
|
|
|
function License() {
|
|
const [licenseInput, setLicenseInput] = useState('')
|
|
const [copySuccess, setCopySuccess] = useState(false)
|
|
const queryClient = useQueryClient()
|
|
|
|
// 获取激活状态
|
|
const { data } = useSuspenseQuery(orpc.license.getActivation.queryOptions())
|
|
|
|
// 激活 mutation
|
|
const activateMutation = useMutation({
|
|
...orpc.license.activate.mutationOptions(),
|
|
onSuccess: () => {
|
|
// 刷新数据
|
|
queryClient.invalidateQueries({
|
|
queryKey: orpc.license.getActivation.key(),
|
|
})
|
|
// 清空输入
|
|
setLicenseInput('')
|
|
},
|
|
})
|
|
|
|
const handleActivate = () => {
|
|
if (!licenseInput.trim()) return
|
|
activateMutation.mutate({ license: licenseInput.trim() })
|
|
}
|
|
|
|
const handleCopyFingerprint = async () => {
|
|
try {
|
|
await navigator.clipboard.writeText(data.fingerprint)
|
|
setCopySuccess(true)
|
|
setTimeout(() => setCopySuccess(false), 2000)
|
|
} catch (err) {
|
|
console.error('Failed to copy fingerprint:', err)
|
|
}
|
|
}
|
|
|
|
const isActivated = !!data.license
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gray-50 flex items-center justify-center p-4 font-sans">
|
|
<div className="w-full max-w-2xl space-y-6">
|
|
{/* 页面标题 */}
|
|
<div className="text-center mb-8">
|
|
<h1 className="text-3xl font-bold text-gray-900 tracking-tight">
|
|
License 激活管理
|
|
</h1>
|
|
<p className="text-gray-500 mt-2">管理您的设备授权与激活状态</p>
|
|
</div>
|
|
|
|
{/* 设备信息卡片 */}
|
|
<div className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
|
|
<div className="p-6">
|
|
<h2 className="text-lg font-semibold text-gray-900 mb-4 flex items-center gap-2">
|
|
<svg
|
|
aria-hidden="true"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="20"
|
|
height="20"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="2"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
className="text-blue-500"
|
|
>
|
|
<rect x="4" y="4" width="16" height="16" rx="2" ry="2"></rect>
|
|
<rect x="9" y="9" width="6" height="6"></rect>
|
|
<line x1="9" y1="1" x2="9" y2="4"></line>
|
|
<line x1="15" y1="1" x2="15" y2="4"></line>
|
|
<line x1="9" y1="20" x2="9" y2="23"></line>
|
|
<line x1="15" y1="20" x2="15" y2="23"></line>
|
|
<line x1="20" y1="9" x2="23" y2="9"></line>
|
|
<line x1="20" y1="14" x2="23" y2="14"></line>
|
|
<line x1="1" y1="9" x2="4" y2="9"></line>
|
|
<line x1="1" y1="14" x2="4" y2="14"></line>
|
|
</svg>
|
|
设备信息
|
|
</h2>
|
|
<div className="bg-gray-50 rounded-lg p-4 border border-gray-100">
|
|
<p className="text-sm text-gray-500 mb-1">
|
|
设备指纹 (Device Fingerprint)
|
|
</p>
|
|
<div className="flex items-center gap-3">
|
|
<code className="flex-1 font-mono text-sm text-gray-700 break-all select-all">
|
|
{data.fingerprint}
|
|
</code>
|
|
<button
|
|
type="button"
|
|
onClick={handleCopyFingerprint}
|
|
className={`px-3 py-1.5 rounded-md text-sm font-medium transition-colors flex items-center gap-1.5 ${
|
|
copySuccess
|
|
? 'bg-green-100 text-green-700 hover:bg-green-200'
|
|
: 'bg-white border border-gray-200 text-gray-700 hover:bg-gray-50 hover:text-gray-900'
|
|
}`}
|
|
>
|
|
{copySuccess ? (
|
|
<>
|
|
<svg
|
|
aria-hidden="true"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="14"
|
|
height="14"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="2"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
>
|
|
<polyline points="20 6 9 17 4 12"></polyline>
|
|
</svg>
|
|
已复制
|
|
</>
|
|
) : (
|
|
<>
|
|
<svg
|
|
aria-hidden="true"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="14"
|
|
height="14"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="2"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
>
|
|
<rect
|
|
x="9"
|
|
y="9"
|
|
width="13"
|
|
height="13"
|
|
rx="2"
|
|
ry="2"
|
|
></rect>
|
|
<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
|
|
</svg>
|
|
复制
|
|
</>
|
|
)}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* License 激活卡片 */}
|
|
<div className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
|
|
<div className="p-6">
|
|
<h2 className="text-lg font-semibold text-gray-900 mb-4 flex items-center gap-2">
|
|
<svg
|
|
aria-hidden="true"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="20"
|
|
height="20"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="2"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
className="text-purple-500"
|
|
>
|
|
<rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
|
|
<path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
|
|
</svg>
|
|
License 激活
|
|
</h2>
|
|
|
|
<div className="space-y-4">
|
|
<div>
|
|
<label
|
|
htmlFor="license-key"
|
|
className="block text-sm font-medium text-gray-700 mb-1"
|
|
>
|
|
License Key
|
|
</label>
|
|
<input
|
|
id="license-key"
|
|
type="text"
|
|
value={licenseInput}
|
|
onChange={(e) => setLicenseInput(e.target.value)}
|
|
disabled={isActivated || activateMutation.isPending}
|
|
placeholder={
|
|
isActivated ? '已激活，无需输入' : '请输入您的 License Key'
|
|
}
|
|
className="w-full px-4 py-2.5 bg-white border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500/20 focus:border-purple-500 outline-none transition-all disabled:bg-gray-100 disabled:text-gray-500 placeholder:text-gray-400"
|
|
/>
|
|
</div>
|
|
|
|
{activateMutation.isError && (
|
|
<div className="p-3 bg-red-50 border border-red-100 rounded-lg text-red-600 text-sm flex items-start gap-2">
|
|
<svg
|
|
aria-hidden="true"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="16"
|
|
height="16"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="2"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
className="mt-0.5 shrink-0"
|
|
>
|
|
<circle cx="12" cy="12" r="10"></circle>
|
|
<line x1="12" y1="8" x2="12" y2="12"></line>
|
|
<line x1="12" y1="16" x2="12.01" y2="16"></line>
|
|
</svg>
|
|
<span>激活失败: 请检查 License 是否正确或稍后重试</span>
|
|
</div>
|
|
)}
|
|
|
|
<button
|
|
type="button"
|
|
onClick={handleActivate}
|
|
disabled={
|
|
isActivated ||
|
|
activateMutation.isPending ||
|
|
!licenseInput.trim()
|
|
}
|
|
className={`w-full px-6 py-2.5 rounded-lg font-medium text-white shadow-sm transition-all focus:outline-none focus:ring-2 focus:ring-offset-2 ${
|
|
isActivated
|
|
? 'bg-gray-300 cursor-not-allowed'
|
|
: activateMutation.isPending
|
|
? 'bg-purple-500 opacity-80 cursor-wait'
|
|
: 'bg-purple-600 hover:bg-purple-700 hover:shadow-md active:scale-[0.99] focus:ring-purple-500'
|
|
}`}
|
|
>
|
|
{activateMutation.isPending ? (
|
|
<span className="flex items-center justify-center gap-2">
|
|
<svg
|
|
aria-hidden="true"
|
|
className="animate-spin h-4 w-4 text-white"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<circle
|
|
className="opacity-25"
|
|
cx="12"
|
|
cy="12"
|
|
r="10"
|
|
stroke="currentColor"
|
|
strokeWidth="4"
|
|
></circle>
|
|
<path
|
|
className="opacity-75"
|
|
fill="currentColor"
|
|
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
|
|
></path>
|
|
</svg>
|
|
正在激活...
|
|
</span>
|
|
) : isActivated ? (
|
|
'已完成激活'
|
|
) : (
|
|
'立即激活'
|
|
)}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 激活状态卡片 */}
|
|
<div
|
|
className={`rounded-xl shadow-sm border overflow-hidden transition-colors ${
|
|
isActivated
|
|
? 'bg-green-50/50 border-green-100'
|
|
: 'bg-white border-gray-100'
|
|
}`}
|
|
>
|
|
<div className="p-6">
|
|
<h2 className="text-lg font-semibold text-gray-900 mb-4 flex items-center gap-2">
|
|
<svg
|
|
aria-hidden="true"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="20"
|
|
height="20"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="2"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
className={isActivated ? 'text-green-500' : 'text-gray-400'}
|
|
>
|
|
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
|
|
<polyline points="22 4 12 14.01 9 11.01"></polyline>
|
|
</svg>
|
|
激活状态
|
|
</h2>
|
|
|
|
{isActivated ? (
|
|
<div className="space-y-3">
|
|
<div className="flex items-center gap-2 text-green-700 font-medium text-lg">
|
|
<svg
|
|
aria-hidden="true"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="2"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
className="text-green-500"
|
|
>
|
|
<path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"></path>
|
|
<path d="M9 12l2 2 4-4"></path>
|
|
</svg>
|
|
<span>License 已激活</span>
|
|
</div>
|
|
<div className="pl-8 space-y-1">
|
|
<p className="text-gray-600 text-sm">
|
|
<span className="font-medium text-gray-700">
|
|
当前 License:{' '}
|
|
</span>
|
|
<span className="font-mono">{data.license}</span>
|
|
</p>
|
|
{data.licenseActivatedAt && (
|
|
<p className="text-gray-500 text-sm">
|
|
<span className="font-medium text-gray-700">
|
|
激活时间:{' '}
|
|
</span>
|
|
{new Date(data.licenseActivatedAt).toLocaleString(
|
|
'zh-CN',
|
|
{
|
|
year: 'numeric',
|
|
month: '2-digit',
|
|
day: '2-digit',
|
|
hour: '2-digit',
|
|
minute: '2-digit',
|
|
second: '2-digit',
|
|
},
|
|
)}
|
|
</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="flex items-start gap-3">
|
|
<svg
|
|
aria-hidden="true"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="2"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
className="text-orange-500 shrink-0 mt-0.5"
|
|
>
|
|
<path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path>
|
|
<line x1="12" y1="9" x2="12" y2="13"></line>
|
|
<line x1="12" y1="17" x2="12.01" y2="17"></line>
|
|
</svg>
|
|
<div>
|
|
<p className="text-orange-700 font-medium text-lg mb-1">
|
|
未激活
|
|
</p>
|
|
<p className="text-gray-500 text-sm">
|
|
您的设备尚未激活。请在上方输入 License Key
|
|
进行激活以解锁全部功能。
|
|
</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|