complete frontend - refact from vue
This commit is contained in:
@@ -0,0 +1,229 @@
|
||||
'use client'
|
||||
|
||||
import React, { useState, useEffect, useCallback } from 'react'
|
||||
|
||||
interface VersionInfo {
|
||||
version: string
|
||||
download_url: string
|
||||
checksum: string
|
||||
}
|
||||
|
||||
export default function UploadPage() {
|
||||
const [currentVersion, setCurrentVersion] = useState<VersionInfo | null>(null)
|
||||
const [newVersion, setNewVersion] = useState('')
|
||||
const [versionFile, setVersionFile] = useState<File | null>(null)
|
||||
const [versionFileHash, setVersionFileHash] = useState('')
|
||||
const [isUploading, setIsUploading] = useState(false)
|
||||
const [uploadError, setUploadError] = useState('')
|
||||
const [uploadSuccess, setUploadSuccess] = useState(false)
|
||||
|
||||
const canUploadVersion = newVersion && versionFile && !isUploading
|
||||
|
||||
// 计算文件 SHA-256
|
||||
const calculateSha256 = async (file: File): Promise<string> => {
|
||||
const buffer = await file.arrayBuffer()
|
||||
const hashBuffer = await crypto.subtle.digest('SHA-256', buffer)
|
||||
const hashArray = Array.from(new Uint8Array(hashBuffer))
|
||||
return hashArray.map(b => b.toString(16).padStart(2, '0')).join('')
|
||||
}
|
||||
|
||||
// 获取当前版本信息
|
||||
const fetchCurrentVersion = useCallback(async () => {
|
||||
try {
|
||||
const response = await fetch('/api/api/version')
|
||||
if (response.ok) {
|
||||
const data: VersionInfo = await response.json()
|
||||
setCurrentVersion(data)
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('获取版本信息失败:', err)
|
||||
}
|
||||
}, [])
|
||||
|
||||
// 处理版本文件选择
|
||||
const handleVersionFileChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const input = event.target
|
||||
if (input.files && input.files[0]) {
|
||||
const file = input.files[0]
|
||||
setVersionFile(file)
|
||||
setVersionFileHash(await calculateSha256(file))
|
||||
}
|
||||
}
|
||||
|
||||
// 清除表单
|
||||
const resetForm = () => {
|
||||
setNewVersion('')
|
||||
setVersionFile(null)
|
||||
setVersionFileHash('')
|
||||
setUploadError('')
|
||||
}
|
||||
|
||||
// 上传新版本
|
||||
const uploadVersion = async () => {
|
||||
if (!versionFile || !newVersion) return
|
||||
|
||||
setIsUploading(true)
|
||||
setUploadError('')
|
||||
setUploadSuccess(false)
|
||||
|
||||
const formData = new FormData()
|
||||
formData.append('file', versionFile)
|
||||
formData.append('version', newVersion)
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/upload/version', {
|
||||
method: 'POST',
|
||||
body: formData
|
||||
})
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Upload failed')
|
||||
}
|
||||
|
||||
await fetchCurrentVersion()
|
||||
setUploadSuccess(true)
|
||||
resetForm()
|
||||
setTimeout(() => {
|
||||
setUploadSuccess(false)
|
||||
}, 3000)
|
||||
} catch (err) {
|
||||
console.error('上传失败:', err)
|
||||
setUploadError('上传失败，请重试')
|
||||
} finally {
|
||||
setIsUploading(false)
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
fetchCurrentVersion()
|
||||
}, [fetchCurrentVersion])
|
||||
|
||||
return (
|
||||
<div className="max-w-3xl mx-auto p-6">
|
||||
<h1 className="text-3xl font-bold text-gray-800 mb-8">软件版本管理</h1>
|
||||
|
||||
{/* 当前版本信息卡片 */}
|
||||
<div className="bg-white rounded-lg shadow-md mb-8 overflow-hidden">
|
||||
<div className="bg-gray-50 px-6 py-4 border-b">
|
||||
<h2 className="text-xl font-semibold text-gray-700">当前版本信息</h2>
|
||||
</div>
|
||||
<div className="p-6">
|
||||
{currentVersion ? (
|
||||
<div className="space-y-3">
|
||||
<div className="grid grid-cols-12 gap-4 items-center">
|
||||
<span className="text-gray-600 col-span-2">版本号:</span>
|
||||
<span className="font-medium text-gray-800 col-span-10">{currentVersion.version}</span>
|
||||
</div>
|
||||
<div className="grid grid-cols-12 gap-4 items-center">
|
||||
<span className="text-gray-600 col-span-2">下载地址:</span>
|
||||
<a
|
||||
href={currentVersion.download_url}
|
||||
className="text-blue-600 hover:text-blue-800 break-all col-span-10"
|
||||
>
|
||||
{currentVersion.download_url}
|
||||
</a>
|
||||
</div>
|
||||
<div className="grid grid-cols-12 gap-4 items-center">
|
||||
<span className="text-gray-600 col-span-2">校验和:</span>
|
||||
<span className="font-mono text-sm text-gray-700 break-all col-span-10">
|
||||
{currentVersion.checksum}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-gray-500 italic">暂无版本信息</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 上传新版本表单 */}
|
||||
<div className="bg-white rounded-lg shadow-md">
|
||||
<div className="bg-gray-50 px-6 py-4 border-b">
|
||||
<h2 className="text-xl font-semibold text-gray-700">上传新版本</h2>
|
||||
</div>
|
||||
<div className="p-6 space-y-6">
|
||||
{/* 版本号输入 */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
版本号
|
||||
</label>
|
||||
<input
|
||||
value={newVersion}
|
||||
onChange={(e) => setNewVersion(e.target.value)}
|
||||
type="text"
|
||||
className="w-full px-4 py-2 border rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition"
|
||||
placeholder="例如: 1.0.0"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 文件上传 */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
选择文件
|
||||
</label>
|
||||
<div className="mt-1">
|
||||
<div className="border-2 border-dashed border-gray-300 rounded-lg px-6 py-8">
|
||||
<div className="text-center">
|
||||
<input
|
||||
type="file"
|
||||
onChange={handleVersionFileChange}
|
||||
className="hidden"
|
||||
id="file-upload"
|
||||
/>
|
||||
<label
|
||||
htmlFor="file-upload"
|
||||
className="cursor-pointer inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
|
||||
>
|
||||
选择文件
|
||||
</label>
|
||||
<p className="mt-2 text-sm text-gray-600">
|
||||
{versionFile?.name || '未选择文件'}
|
||||
</p>
|
||||
</div>
|
||||
{versionFileHash && (
|
||||
<div className="mt-4 text-center">
|
||||
<p className="text-xs text-gray-500">SHA-256 校验和:</p>
|
||||
<p className="font-mono text-xs text-gray-600 break-all">
|
||||
{versionFileHash}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 错误提示 */}
|
||||
{uploadError && (
|
||||
<div className="text-red-600 text-sm">
|
||||
{uploadError}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 成功提示 */}
|
||||
{uploadSuccess && (
|
||||
<div className="bg-green-50 text-green-800 px-4 py-2 rounded-md text-sm">
|
||||
上传成功！
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 提交按钮 */}
|
||||
<div className="flex justify-end">
|
||||
<button
|
||||
onClick={uploadVersion}
|
||||
disabled={!canUploadVersion}
|
||||
className="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:bg-gray-300 disabled:cursor-not-allowed transition-colors"
|
||||
>
|
||||
{isUploading && (
|
||||
<svg className="animate-spin -ml-1 mr-3 h-5 w-5 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>
|
||||
)}
|
||||
{isUploading ? '上传中...' : '上传新版本'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user