GithubFollow/One-KVM
1
0
Fork 0
mirror of https://github.com/mofeng-git/One-KVM.git synced 2026-09-13 02:54:26 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: 虚拟媒体支持同时挂载多个镜像

Browse Source
This commit is contained in:
mofeng-git
2026-07-12 11:40:01 +08:00
parent c9ae9dd893
commit 7c9166a8cf
24 changed files with 1513 additions and 1036 deletions
Download Patch File Download Diff File Expand all files Collapse all files

449
web/src/components/MsdDialog.vue
View File

@@ -3,7 +3,7 @@ import { ref, onMounted, onUnmounted, computed, watch } from 'vue'
import { useI18n } from 'vue-i18n'
import { toast } from 'vue-sonner'
import { useSystemStore } from '@/stores/system'
import { msdApi, type MsdImage, type DriveFile } from '@/api'
import { msdApi, type MsdImage, type DriveFile, type MountedMedia, type DiskMode } from '@/api'
import { ApiError } from '@/api/request'
import { useWebSocket } from '@/composables/useWebSocket'
import {
@@ -48,7 +48,6 @@ import {
AlertCircle,
Info,
} from 'lucide-vue-next'
import HelpTooltip from '@/components/HelpTooltip.vue'
const props = defineProps<{
open: boolean
@@ -77,8 +76,11 @@ const cdromMode = computed(() => mountMode.value === 'cdrom')
const readOnly = computed(() => accessMode.value === 'readonly')
const connecting = ref(false)
const disconnecting = ref(false)
const deleting = ref(false)
const modeChanging = ref(false)
const unmountingMediaId = ref<string | null>(null)
const pendingMountImage = ref<MsdImage | null>(null)
const showMountOptionsDialog = ref(false)
const driveFiles = ref<DriveFile[]>([])
const currentPath = ref('/')
@@ -149,28 +151,62 @@ const downloadProgress = ref<{
} | null>(null)
const TWO_POINT_TWO_GB = 2.2 * 1024 * 1024 * 1024
const tabTriggerClass = 'h-9 rounded-md border border-transparent bg-transparent text-center text-muted-foreground shadow-none hover:text-foreground data-[state=active]:border-border data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm'
const segmentedGroupClass = 'grid w-full grid-cols-2 items-center gap-1 rounded-md bg-muted p-1'
const segmentedItemClass = 'h-8 w-full justify-center rounded-md border border-transparent bg-transparent px-3 text-center text-xs text-muted-foreground shadow-none hover:bg-background/60 hover:text-foreground data-[state=on]:border-border data-[state=on]:bg-background data-[state=on]:text-foreground data-[state=on]:shadow-sm'
const msdConnected = computed(() => systemStore.msd?.connected ?? false)
const msdMode = computed(() => systemStore.msd?.mode ?? 'none')
const diskMode = computed(() => systemStore.msd?.diskMode ?? 'single')
const slotCapacity = computed(() => systemStore.msd?.slotCapacity ?? 1)
const mountedMedia = computed<MountedMedia[]>(() => systemStore.msd?.mountedMedia ?? [])
const mountedCount = computed(() => systemStore.msd?.mountedCount ?? mountedMedia.value.length)
const msdConnected = computed(() => mountedCount.value > 0)
const mediaSlotsFull = computed(() => mountedCount.value >= slotCapacity.value)
const driveMedia = computed(() => mountedMedia.value.find(media => media.kind === 'drive') ?? null)
// Drive is currently mounted on the target machine via USB — file ops are blocked
const driveConnectedToTarget = computed(() => msdConnected.value && msdMode.value === 'drive')
const driveConnectedToTarget = computed(() => !!driveMedia.value)
const operationInProgress = computed(() => {
return connecting.value ||
disconnecting.value ||
deleting.value ||
uploading.value ||
uploadingFile.value ||
initializingDrive.value ||
deletingDrive.value
deletingDrive.value ||
modeChanging.value ||
!!unmountingMediaId.value
})
const usbReenumerating = computed(() => systemStore.msd?.usbReenumerating || modeChanging.value)
function isLargeFile(image: MsdImage): boolean {
return image.size > TWO_POINT_TWO_GB
}
function isIsoImage(image: MsdImage): boolean {
return image.name.toLowerCase().endsWith('.iso')
}
function mountedImage(imageId: string): MountedMedia | null {
return mountedMedia.value.find(media => media.kind === 'image' && media.id === imageId) ?? null
}
function updateMountMode(value: unknown) {
const next = Array.isArray(value) ? value[0] : value
if (next !== 'cdrom' && next !== 'flash') return
mountMode.value = next
if (next === 'cdrom') {
accessMode.value = 'readonly'
}
}
function updateAccessMode(value: unknown) {
const next = Array.isArray(value) ? value[0] : value
if (next !== 'readonly' && next !== 'readwrite') return
accessMode.value = next
}
const breadcrumbs = computed(() => {
const parts = currentPath.value.split('/').filter(Boolean)
const crumbs = [{ name: '/', path: '/' }]
@@ -251,12 +287,30 @@ async function connectImage(image: MsdImage) {
return
}
if (mountedImage(image.id)) return
if (mediaSlotsFull.value) {
toast.error(t('msd.mediaSlotsFull'))
return
}
pendingMountImage.value = image
mountMode.value = isIsoImage(image) ? 'cdrom' : 'flash'
accessMode.value = isIsoImage(image) ? 'readonly' : 'readwrite'
showMountOptionsDialog.value = true
}
async function confirmImageMount() {
const image = pendingMountImage.value
if (!image || operationInProgress.value) return
connecting.value = true
try {
await msdApi.connect('image', image.id, cdromMode.value, readOnly.value)
await msdApi.mountImage(image.id, cdromMode.value, cdromMode.value || readOnly.value)
await systemStore.fetchMsdState()
showMountOptionsDialog.value = false
pendingMountImage.value = null
} catch (e) {
console.error('Failed to connect image:', e)
console.error('Failed to mount image:', e)
} finally {
connecting.value = false
}
@@ -268,30 +322,61 @@ async function connectDrive() {
return
}
if (driveConnectedToTarget.value) return
if (mediaSlotsFull.value) {
toast.error(t('msd.mediaSlotsFull'))
return
}
connecting.value = true
try {
await msdApi.connect('drive')
await msdApi.mountDrive()
await systemStore.fetchMsdState()
} catch (e) {
console.error('Failed to connect drive:', e)
console.error('Failed to mount drive:', e)
} finally {
connecting.value = false
}
}
async function disconnect() {
if (operationInProgress.value) {
return
}
async function unmountMedia(media: MountedMedia) {
if (operationInProgress.value) return
disconnecting.value = true
unmountingMediaId.value = `${media.kind}:${media.id}`
try {
await msdApi.disconnect()
if (media.kind === 'drive') {
await msdApi.unmountDrive()
await refreshDriveBrowser()
} else {
await msdApi.unmountImage(media.id)
}
await systemStore.fetchMsdState()
} catch (e) {
console.error('Failed to disconnect:', e)
console.error('Failed to unmount media:', e)
} finally {
disconnecting.value = false
unmountingMediaId.value = null
}
}
async function unmountImageById(imageId: string) {
const media = mountedImage(imageId)
if (media) {
await unmountMedia(media)
}
}
async function changeDiskMode(value: unknown) {
const next = Array.isArray(value) ? value[0] : value
if ((next !== 'single' && next !== 'multi') || next === diskMode.value || operationInProgress.value) return
modeChanging.value = true
try {
await msdApi.setDiskMode(next as DiskMode)
await systemStore.fetchMsdState()
} catch (e) {
console.error('Failed to change MSD disk mode:', e)
} finally {
modeChanging.value = false
}
}
@@ -591,35 +676,60 @@ onUnmounted(() => {
<template>
<TooltipProvider>
<Dialog :open="open" @update:open="emit('update:open', $event)">
<DialogContent class="sm:max-w-[600px] max-h-[90vh] overflow-hidden flex flex-col p-0">
<DialogContent class="max-h-[90vh] overflow-hidden p-0 sm:max-w-[760px] flex flex-col">
<DialogHeader class="px-6 pt-6 shrink-0">
<DialogTitle class="flex items-center gap-2">
<HardDrive class="h-5 w-5" />
{{ t('msd.title') }}
</DialogTitle>
<DialogDescription class="flex items-center flex-wrap gap-x-2 gap-y-1 mt-1">
<span :class="msdConnected ? 'text-green-600 dark:text-green-400' : 'text-muted-foreground'" class="flex items-center gap-1.5">
<span class="relative flex h-2 w-2">
<span v-if="msdConnected" class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
<span :class="msdConnected ? 'bg-green-500' : 'bg-muted-foreground'" class="relative inline-flex rounded-full h-2 w-2"></span>
<DialogDescription as="div" class="mt-1 flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
<span class="flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1">
<span :class="msdConnected ? 'text-green-600 dark:text-green-400' : 'text-muted-foreground'" class="flex items-center gap-1.5">
<span class="relative flex h-2 w-2">
<span v-if="msdConnected" class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
<span :class="msdConnected ? 'bg-green-500' : 'bg-muted-foreground'" class="relative inline-flex rounded-full h-2 w-2"></span>
</span>
{{ msdConnected ? t('common.connected') : t('common.disconnected') }}
</span>
{{ msdConnected ? t('common.connected') : t('common.disconnected') }}
</span>
<template v-if="msdConnected">
<span class="text-muted-foreground">·</span>
<Badge variant="secondary" class="text-xs">{{ msdMode === 'drive' ? t('msd.drive') : t('msd.images') }}</Badge>
<Button
<Badge variant="secondary" class="h-6 rounded-md px-2 text-xs">{{ t('msd.mediaCount', { count: mountedCount, capacity: slotCapacity }) }}</Badge>
<Badge
v-if="mediaSlotsFull"
variant="outline"
size="sm"
class="h-6 px-2 text-xs text-destructive hover:text-destructive hover:bg-destructive/10 border-destructive/30"
:disabled="operationInProgress"
@click="disconnect"
class="h-6 rounded-md border-amber-500/40 bg-amber-500/10 px-2 text-xs text-amber-700 dark:text-amber-400"
>
<Unlink v-if="!disconnecting" class="h-3 w-3 mr-1" />
<span v-if="disconnecting">{{ t('common.disconnecting') }}...</span>
<span v-else>{{ t('msd.disconnect') }}</span>
</Button>
</template>
{{ t('msd.mediaSlotsFull') }}
</Badge>
<span v-if="usbReenumerating" class="text-xs text-amber-600 dark:text-amber-400">
{{ t('msd.reenumerating') }}
</span>
</span>
<span class="flex w-full shrink-0 items-center gap-2 sm:w-auto">
<span class="flex shrink-0 items-center gap-1.5">
<span class="font-medium text-foreground">{{ t('msd.diskMode') }}</span>
<Tooltip>
<TooltipTrigger as-child>
<span class="inline-flex h-4 w-4 items-center justify-center rounded-full text-muted-foreground hover:text-foreground">
<Info class="h-3.5 w-3.5" />
</span>
</TooltipTrigger>
<TooltipContent>
<p class="max-w-xs">{{ t('msd.diskModeHint') }}</p>
</TooltipContent>
</Tooltip>
</span>
<ToggleGroup
:model-value="diskMode"
type="single"
size="sm"
:class="[segmentedGroupClass, 'min-w-0 flex-1 sm:w-[200px] sm:flex-none']"
:disabled="operationInProgress"
@update:model-value="changeDiskMode"
>
<ToggleGroupItem value="single" :class="segmentedItemClass">{{ t('msd.singleDiskMode') }}</ToggleGroupItem>
<ToggleGroupItem value="multi" :class="segmentedItemClass">{{ t('msd.multiDiskMode') }}</ToggleGroupItem>
</ToggleGroup>
</span>
</DialogDescription>
</DialogHeader>
@@ -627,86 +737,51 @@ onUnmounted(() => {
<div class="flex-1 min-h-0 flex flex-col px-6 pb-6 pt-4">
<Tabs v-model="activeTab" class="flex-1 flex flex-col min-h-0">
<TabsList class="w-full grid grid-cols-2 shrink-0">
<TabsTrigger value="images">
<TabsList class="grid h-auto w-full shrink-0 grid-cols-2 gap-1 rounded-md border border-border bg-muted p-1">
<TabsTrigger value="images" :class="tabTriggerClass">
<Disc class="h-4 w-4 mr-1.5" />
{{ t('msd.images') }}
</TabsTrigger>
<TabsTrigger value="drive">
<TabsTrigger value="drive" :class="tabTriggerClass">
<HardDrive class="h-4 w-4 mr-1.5" />
{{ t('msd.drive') }}
</TabsTrigger>
</TabsList>
<!-- Tab Description -->
<p class="text-xs text-muted-foreground mt-2 mb-1 shrink-0">
{{ activeTab === 'images' ? t('msd.imagesDesc') : t('msd.driveDesc') }}
</p>
<TabsContent value="images" class="flex-1 min-h-0 m-0 flex flex-col space-y-3">
<!-- Compact Upload Toolbar -->
<div class="shrink-0 flex items-center gap-2 min-w-0">
<label class="flex-1">
<input
type="file"
class="hidden"
accept=".iso,.img"
:disabled="uploading"
@change="handleImageUpload"
/>
<Button variant="outline" size="sm" as="span" class="w-full cursor-pointer">
<Upload class="h-4 w-4 mr-1.5" />
{{ t('msd.uploadImage') }}
</Button>
</label>
<Button
variant="outline"
size="sm"
class="flex-1"
@click="showUrlDialog = true"
>
<Globe class="h-4 w-4 mr-1.5" />
{{ t('msd.downloadFromUrl') }}
</Button>
</div>
<Progress v-if="uploading" :model-value="uploadProgress" class="h-1 shrink-0" />
<!-- Options - Vertical compact layout -->
<div class="shrink-0 flex flex-wrap items-center gap-x-4 gap-y-2 p-2 rounded-lg bg-muted/50 text-xs min-w-0">
<div class="flex items-center gap-1.5">
<span class="text-muted-foreground whitespace-nowrap">{{ t('msd.storageMode') }}:</span>
<HelpTooltip :content="mountMode === 'flash' ? t('help.flashMode') : t('help.cdromMode')" icon-size="sm" />
<ToggleGroup v-model="mountMode" type="single" variant="outline" size="sm">
<ToggleGroupItem value="flash" class="h-6 px-2 text-xs data-[state=on]:bg-primary data-[state=on]:text-primary-foreground">
{{ t('msd.flash') }}
</ToggleGroupItem>
<ToggleGroupItem value="cdrom" class="h-6 px-2 text-xs data-[state=on]:bg-primary data-[state=on]:text-primary-foreground">
{{ t('msd.cdrom') }}
</ToggleGroupItem>
</ToggleGroup>
</div>
<div class="flex items-center gap-1.5">
<span class="text-muted-foreground whitespace-nowrap">{{ t('msd.accessMode') }}:</span>
<HelpTooltip :content="accessMode === 'readonly' ? t('help.readOnlyMode') : t('help.readWriteMode')" icon-size="sm" />
<ToggleGroup v-model="accessMode" type="single" variant="outline" size="sm">
<ToggleGroupItem value="readonly" class="h-6 px-2 text-xs data-[state=on]:bg-primary data-[state=on]:text-primary-foreground">
{{ t('msd.readOnly') }}
</ToggleGroupItem>
<ToggleGroupItem value="readwrite" class="h-6 px-2 text-xs data-[state=on]:bg-primary data-[state=on]:text-primary-foreground">
{{ t('msd.readWrite') }}
</ToggleGroupItem>
</ToggleGroup>
</div>
</div>
<TabsContent value="images" class="m-0 flex min-h-0 flex-1 flex-col space-y-3 pt-3">
<!-- Image List -->
<div class="flex-1 min-h-0 flex flex-col space-y-2 min-w-0">
<div class="shrink-0 flex items-center justify-between">
<div class="flex shrink-0 flex-wrap items-center justify-between gap-2">
<h4 class="text-sm font-medium">{{ t('msd.imageList') }}</h4>
<Button variant="ghost" size="icon" class="h-7 w-7" @click="loadImages">
<RefreshCw class="h-3.5 w-3.5" :class="{ 'animate-spin': loadingImages }" />
</Button>
<div class="flex flex-wrap items-center justify-end gap-1.5">
<label>
<input
type="file"
class="hidden"
accept=".iso,.img"
:disabled="uploading"
@change="handleImageUpload"
/>
<Button variant="outline" size="sm" as="span" class="h-8 cursor-pointer px-2.5 text-xs">
<Upload class="mr-1.5 h-3.5 w-3.5" />
{{ t('msd.uploadImage') }}
</Button>
</label>
<Button
variant="outline"
size="sm"
class="h-8 px-2.5 text-xs"
@click="showUrlDialog = true"
>
<Globe class="mr-1.5 h-3.5 w-3.5" />
{{ t('msd.downloadFromUrl') }}
</Button>
<Button variant="ghost" size="icon" class="h-8 w-8" @click="loadImages">
<RefreshCw class="h-3.5 w-3.5" :class="{ 'animate-spin': loadingImages }" />
</Button>
</div>
</div>
<Progress v-if="uploading" :model-value="uploadProgress" class="h-1 shrink-0" />
<div v-if="images.length === 0" class="shrink-0 text-center py-6 text-muted-foreground text-sm">
{{ t('msd.noImages') }}
@@ -717,16 +792,17 @@ onUnmounted(() => {
<div
v-for="image in images"
:key="image.id"
class="p-3 rounded-lg border transition-colors"
class="rounded-md border p-2.5 transition-colors"
:class="[
msdConnected && systemStore.msd?.imageId === image.id
? 'border-primary bg-primary/5'
: 'hover:bg-accent/50'
mountedImage(image.id)
? 'border-primary/40 bg-muted/50'
: 'border-border bg-background hover:bg-muted/40'
]"
>
<div class="flex items-start justify-between gap-2">
<div class="flex items-start gap-2 w-0 flex-1">
<Disc class="h-4 w-4 text-muted-foreground shrink-0 mt-0.5" />
<div class="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
<div class="flex min-w-0 flex-1 items-start gap-2">
<span v-if="mountedImage(image.id)" class="mt-1.5 h-2 w-2 shrink-0 rounded-full bg-primary" />
<Disc v-else class="mt-0.5 h-4 w-4 shrink-0 text-muted-foreground" />
<div class="w-0 flex-1">
<Tooltip>
<TooltipTrigger as-child>
@@ -755,22 +831,25 @@ onUnmounted(() => {
</div>
</div>
</div>
<div class="flex items-center gap-1.5 shrink-0">
<template v-if="msdConnected && systemStore.msd?.imageId === image.id">
<Badge variant="default" class="text-xs h-7 px-2">
<span class="relative flex h-1.5 w-1.5 mr-1.5">
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-white opacity-75"></span>
<span class="relative inline-flex rounded-full h-1.5 w-1.5 bg-white"></span>
</span>
{{ t('common.connected') }}
</Badge>
<div class="flex shrink-0 items-center justify-end gap-1.5">
<template v-if="mountedImage(image.id)">
<Button
variant="outline"
size="sm"
class="h-8 text-xs"
:disabled="operationInProgress"
@click="unmountImageById(image.id)"
>
<Unlink class="h-3.5 w-3.5 mr-1" />
{{ t('msd.disconnect') }}
</Button>
</template>
<template v-else>
<Button
variant="default"
size="sm"
class="h-7 text-xs"
:disabled="operationInProgress"
class="h-8 text-xs"
:disabled="operationInProgress || mediaSlotsFull"
@click="connectImage(image)"
>
<Link v-if="!connecting" class="h-3.5 w-3.5 mr-1" />
@@ -781,8 +860,8 @@ onUnmounted(() => {
<Button
variant="ghost"
size="icon"
class="h-7 w-7 text-destructive hover:text-destructive"
:disabled="operationInProgress || (msdConnected && systemStore.msd?.imageId === image.id)"
class="h-8 w-8 text-muted-foreground hover:bg-destructive/10 hover:text-destructive"
:disabled="operationInProgress || !!mountedImage(image.id)"
@click="confirmDelete('image', image.id, image.name)"
>
<Trash2 class="h-3.5 w-3.5" />
@@ -794,15 +873,15 @@ onUnmounted(() => {
</div>
<!-- System Storage Footer -->
<div v-if="systemStore.diskSpace" class="shrink-0 pt-2 border-t mt-2">
<p class="text-[11px] text-muted-foreground text-center">
<div v-if="systemStore.diskSpace" class="mt-2 shrink-0 border-t pt-2">
<p class="text-right text-[11px] text-muted-foreground">
{{ t('msd.systemAvailable') }}: {{ formatBytes(systemStore.diskSpace.available) }}
</p>
</div>
</div>
</TabsContent>
<TabsContent value="drive" class="flex-1 min-h-0 m-0 flex flex-col space-y-4">
<TabsContent value="drive" class="m-0 flex min-h-0 flex-1 flex-col space-y-4 pt-3">
<template v-if="!driveInitialized">
<div class="shrink-0 text-center py-8 space-y-4">
<HardDrive class="h-10 w-10 mx-auto text-muted-foreground" />
@@ -816,8 +895,8 @@ onUnmounted(() => {
<template v-else>
<!-- Drive Info Card -->
<div
class="shrink-0 p-3 rounded-lg border space-y-3"
:class="msdConnected && msdMode === 'drive'
class="shrink-0 space-y-3 rounded-md border p-3"
:class="driveConnectedToTarget
? 'border-primary bg-primary/5'
: driveError
? 'border-destructive/40 bg-destructive/5'
@@ -854,28 +933,39 @@ onUnmounted(() => {
<Button
variant="outline"
size="sm"
class="h-7 text-xs"
class="h-8 text-xs"
:disabled="operationInProgress"
@click="initializeDrive"
>
{{ t('msd.reinitializeDrive') }}
</Button>
</template>
<template v-else-if="msdConnected && msdMode === 'drive'">
<Badge variant="default" class="text-xs h-7 px-2">
<template v-else-if="driveConnectedToTarget">
<Badge variant="default" class="h-8 px-2 text-xs">
<span class="relative flex h-1.5 w-1.5 mr-1.5">
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-white opacity-75"></span>
<span class="relative inline-flex rounded-full h-1.5 w-1.5 bg-white"></span>
<span class="absolute inline-flex h-full w-full animate-ping rounded-full bg-primary-foreground opacity-75"></span>
<span class="relative inline-flex h-1.5 w-1.5 rounded-full bg-primary-foreground"></span>
</span>
{{ t('common.connected') }}
</Badge>
<Button
v-if="driveMedia"
variant="outline"
size="sm"
class="h-8 text-xs"
:disabled="operationInProgress"
@click="unmountMedia(driveMedia)"
>
<Unlink class="h-3.5 w-3.5 mr-1" />
{{ t('msd.disconnect') }}
</Button>
</template>
<template v-else>
<Button
variant="default"
size="sm"
class="h-7 text-xs"
:disabled="operationInProgress"
class="h-8 text-xs"
:disabled="operationInProgress || mediaSlotsFull || !!driveError"
@click="connectDrive"
>
<Link v-if="!connecting" class="h-3.5 w-3.5 mr-1" />
@@ -886,8 +976,8 @@ onUnmounted(() => {
<Button
variant="ghost"
size="icon"
class="h-7 w-7 text-destructive hover:text-destructive"
:disabled="operationInProgress || msdConnected"
class="h-8 w-8 text-muted-foreground hover:bg-destructive/10 hover:text-destructive"
:disabled="operationInProgress || driveConnectedToTarget"
@click="showDeleteDriveDialog = true"
>
<Trash2 class="h-3.5 w-3.5" />
@@ -918,7 +1008,7 @@ onUnmounted(() => {
v-if="currentPath !== '/'"
variant="ghost"
size="icon"
class="h-7 w-7 shrink-0"
class="h-8 w-8 shrink-0"
:disabled="driveConnectedToTarget"
@click="navigateUp"
>
@@ -951,7 +1041,7 @@ onUnmounted(() => {
variant="ghost"
size="icon"
as="span"
class="h-7 w-7"
class="h-8 w-8"
:class="driveConnectedToTarget ? 'cursor-not-allowed opacity-40' : 'cursor-pointer'"
>
<Upload class="h-3.5 w-3.5" />
@@ -968,7 +1058,7 @@ onUnmounted(() => {
<Button
variant="ghost"
size="icon"
class="h-7 w-7"
class="h-8 w-8"
:disabled="driveConnectedToTarget"
@click="showNewFolderDialog = true"
>
@@ -982,7 +1072,7 @@ onUnmounted(() => {
<Button
variant="ghost"
size="icon"
class="h-7 w-7"
class="h-8 w-8"
:disabled="driveConnectedToTarget"
@click="loadDriveFiles"
>
@@ -1014,7 +1104,7 @@ onUnmounted(() => {
<div
v-for="file in driveFiles"
:key="file.path"
class="flex items-center justify-between p-2 rounded-lg hover:bg-accent/50 transition-colors"
class="flex items-center justify-between rounded-md p-2 transition-colors hover:bg-accent/50"
>
<div
class="flex items-center gap-2 cursor-pointer flex-1 min-w-0"
@@ -1041,7 +1131,7 @@ onUnmounted(() => {
v-if="!file.is_dir"
variant="ghost"
size="icon"
class="h-7 w-7"
class="h-8 w-8"
as="a"
:href="msdApi.downloadDriveFile(file.path)"
download
@@ -1052,7 +1142,7 @@ onUnmounted(() => {
<Button
variant="ghost"
size="icon"
class="h-7 w-7 text-destructive"
class="h-8 w-8 text-muted-foreground hover:bg-destructive/10 hover:text-destructive"
:disabled="driveConnectedToTarget"
@click="confirmDelete('file', file.path, file.name)"
>
@@ -1177,6 +1267,65 @@ onUnmounted(() => {
</DialogContent>
</Dialog>
<!-- Image Mount Options Dialog -->
<Dialog v-model:open="showMountOptionsDialog">
<DialogContent class="max-w-md">
<DialogHeader>
<DialogTitle>{{ t('msd.mountImage') }}</DialogTitle>
<DialogDescription>
{{ pendingMountImage?.name }}
</DialogDescription>
</DialogHeader>
<div class="space-y-4 py-2">
<div class="space-y-2">
<Label>{{ t('msd.storageMode') }}</Label>
<ToggleGroup
:model-value="mountMode"
type="single"
size="sm"
:class="segmentedGroupClass"
@update:model-value="updateMountMode"
>
<ToggleGroupItem value="flash" :class="segmentedItemClass">{{ t('msd.flash') }}</ToggleGroupItem>
<ToggleGroupItem value="cdrom" :class="segmentedItemClass">{{ t('msd.cdrom') }}</ToggleGroupItem>
</ToggleGroup>
</div>
<div class="space-y-2">
<Label>{{ t('msd.accessMode') }}</Label>
<ToggleGroup
:model-value="accessMode"
type="single"
size="sm"
:class="segmentedGroupClass"
@update:model-value="updateAccessMode"
>
<ToggleGroupItem value="readonly" :class="segmentedItemClass">{{ t('msd.readOnly') }}</ToggleGroupItem>
<ToggleGroupItem
value="readwrite"
:class="segmentedItemClass"
:disabled="cdromMode"
>
{{ t('msd.readWrite') }}
</ToggleGroupItem>
</ToggleGroup>
</div>
</div>
<DialogFooter>
<Button variant="outline" @click="showMountOptionsDialog = false" :disabled="connecting">
{{ t('common.cancel') }}
</Button>
<Button @click="confirmImageMount" :disabled="connecting || mediaSlotsFull">
<Link v-if="!connecting" class="h-4 w-4 mr-1" />
<span v-if="connecting">{{ t('common.connecting') }}...</span>
<span v-else>{{ t('msd.connect') }}</span>
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
<!-- New Folder Dialog -->
<Dialog v-model:open="showNewFolderDialog">
<DialogContent>
@@ -1223,7 +1372,7 @@ onUnmounted(() => {
</div>
<!-- Download Progress -->
<div v-if="downloadProgress" class="space-y-2 p-3 rounded-lg bg-muted/50">
<div v-if="downloadProgress" class="space-y-2 rounded-md bg-muted/50 p-3">
<div class="flex items-center justify-between text-sm">
<span class="truncate">{{ downloadProgress.filename }}</span>
<span class="text-muted-foreground shrink-0 ml-2">