mirror of
https://github.com/sipeed/NanoKVM.git
synced 2026-09-11 00:22:56 -05:00
fix: optimized UI of image download and locale issue
This commit is contained in:
@@ -241,7 +241,7 @@ const zh = {
|
||||
ok: '确定',
|
||||
disabled: '/data 是只读分区,无法下载镜像',
|
||||
uploadbox: '将文件拖放到此处或单击选择',
|
||||
inputfile: '请输入图片文件',
|
||||
inputfile: '请输入镜像文件',
|
||||
NoISO: '无 ISO',
|
||||
sha256: 'SHA-256(可选)',
|
||||
sha256Placeholder: '请输入 64 位 SHA-256 校验和',
|
||||
|
||||
@@ -241,7 +241,7 @@ const zh_tw = {
|
||||
ok: '確定',
|
||||
disabled: '/data 為唯讀目錄,無法下載映像檔',
|
||||
uploadbox: '將檔案拖曳到此處或按一下選擇',
|
||||
inputfile: '請輸入圖片檔案',
|
||||
inputfile: '請輸入映像檔案',
|
||||
NoISO: '無 ISO'
|
||||
},
|
||||
power: {
|
||||
|
||||
@@ -317,18 +317,20 @@ export const DownloadImage = () => {
|
||||
{!diskEnabled ? (
|
||||
<div className="text-red-500">{t('download.disabled')}</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="space-y-2">
|
||||
<div>
|
||||
<div className="pb-1 text-neutral-500">{t('download.input')}</div>
|
||||
<div className="flex items-center space-x-1">
|
||||
<div className="mb-1 text-neutral-500">{t('download.input')}</div>
|
||||
<div className="flex items-center gap-1">
|
||||
<Input
|
||||
ref={inputRef}
|
||||
value={input}
|
||||
onChange={handleChange}
|
||||
disabled={status === 'in_progress'}
|
||||
className="min-w-0 flex-1"
|
||||
/>
|
||||
<Button
|
||||
type="primary"
|
||||
className="h-10 w-16 shrink-0 px-0"
|
||||
danger={isRemoteDownloading && status === 'in_progress'}
|
||||
onClick={() =>
|
||||
isRemoteDownloading && status === 'in_progress'
|
||||
@@ -345,8 +347,8 @@ export const DownloadImage = () => {
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-2">
|
||||
<div className="pb-1 text-neutral-500">{t('download.sha256')}</div>
|
||||
<div>
|
||||
<div className="mb-1 text-neutral-500">{t('download.sha256')}</div>
|
||||
<Input
|
||||
value={sha256sum}
|
||||
onChange={handleSha256Change}
|
||||
@@ -356,14 +358,16 @@ export const DownloadImage = () => {
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<div className="pb-1 text-neutral-500">{t('download.inputfile')}</div>
|
||||
<div className="flex items-center space-x-1">
|
||||
<div className="mb-1 text-neutral-500">{t('download.inputfile')}</div>
|
||||
<div className="flex items-center gap-1">
|
||||
<div
|
||||
className={clsx(
|
||||
"flex flex-col items-center justify-center w-full h-10 border-2 border-solid rounded-xl transition css-9118ya ant-input-outlined",
|
||||
isDragging ? "bg-neutral-500 border-blue-500" : "",
|
||||
status === "in_progress" ? "opacity-50 cursor-not-allowed pointer-events-none border-neutral-600 bg-neutral-700" : "cursor-pointer hover:bg-neutral-500"
|
||||
)}
|
||||
className={clsx(
|
||||
'flex h-10 min-w-0 flex-1 flex-col items-center justify-center rounded-xl border-2 border-solid transition',
|
||||
isDragging ? 'border-blue-500 bg-neutral-500' : 'border-neutral-600',
|
||||
status === 'in_progress'
|
||||
? 'cursor-not-allowed bg-neutral-700 opacity-50'
|
||||
: 'cursor-pointer hover:bg-neutral-500'
|
||||
)}
|
||||
onDrop={(e) => {
|
||||
if (status === "in_progress") return; // deaktiviert
|
||||
e.preventDefault();
|
||||
@@ -393,7 +397,7 @@ export const DownloadImage = () => {
|
||||
document.getElementById("file-upload")?.click()
|
||||
}}
|
||||
>
|
||||
<span className="text-neutral-100 text-sm p-1">
|
||||
<span className="w-full truncate px-2 text-center text-sm text-neutral-100">
|
||||
{selectedFile ? selectedFile.name : t('download.uploadbox')}
|
||||
</span>
|
||||
|
||||
@@ -407,7 +411,7 @@ export const DownloadImage = () => {
|
||||
</div>
|
||||
<Button
|
||||
type="primary"
|
||||
className="h-10 border-2"
|
||||
className="h-10 w-16 shrink-0 border-2 px-0"
|
||||
onClick={() => upload(selectedFile)}
|
||||
disabled={status === 'in_progress' || !selectedFile}
|
||||
>
|
||||
@@ -415,9 +419,9 @@ export const DownloadImage = () => {
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
</div>
|
||||
)}
|
||||
<div className={clsx('py-2')}>
|
||||
<div className={clsx('min-h-8 pt-2')}>
|
||||
{status && (
|
||||
<div
|
||||
className={clsx(
|
||||
|
||||
Reference in New Issue
Block a user