mirror of
https://github.com/mofeng-git/One-KVM.git
synced 2026-09-12 18:44:25 +08:00
feat: 虚拟媒体显示镜像上传进度百分比
This commit is contained in:
@@ -71,6 +71,9 @@ const loadingImages = ref(false)
|
|||||||
const imagesError = ref<string | null>(null)
|
const imagesError = ref<string | null>(null)
|
||||||
const uploadProgress = ref(0)
|
const uploadProgress = ref(0)
|
||||||
const uploading = ref(false)
|
const uploading = ref(false)
|
||||||
|
const uploadProgressPercent = computed(() =>
|
||||||
|
Math.round(Math.min(100, Math.max(0, uploadProgress.value))),
|
||||||
|
)
|
||||||
|
|
||||||
const mountMode = ref<'cdrom' | 'flash'>('flash')
|
const mountMode = ref<'cdrom' | 'flash'>('flash')
|
||||||
// Default to readwrite for flash mode; cdrom forces readonly anyway
|
// Default to readwrite for flash mode; cdrom forces readonly anyway
|
||||||
@@ -821,7 +824,17 @@ onUnmounted(() => {
|
|||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<Progress v-if="uploading" :model-value="uploadProgress" class="h-1 shrink-0" />
|
<div class="min-h-0 flex-1 overflow-y-auto pr-2 custom-scrollbar">
|
||||||
|
<div class="space-y-2">
|
||||||
|
<div
|
||||||
|
v-if="uploading"
|
||||||
|
class="grid shrink-0 grid-cols-[minmax(0,1fr)_auto] items-center gap-2"
|
||||||
|
>
|
||||||
|
<Progress :model-value="uploadProgress" class="h-1 min-w-0" />
|
||||||
|
<span class="justify-self-end text-right text-xs tabular-nums text-muted-foreground">
|
||||||
|
{{ uploadProgressPercent }}%
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
<Skeleton v-if="loadingImages" class="h-24 w-full" />
|
<Skeleton v-if="loadingImages" class="h-24 w-full" />
|
||||||
<div
|
<div
|
||||||
@@ -841,11 +854,8 @@ onUnmounted(() => {
|
|||||||
</EmptyHeader>
|
</EmptyHeader>
|
||||||
</Empty>
|
</Empty>
|
||||||
|
|
||||||
<div v-else class="flex-1 min-h-0 overflow-y-auto pr-2 custom-scrollbar">
|
<template v-else v-for="image in images" :key="image.id">
|
||||||
<div class="space-y-2">
|
|
||||||
<div
|
<div
|
||||||
v-for="image in images"
|
|
||||||
:key="image.id"
|
|
||||||
class="rounded-md border p-2.5 transition-colors"
|
class="rounded-md border p-2.5 transition-colors"
|
||||||
:class="[
|
:class="[
|
||||||
mountedImage(image.id)
|
mountedImage(image.id)
|
||||||
@@ -923,6 +933,7 @@ onUnmounted(() => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</template>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user