fix: 修复镜像列表滚动条问题 #238

web/src/components/MsdDialog.vue

@@ -28,7 +28,6 @@ import { Label } from '@/components/ui/label'
 import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'
 import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group'
 import { Separator } from '@/components/ui/separator'
-import { ScrollArea } from '@/components/ui/scroll-area'
 import {
   HardDrive,
   Upload,
@@ -512,7 +511,7 @@ onUnmounted(() => {
   <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">
-      <DialogHeader class="px-6 pt-6">
+      <DialogHeader class="px-6 pt-6 shrink-0">
         <DialogTitle class="flex items-center gap-2">
           <HardDrive class="h-5 w-5" />
           {{ t('msd.title') }}
@@ -551,10 +550,11 @@ onUnmounted(() => {
         </DialogDescription>
       </DialogHeader>
 
-      <Separator />
+      <Separator class="shrink-0" />
 
-      <Tabs v-model="activeTab" class="flex-1 flex flex-col overflow-hidden px-6 pb-6 pt-4">
-        <TabsList class="w-full grid grid-cols-2">
+      <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">
             <Disc class="h-4 w-4 mr-1.5" />
             {{ t('msd.images') }}
@@ -566,15 +566,13 @@ onUnmounted(() => {
         </TabsList>
 
         <!-- Tab Description -->
-        <p class="text-xs text-muted-foreground mt-2 mb-1">
+        <p class="text-xs text-muted-foreground mt-2 mb-1 shrink-0">
           {{ activeTab === 'images' ? t('msd.imagesDesc') : t('msd.driveDesc') }}
         </p>
 
-        <ScrollArea class="flex-1 mt-2">
-          <!-- Images Tab -->
-          <TabsContent value="images" class="m-0 space-y-3 pr-4">
+          <TabsContent value="images" class="flex-1 min-h-0 m-0 flex flex-col space-y-3">
             <!-- Compact Upload Toolbar -->
-            <div class="flex items-center gap-2 min-w-0">
+            <div class="shrink-0 flex items-center gap-2 min-w-0">
               <label class="flex-1">
                 <input
                   type="file"
@@ -598,10 +596,10 @@ onUnmounted(() => {
                 {{ t('msd.downloadFromUrl') }}
               </Button>
             </div>
-            <Progress v-if="uploading" :model-value="uploadProgress" class="h-1" />
+            <Progress v-if="uploading" :model-value="uploadProgress" class="h-1 shrink-0" />
 
             <!-- Options - Vertical compact layout -->
-            <div class="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="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" />
@@ -629,19 +627,20 @@ onUnmounted(() => {
             </div>
 
             <!-- Image List -->
-            <div class="space-y-2 min-w-0">
-              <div class="flex items-center justify-between">
+            <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">
                 <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>
 
-              <div v-if="images.length === 0" class="text-center py-6 text-muted-foreground text-sm">
+              <div v-if="images.length === 0" class="shrink-0 text-center py-6 text-muted-foreground text-sm">
                 {{ t('msd.noImages') }}
               </div>
 
-              <div v-else class="space-y-2">
+              <div v-else class="flex-1 min-h-0 overflow-y-auto pr-2 custom-scrollbar">
+                <div class="space-y-2">
                   <div
                     v-for="image in images"
                     :key="image.id"
@@ -719,9 +718,10 @@ onUnmounted(() => {
                     </div>
                   </div>
                 </div>
+              </div>
 
               <!-- System Storage Footer -->
-              <div v-if="systemStore.diskSpace" class="pt-2 border-t mt-2">
+              <div v-if="systemStore.diskSpace" class="shrink-0 pt-2 border-t mt-2">
                 <p class="text-[11px] text-muted-foreground text-center">
                   {{ t('msd.systemAvailable') }}: {{ formatBytes(systemStore.diskSpace.available) }}
                 </p>
@@ -729,10 +729,9 @@ onUnmounted(() => {
             </div>
           </TabsContent>
 
-          <!-- Drive Tab -->
-          <TabsContent value="drive" class="m-0 space-y-4 pr-4">
+          <TabsContent value="drive" class="flex-1 min-h-0 m-0 flex flex-col space-y-4">
             <template v-if="!driveInitialized">
-              <div class="text-center py-8 space-y-4">
+              <div class="shrink-0 text-center py-8 space-y-4">
                 <HardDrive class="h-10 w-10 mx-auto text-muted-foreground" />
                 <p class="text-sm text-muted-foreground">{{ t('msd.driveNotInitialized') }}</p>
                 <Button size="sm" @click="initializeDrive">
@@ -743,7 +742,7 @@ onUnmounted(() => {
 
             <template v-else>
               <!-- Drive Info Card -->
-              <div class="p-3 rounded-lg border space-y-3" :class="msdConnected && msdMode === 'drive' ? 'border-primary bg-primary/5' : 'bg-muted/50'">
+              <div class="shrink-0 p-3 rounded-lg border space-y-3" :class="msdConnected && msdMode === 'drive' ? 'border-primary bg-primary/5' : 'bg-muted/50'">
                 <div class="flex items-center justify-between">
                   <div class="flex items-center gap-2">
                     <HardDrive class="h-4 w-4 text-muted-foreground" />
@@ -801,9 +800,9 @@ onUnmounted(() => {
               </div>
 
               <!-- File Browser -->
-              <div class="space-y-2">
+              <div class="flex-1 min-h-0 flex flex-col space-y-2">
                 <!-- Toolbar -->
-                <div class="flex items-center justify-between gap-2">
+                <div class="shrink-0 flex items-center justify-between gap-2">
                   <div class="flex items-center gap-1 min-w-0 flex-1">
                     <Button
                       v-if="currentPath !== '/'"
@@ -827,7 +826,7 @@ onUnmounted(() => {
                       </template>
                     </nav>
                   </div>
-                  <div class="flex items-center gap-1 shrink-0">
+                  <div class="shrink-0 flex items-center gap-1 shrink-0">
                     <label>
                       <input type="file" class="hidden" :disabled="uploadingFile" @change="handleFileUpload" />
                       <Button variant="ghost" size="icon" as="span" class="h-7 w-7 cursor-pointer">
@@ -843,14 +842,15 @@ onUnmounted(() => {
                   </div>
                 </div>
 
-                <Progress v-if="uploadingFile" :model-value="fileUploadProgress" class="h-1" />
+                <Progress v-if="uploadingFile" :model-value="fileUploadProgress" class="h-1 shrink-0" />
 
                 <!-- File List -->
-                <div v-if="driveFiles.length === 0" class="text-center py-6 text-muted-foreground text-sm">
+                <div v-if="driveFiles.length === 0" class="shrink-0 text-center py-6 text-muted-foreground text-sm">
                   {{ t('msd.emptyFolder') }}
                 </div>
 
-                <div v-else class="space-y-1">
+                <div v-else class="flex-1 min-h-0 overflow-y-auto pr-2 custom-scrollbar">
+                  <div class="space-y-1">
                     <div
                       v-for="file in driveFiles"
                       :key="file.path"
@@ -900,10 +900,11 @@ onUnmounted(() => {
                     </div>
                   </div>
                 </div>
+              </div>
             </template>
           </TabsContent>
-        </ScrollArea>
         </Tabs>
+      </div>
     </DialogContent>
   </Dialog>
   </TooltipProvider>
@@ -1102,3 +1103,28 @@ onUnmounted(() => {
     </DialogContent>
   </Dialog>
 </template>
+
+<style scoped>
+.custom-scrollbar::-webkit-scrollbar {
+  width: 6px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb {
+  background: hsl(var(--muted-foreground) / 0.3);
+  border-radius: 10px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb:hover {
+  background: hsl(var(--muted-foreground) / 0.5);
+}
+
+/* For Firefox */
+.custom-scrollbar {
+  scrollbar-width: thin;
+  scrollbar-color: hsl(var(--muted-foreground) / 0.3) transparent;
+}
+</style>

web/src/components/MsdSheet.vue

@@ -18,7 +18,6 @@ import { Input } from '@/components/ui/input'
 import { Switch } from '@/components/ui/switch'
 import { Label } from '@/components/ui/label'
 import { Separator } from '@/components/ui/separator'
-import { ScrollArea } from '@/components/ui/scroll-area'
 import {
   Dialog,
   DialogContent,
@@ -294,8 +293,8 @@ onMounted(async () => {
 
 <template>
   <Sheet :open="open" @update:open="emit('update:open', $event)">
-    <SheetContent side="right" class="w-full sm:max-w-lg overflow-hidden flex flex-col">
-      <SheetHeader>
+    <SheetContent side="right" class="w-full sm:max-w-lg overflow-hidden flex flex-col h-[dvh]">
+      <SheetHeader class="shrink-0">
         <div class="flex items-center justify-between pr-8">
           <div>
             <SheetTitle class="flex items-center gap-2">
@@ -314,10 +313,10 @@ onMounted(async () => {
         </div>
       </SheetHeader>
 
-      <Separator class="my-4" />
+      <Separator class="my-4 shrink-0" />
 
-      <Tabs v-model="activeTab" class="flex-1 flex flex-col overflow-hidden">
-        <TabsList class="w-full grid grid-cols-2">
+      <Tabs v-model="activeTab" class="flex-1 flex flex-col min-h-0 overflow-hidden">
+        <TabsList class="w-full grid grid-cols-2 shrink-0">
           <TabsTrigger value="images">
             <Disc class="h-4 w-4 mr-1.5" />
             {{ t('msd.images') }}
@@ -328,11 +327,11 @@ onMounted(async () => {
           </TabsTrigger>
         </TabsList>
 
-        <ScrollArea class="flex-1 mt-4">
+        <div class="flex-1 min-h-0 mt-4 flex flex-col">
           <!-- Images Tab -->
-          <TabsContent value="images" class="m-0 space-y-4">
+          <TabsContent value="images" class="flex-1 min-h-0 m-0 flex flex-col space-y-4">
             <!-- Upload Area -->
-            <div class="space-y-3">
+            <div class="shrink-0 space-y-3">
               <label class="block">
                 <input
                   type="file"
@@ -352,7 +351,7 @@ onMounted(async () => {
             </div>
 
             <!-- Options -->
-            <div class="flex items-center gap-4 p-3 rounded-lg bg-muted/50">
+            <div class="shrink-0 flex items-center gap-4 p-3 rounded-lg bg-muted/50">
               <div class="flex items-center gap-2">
                 <Switch id="cdrom" v-model:checked="cdromMode" />
                 <Label for="cdrom" class="text-xs">{{ t('msd.cdromMode') }}</Label>
@@ -364,19 +363,20 @@ onMounted(async () => {
             </div>
 
             <!-- Image List -->
-            <div class="space-y-2">
-              <div class="flex items-center justify-between">
+            <div class="flex-1 min-h-0 flex flex-col space-y-2">
+              <div class="shrink-0 flex items-center justify-between">
                 <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>
 
-              <div v-if="images.length === 0" class="text-center py-6 text-muted-foreground text-sm">
+              <div v-if="images.length === 0" class="shrink-0 text-center py-6 text-muted-foreground text-sm">
                 {{ t('msd.noImages') }}
               </div>
 
-              <div v-else class="space-y-1.5">
+              <ScrollArea v-else class="flex-1 min-h-0 pr-4">
+                <div class="space-y-1.5">
                   <div
                     v-for="image in images"
                     :key="image.id"
@@ -414,13 +414,14 @@ onMounted(async () => {
                     </div>
                   </div>
                 </div>
+              </ScrollArea>
             </div>
           </TabsContent>
 
           <!-- Drive Tab -->
-          <TabsContent value="drive" class="m-0 space-y-4">
+          <TabsContent value="drive" class="flex-1 min-h-0 m-0 flex flex-col space-y-4">
             <template v-if="!driveInitialized">
-              <div class="text-center py-8 space-y-4">
+              <div class="shrink-0 text-center py-8 space-y-4">
                 <HardDrive class="h-10 w-10 mx-auto text-muted-foreground" />
                 <p class="text-sm text-muted-foreground">{{ t('msd.driveNotInitialized') }}</p>
                 <Button size="sm" @click="initializeDrive">
@@ -431,7 +432,7 @@ onMounted(async () => {
 
             <template v-else>
               <!-- Drive Info -->
-              <div class="p-3 rounded-lg bg-muted/50 space-y-2">
+              <div class="shrink-0 p-3 rounded-lg bg-muted/50 space-y-2">
                 <div class="flex items-center justify-between">
                   <div class="space-y-0.5">
                     <p class="text-xs text-muted-foreground">{{ t('msd.driveSize') }}: {{ (driveInfo?.size || 0) / 1024 / 1024 }}MB</p>
@@ -459,9 +460,9 @@ onMounted(async () => {
               </div>
 
               <!-- File Browser -->
-              <div class="space-y-2">
+              <div class="flex-1 min-h-0 flex flex-col space-y-2">
                 <!-- Toolbar -->
-                <div class="flex items-center justify-between gap-2">
+                <div class="shrink-0 flex items-center justify-between gap-2">
                   <div class="flex items-center gap-1 min-w-0 flex-1">
                     <Button
                       v-if="currentPath !== '/'"
@@ -485,7 +486,7 @@ onMounted(async () => {
                       </template>
                     </nav>
                   </div>
-                  <div class="flex items-center gap-1 shrink-0">
+                  <div class="shrink-0 flex items-center gap-1 shrink-0">
                     <label>
                       <input type="file" class="hidden" :disabled="uploadingFile" @change="handleFileUpload" />
                       <Button variant="ghost" size="icon" as="span" class="h-7 w-7 cursor-pointer">
@@ -501,14 +502,15 @@ onMounted(async () => {
                   </div>
                 </div>
 
-                <Progress v-if="uploadingFile" :model-value="fileUploadProgress" class="h-1" />
+                <Progress v-if="uploadingFile" :model-value="fileUploadProgress" class="h-1 shrink-0" />
 
                 <!-- File List -->
-                <div v-if="driveFiles.length === 0" class="text-center py-6 text-muted-foreground text-sm">
+                <div v-if="driveFiles.length === 0" class="shrink-0 text-center py-6 text-muted-foreground text-sm">
                   {{ t('msd.emptyFolder') }}
                 </div>
 
-                <div v-else class="space-y-1">
+                <ScrollArea v-else class="flex-1 min-h-0 pr-4">
+                  <div class="space-y-1">
                     <div
                       v-for="file in driveFiles"
                       :key="file.path"
@@ -550,10 +552,11 @@ onMounted(async () => {
                       </div>
                     </div>
                   </div>
+                </ScrollArea>
               </div>
             </template>
           </TabsContent>
-        </ScrollArea>
+        </div>
       </Tabs>
     </SheetContent>
   </Sheet>
@@ -588,3 +591,28 @@ onMounted(async () => {
     </DialogContent>
   </Dialog>
 </template>
+
+<style scoped>
+.custom-scrollbar::-webkit-scrollbar {
+  width: 6px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb {
+  background: hsl(var(--muted-foreground) / 0.3);
+  border-radius: 10px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb:hover {
+  background: hsl(var(--muted-foreground) / 0.5);
+}
+
+/* For Firefox */
+.custom-scrollbar {
+  scrollbar-width: thin;
+  scrollbar-color: hsl(var(--muted-foreground) / 0.3) transparent;
+}
+</style>