Administrator/NanoKVM-MIRROR
1
0
Fork 1
mirror of https://github.com/sipeed/NanoKVM.git synced 2026-09-11 00:22:56 -05:00
Code Issues Packages Projects Releases Wiki Activity

fix: optimized UI of image download and locale issue

Browse Source
This commit is contained in:
watermeko
2026-07-16 11:15:08 +00:00
parent 6071a6f57c
commit 83b600bbee
3 changed files with 22 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/i18n/locales/zh.ts
View File

@@ -241,7 +241,7 @@ const zh = {
ok: '确定', ok: '确定',
disabled: '/data 是只读分区，无法下载镜像', disabled: '/data 是只读分区，无法下载镜像',
uploadbox: '将文件拖放到此处或单击选择', uploadbox: '将文件拖放到此处或单击选择',
inputfile: '请输入图片文件', inputfile: '请输入镜像文件',
NoISO: '无 ISO', NoISO: '无 ISO',
sha256: 'SHA-256（可选）', sha256: 'SHA-256（可选）',
sha256Placeholder: '请输入 64 位 SHA-256 校验和', sha256Placeholder: '请输入 64 位 SHA-256 校验和',

2
web/src/i18n/locales/zh_tw.ts
View File

@@ -241,7 +241,7 @@ const zh_tw = {
ok: '確定', ok: '確定',
disabled: '/data 為唯讀目錄，無法下載映像檔', disabled: '/data 為唯讀目錄，無法下載映像檔',
uploadbox: '將檔案拖曳到此處或按一下選擇', uploadbox: '將檔案拖曳到此處或按一下選擇',
inputfile: '請輸入圖片檔案', inputfile: '請輸入映像檔案',
NoISO: '無 ISO' NoISO: '無 ISO'
}, },
power: { power: {

36
web/src/pages/desktop/menu/download.tsx
View File

@@ -317,18 +317,20 @@ export const DownloadImage = () => {
{!diskEnabled ? ( {!diskEnabled ? (
<div className="text-red-500">{t('download.disabled')}</div> <div className="text-red-500">{t('download.disabled')}</div>
) : ( ) : (
<> <div className="space-y-2">
<div> <div>
<div className="pb-1 text-neutral-500">{t('download.input')}</div> <div className="mb-1 text-neutral-500">{t('download.input')}</div>
<div className="flex items-center space-x-1"> <div className="flex items-center gap-1">
<Input <Input
ref={inputRef} ref={inputRef}
value={input} value={input}
onChange={handleChange} onChange={handleChange}
disabled={status === 'in_progress'} disabled={status === 'in_progress'}
className="min-w-0 flex-1"
/> />
<Button <Button
type="primary" type="primary"
className="h-10 w-16 shrink-0 px-0"
danger={isRemoteDownloading && status === 'in_progress'} danger={isRemoteDownloading && status === 'in_progress'}
onClick={() => onClick={() =>
isRemoteDownloading && status === 'in_progress' isRemoteDownloading && status === 'in_progress'
@@ -345,8 +347,8 @@ export const DownloadImage = () => {
</Button> </Button>
</div> </div>
</div> </div>
<div className="mt-2"> <div>
<div className="pb-1 text-neutral-500">{t('download.sha256')}</div> <div className="mb-1 text-neutral-500">{t('download.sha256')}</div>
<Input <Input
value={sha256sum} value={sha256sum}
onChange={handleSha256Change} onChange={handleSha256Change}
@@ -356,14 +358,16 @@ export const DownloadImage = () => {
/> />
</div> </div>
<div> <div>
<div className="pb-1 text-neutral-500">{t('download.inputfile')}</div> <div className="mb-1 text-neutral-500">{t('download.inputfile')}</div>
<div className="flex items-center space-x-1"> <div className="flex items-center gap-1">
<div <div
className={clsx( 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", 'flex h-10 min-w-0 flex-1 flex-col items-center justify-center rounded-xl border-2 border-solid transition',
isDragging ? "bg-neutral-500 border-blue-500" : "", isDragging ? 'border-blue-500 bg-neutral-500' : 'border-neutral-600',
status === "in_progress" ? "opacity-50 cursor-not-allowed pointer-events-none border-neutral-600 bg-neutral-700" : "cursor-pointer hover:bg-neutral-500" status === 'in_progress'
)} ? 'cursor-not-allowed bg-neutral-700 opacity-50'
: 'cursor-pointer hover:bg-neutral-500'
)}
onDrop={(e) => { onDrop={(e) => {
if (status === "in_progress") return; // deaktiviert if (status === "in_progress") return; // deaktiviert
e.preventDefault(); e.preventDefault();
@@ -393,7 +397,7 @@ export const DownloadImage = () => {
document.getElementById("file-upload")?.click() 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')} {selectedFile ? selectedFile.name : t('download.uploadbox')}
</span> </span>
@@ -407,7 +411,7 @@ export const DownloadImage = () => {
</div> </div>
<Button <Button
type="primary" type="primary"
className="h-10 border-2" className="h-10 w-16 shrink-0 border-2 px-0"
onClick={() => upload(selectedFile)} onClick={() => upload(selectedFile)}
disabled={status === 'in_progress' || !selectedFile} disabled={status === 'in_progress' || !selectedFile}
> >
@@ -415,9 +419,9 @@ export const DownloadImage = () => {
</Button> </Button>
</div> </div>
</div> </div>
</> </div>
)} )}
<div className={clsx('py-2')}> <div className={clsx('min-h-8 pt-2')}>
{status && ( {status && (
<div <div
className={clsx( className={clsx(