✨ Feature(custom): add selected inhint and optimize UI of manage file explorer page

.stylelintrc.cjs

@@ -1,6 +1,6 @@
 module.exports = {
   extends: ['stylelint-config-standard', 'stylelint-config-html/vue', 'stylelint-config-standard-vue'],
-  plugins: ['stylelint-order'],
+  plugins: [],
   rules: {
     // 这里是允许了空的style标签
     'no-empty-source': null,
@@ -36,83 +36,5 @@ module.exports = {
     // property-no-vendor-prefix
     'property-no-vendor-prefix': true,
     // 属性的排序
-    'order/properties-order': [
-      'position',
-      'top',
-      'right',
-      'bottom',
-      'left',
-      'z-index',
-      'display',
-      'justify-content',
-      'align-items',
-      'float',
-      'clear',
-      'overflow',
-      'overflow-x',
-      'overflow-y',
-      'margin',
-      'margin-top',
-      'margin-right',
-      'margin-bottom',
-      'margin-left',
-      'border',
-      'border-style',
-      'border-width',
-      'border-color',
-      'border-top',
-      'border-top-style',
-      'border-top-width',
-      'border-top-color',
-      'border-right',
-      'border-right-style',
-      'border-right-width',
-      'border-right-color',
-      'border-bottom',
-      'border-bottom-style',
-      'border-bottom-width',
-      'border-bottom-color',
-      'border-left',
-      'border-left-style',
-      'border-left-width',
-      'border-left-color',
-      'border-radius',
-      'padding',
-      'padding-top',
-      'padding-right',
-      'padding-bottom',
-      'padding-left',
-      'width',
-      'min-width',
-      'max-width',
-      'height',
-      'min-height',
-      'max-height',
-      'font-size',
-      'font-family',
-      'font-weight',
-      'text-align',
-      'text-justify',
-      'text-indent',
-      'text-overflow',
-      'text-decoration',
-      'white-space',
-      'color',
-      'background',
-      'background-position',
-      'background-repeat',
-      'background-size',
-      'background-color',
-      'background-clip',
-      'opacity',
-      'filter',
-      'list-style',
-      'outline',
-      'visibility',
-      'box-shadow',
-      'text-shadow',
-      'resize',
-      'transition',
-    ],
   },
 }

src/renderer/components/VirtualScroller.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="containerRef" class="virtual-scroller" :style="{ height: `${containerHeight}px` }" @scroll="handleScroll">
+  <div ref="containerRef" class="virtual-scroller" @scroll="handleScroll">
     <div class="virtual-scroller-content" :style="contentStyles">
       <div
         class="virtual-scroller-viewport"
@@ -8,15 +8,11 @@
       >
         <div
           v-for="realIndex in visibleIndexes"
-          :key="
+          :key="items[realIndex] && items[realIndex][keyField || 'id'] ? items[realIndex][keyField || 'id'] : realIndex"
-            itemsRef[realIndex] && itemsRef[realIndex][props.keyField || 'id']
-              ? itemsRef[realIndex][props.keyField || 'id']
-              : realIndex
-          "
           class="virtual-scroller-item"
           :style="itemStyle"
         >
-          <slot :item="itemsRef[realIndex]" :index="realIndex" />
+          <slot :item="items[realIndex]" :index="realIndex" />
         </div>
       </div>
     </div>
@@ -24,73 +20,43 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onBeforeUnmount, onMounted, ref, useTemplateRef, watch } from 'vue'
+import { computed, onBeforeUnmount, onMounted, ref, useTemplateRef } from 'vue'
 
 import { useVirtualGrid } from '@/hooks/useVirtualGrid'
 
-type Item = any
 interface Breakpoint {
   min: number
   cols: number
 }
 
-const props = withDefaults(
+const {
-  defineProps<{
+  items,
-    items: Item[]
+  itemHeight,
+  gridBreakpoints = [],
+  bufferFactor = 0.5,
+  keyField = 'id',
+  itemPadding = 8,
+  viewMode = 'grid',
+} = defineProps<{
+  items: any[]
   itemHeight: number
-    height?: number
-    gridItems?: number
   gridBreakpoints?: Breakpoint[]
   bufferFactor?: number
-    pageMode?: boolean
   keyField?: string
   itemPadding?: number
   viewMode?: 'list' | 'grid'
-  }>(),
+}>()
-  {
-    height: 400,
-    gridItems: 1,
-    gridBreakpoints: () => [],
-    bufferFactor: 0.5,
-    pageMode: false,
-    keyField: 'id',
-    itemPadding: 0,
-    viewMode: 'grid',
-  },
-)
 
 const containerRef = useTemplateRef('containerRef')
-const containerHeight = ref<number>(props.pageMode ? 0 : props.height)
+const containerHeight = ref(0)
 const containerWidth = ref<number>(0)
 const parentScrollListeners = ref<HTMLElement[]>([])
-
+const sortedBreakpoints = computed<Breakpoint[]>(() => [...gridBreakpoints].sort((a, b) => a.min - b.min))
-const itemsRef = ref<Item[]>(props.items)
-watch(
-  () => props.items,
-  v => {
-    itemsRef.value = v
-  },
-)
-
-const localViewMode = ref<'list' | 'grid'>(props.viewMode)
-watch(
-  () => props.viewMode,
-  v => {
-    localViewMode.value = v
-  },
-)
-
-const sortedBreakpoints = computed<Breakpoint[]>(() => [...props.gridBreakpoints].sort((a, b) => a.min - b.min))
-
-const isForcedList = computed(() => localViewMode.value === 'list')
 
 const effectiveCols = computed<number>(() => {
-  if (isForcedList.value) return 1
+  if (viewMode === 'list') return 1
-
-  const base = Math.max(1, props.gridItems || 1)
-
   const w = containerWidth.value || 0
-  let cols = base
+  let cols = 1
   for (const bp of sortedBreakpoints.value) {
     if (w >= bp.min) cols = Math.max(1, bp.cols)
   }
@@ -101,11 +67,11 @@ const isGridMode = computed(() => effectiveCols.value > 1)
 
 const { gridCalculations, visibleIndexes, viewportOffset, updateScrollTop, scrollToItem, scrollToTop, scrollToBottom } =
   useVirtualGrid({
-    items: itemsRef,
+    items: () => items,
-    itemHeight: props.itemHeight,
+    itemHeight,
     containerHeight,
     gridItems: effectiveCols,
-    bufferFactor: props.bufferFactor,
+    bufferFactor,
   })
 
 const contentStyles = computed(() => ({
@@ -118,13 +84,13 @@ const viewportStyle = computed(() => {
   }
   if (isGridMode.value) {
     base['--items-per-row'] = String(effectiveCols.value)
-    base['--row-height'] = `${props.itemHeight}px`
+    base['--row-height'] = `${itemHeight}px`
-    base['--item-gap'] = `${props.itemPadding}px`
+    base['--item-gap'] = `${itemPadding}px`
   }
   return base
 })
 
-const itemStyle = computed(() => (isGridMode.value ? {} : { height: `${props.itemHeight}px` }))
+const itemStyle = computed(() => (isGridMode.value ? {} : { height: `${itemHeight}px` }))
 
 function handleScroll() {
   const c = containerRef.value
@@ -133,7 +99,6 @@ function handleScroll() {
 }
 
 function handlePageScroll() {
-  if (!props.pageMode) return
   const now = Date.now()
   if (now - lastScrollTime.value < 16) return
   lastScrollTime.value = now
@@ -158,74 +123,56 @@ let ro: ResizeObserver | null = null
 const lastScrollTime = ref(0)
 
 function updateContainerMetrics() {
-  const el = containerRef.value
+  if (!containerRef.value) return
-  if (!el) return
+  const rect = containerRef.value.getBoundingClientRect()
-  const rect = el.getBoundingClientRect()
   containerWidth.value = rect.width
-  if (props.pageMode) {
   containerHeight.value = Math.max(200, window.innerHeight - rect.top - 12)
-  } else {
-    containerHeight.value = props.height
-  }
 }
 
-onMounted(() => {
-  const el = containerRef.value
-  if (!el) return
-  ro = new ResizeObserver(updateContainerMetrics)
-  ro.observe(el as unknown as Element)
-  if (props.pageMode) {
-    ro.observe(document.documentElement)
-    window.addEventListener('scroll', handlePageScroll, { passive: true })
-    let parent = el.parentElement
-    while (parent) {
-      if (parent.scrollHeight > parent.clientHeight) {
-        parent.addEventListener('scroll', handlePageScroll, { passive: true })
-        parentScrollListeners.value.push(parent)
-      }
-      parent = parent.parentElement
-    }
-  }
-  updateContainerMetrics()
-  if (props.pageMode) {
-    window.addEventListener('resize', updateContainerMetrics, { passive: true })
-  }
-})
-
-onBeforeUnmount(() => {
-  if (ro) ro.disconnect()
-  window.removeEventListener('resize', updateContainerMetrics)
-  if (props.pageMode) {
-    window.removeEventListener('scroll', handlePageScroll)
-    parentScrollListeners.value.forEach(parent => {
-      parent.removeEventListener('scroll', handlePageScroll)
-    })
-    parentScrollListeners.value = []
-  }
-})
-
 function scrollTo(index: number) {
   scrollToItem(index)
 }
 
-function setViewMode(mode: 'list' | 'grid') {
-  localViewMode.value = mode
-}
-function toggleViewMode() {
-  setViewMode(isGridMode.value ? 'list' : 'grid')
-}
-
 function refresh() {
   updateContainerMetrics()
   if (containerRef.value) {
     updateScrollTop(containerRef.value.scrollTop)
   }
-  if (props.pageMode) {
   handlePageScroll()
-  }
 }
 
-defineExpose({ scrollTo, scrollToTop, scrollToBottom, setViewMode, toggleViewMode, refresh })
+onMounted(() => {
+  if (!containerRef.value) return
+  ro = new ResizeObserver(updateContainerMetrics)
+  ro.observe(containerRef.value)
+
+  ro.observe(document.documentElement)
+  window.addEventListener('scroll', handlePageScroll, { passive: true })
+  let parent = containerRef.value.parentElement
+  while (parent) {
+    if (parent.scrollHeight > parent.clientHeight) {
+      parent.addEventListener('scroll', handlePageScroll, { passive: true })
+      parentScrollListeners.value.push(parent)
+    }
+    parent = parent.parentElement
+  }
+
+  updateContainerMetrics()
+
+  window.addEventListener('resize', updateContainerMetrics, { passive: true })
+})
+
+onBeforeUnmount(() => {
+  if (ro) ro.disconnect()
+  window.removeEventListener('resize', updateContainerMetrics)
+  window.removeEventListener('scroll', handlePageScroll)
+  parentScrollListeners.value.forEach(parent => {
+    parent.removeEventListener('scroll', handlePageScroll)
+  })
+  parentScrollListeners.value = []
+})
+
+defineExpose({ scrollTo, scrollToTop, scrollToBottom, refresh })
 </script>
 
 <style scoped>

src/renderer/hooks/useVirtualGrid.ts

@@ -1,47 +1,44 @@
-import type { Ref } from 'vue'
+import type { MaybeRefOrGetter } from 'vue'
-import { computed, isRef, ref, watch } from 'vue'
+import { computed, ref, toValue, watch } from 'vue'
 
 export interface UseVirtualGridOptions {
-  items: Ref<any[]>
+  items: MaybeRefOrGetter<any[]>
   itemHeight: number
-  containerHeight: Ref<number>
+  containerHeight: MaybeRefOrGetter<number>
-  gridItems?: number | Ref<number>
+  gridItems?: number | MaybeRefOrGetter<number>
   bufferFactor?: number
 }
 
 export function useVirtualGrid(options: UseVirtualGridOptions) {
   const { items, itemHeight, containerHeight, gridItems = 1, bufferFactor = 0.5 } = options
 
-  const gridItemsRef = isRef(gridItems) ? gridItems : ref(gridItems)
   const scrollTop = ref(0)
 
   const gridCalculations = computed(() => {
-    const itemsPerRow = Math.max(1, gridItemsRef.value || 1)
+    const currentItems = toValue(items)
-    const totalRows = Math.ceil(items.value.length / itemsPerRow)
+    const itemsPerRow = Math.max(1, toValue(gridItems) || 1)
-    const rowHeight = itemHeight
+    const totalRows = Math.ceil(currentItems.length / itemsPerRow)
-    const totalHeight = totalRows * rowHeight
+    const totalHeight = totalRows * itemHeight
 
     return {
       itemsPerRow,
       totalRows,
-      rowHeight,
+      itemHeight,
       totalHeight,
     }
   })
 
   const visibleRange = computed(() => {
-    const { rowHeight, totalRows } = gridCalculations.value
+    const { itemHeight, totalRows } = gridCalculations.value
-    const height = containerHeight.value
+    const height = toValue(containerHeight)
 
-    if (!height || !rowHeight || totalRows === 0) {
+    if (!height || !itemHeight || totalRows === 0) {
       return { startRow: 0, endRow: 0, visibleRows: 0 }
     }
-
+    const buffer = Math.ceil((height / itemHeight) * bufferFactor)
-    const buffer = Math.ceil((height / rowHeight) * bufferFactor)
+    const startRow = Math.max(0, Math.floor(scrollTop.value / itemHeight) - buffer)
-    const startRow = Math.max(0, Math.floor(scrollTop.value / rowHeight) - buffer)
+    const visibleRows = Math.ceil(height / itemHeight) + buffer * 2
-    const visibleRows = Math.ceil(height / rowHeight) + buffer * 2
     const endRow = Math.min(totalRows, startRow + visibleRows)
-
     return { startRow, endRow, visibleRows }
   })
 
@@ -53,7 +50,7 @@ export function useVirtualGrid(options: UseVirtualGridOptions) {
     for (let rowIndex = startRow; rowIndex < endRow; rowIndex++) {
       for (let col = 0; col < itemsPerRow; col++) {
         const itemIndex = rowIndex * itemsPerRow + col
-        if (itemIndex < items.value.length) {
+        if (itemIndex < toValue(items).length) {
           indexes.push(itemIndex)
         }
       }
@@ -63,9 +60,9 @@ export function useVirtualGrid(options: UseVirtualGridOptions) {
   })
 
   const viewportOffset = computed(() => {
-    const { rowHeight } = gridCalculations.value
+    const { itemHeight } = gridCalculations.value
     const { startRow } = visibleRange.value
-    return startRow * rowHeight
+    return startRow * itemHeight
   })
 
   function updateScrollTop(newScrollTop: number) {
@@ -73,9 +70,9 @@ export function useVirtualGrid(options: UseVirtualGridOptions) {
   }
 
   function scrollToItem(index: number) {
-    const { itemsPerRow, rowHeight } = gridCalculations.value
+    const { itemsPerRow, itemHeight } = gridCalculations.value
     const rowIndex = Math.floor(index / itemsPerRow)
-    scrollTop.value = rowIndex * rowHeight
+    scrollTop.value = rowIndex * itemHeight
   }
 
   function scrollToTop() {
@@ -84,24 +81,20 @@ export function useVirtualGrid(options: UseVirtualGridOptions) {
 
   function scrollToBottom() {
     const { totalHeight } = gridCalculations.value
-    scrollTop.value = Math.max(0, totalHeight - containerHeight.value)
+    scrollTop.value = Math.max(0, totalHeight - toValue(containerHeight))
   }
 
-  watch(containerHeight, () => {
-    const { totalHeight } = gridCalculations.value
-    if (scrollTop.value > totalHeight - containerHeight.value) {
-      scrollTop.value = Math.max(0, totalHeight - containerHeight.value)
-    }
-  })
-
   watch(
-    () => items.value.length,
+    () => [toValue(containerHeight), toValue(items).length],
-    () => {
+    ([newHeight]) => {
       const { totalHeight } = gridCalculations.value
-      if (scrollTop.value > totalHeight - containerHeight.value) {
+      const maxScroll = Math.max(0, totalHeight - (newHeight as number))
-        scrollTop.value = Math.max(0, totalHeight - containerHeight.value)
+
+      if (scrollTop.value > maxScroll) {
+        scrollTop.value = maxScroll
       }
     },
+    { flush: 'post' },
   )
 
   return {

src/renderer/manage/pages/BucketPage.vue

@@ -266,9 +266,8 @@
     </div>
 
     <!-- Content Card -->
-    <div class="bucket-card content-card">
     <!-- Fullscreen Header (only visible in fullscreen mode) -->
-      <div v-if="isContentFullscreen" class="fullscreen-header">
+    <div v-if="isContentFullscreen" class="bucket-card fullscreen-header">
       <div class="fullscreen-header-left">
         <div class="fullscreen-breadcrumb">
           <HomeIcon class="action-icon" />
@@ -319,19 +318,22 @@
       </div>
     </div>
 
-      <div class="content-area">
+    <div class="bucket-card content-area">
       <!-- Virtual Scroller -->
-        <div class="virtual-scroller-container">
+      <div v-if="filterList.length === 0" class="empty-state">
+        <ImageIcon :size="64" class="empty-icon" />
+        <h3>{{ t('pages.gallery.noImagesFound') }}</h3>
+        <p>{{ t('pages.gallery.tryAdjustingFilters') }}</p>
+      </div>
       <VirtualScroller
+        v-else
         ref="virtualScrollerRef"
         :items="filterList"
+        class="virtual-gallery-scroller"
         :item-height="layoutStyle === 'grid' ? 240 : 70"
         :view-mode="layoutStyle"
         :grid-breakpoints="gridBreakpoints"
-            :page-mode="true"
-            :buffer-factor="0.5"
         key-field="key"
-            :item-padding="8"
       >
         <template #default="{ item, index }">
           <!-- Grid View -->
@@ -343,9 +345,7 @@
           >
             <div class="file-preview">
               <!-- Image Preview -->
-                  <template
+              <template v-if="!item.isDir && !['webdavplist', 'sftp', 'local', 's3plist'].includes(currentPicBedName)">
-                    v-if="!item.isDir && !['webdavplist', 'sftp', 'local', 's3plist'].includes(currentPicBedName)"
-                  >
                 <img v-if="isShowThumbnail && item.isImage" :src="item.url" class="file-image" @error="() => {}" />
                 <img v-else :src="`./assets/icons/${getFileIconPath(item.fileName ?? '')}`" class="file-image" />
               </template>
@@ -408,11 +408,7 @@
                   </button>
 
                   <!-- Download Folder -->
-                      <button
+                  <button v-if="item.isDir" class="file-action-button" @click.stop="handleFolderBatchDownload(item)">
-                        v-if="item.isDir"
-                        class="file-action-button"
-                        @click.stop="handleFolderBatchDownload(item)"
-                      >
                     <DownloadIcon class="action-icon" />
                   </button>
 
@@ -465,12 +461,7 @@
           </div>
 
           <!-- List View -->
-              <div
+          <div v-else class="file-list-item" :class="{ selected: item.checked }" @click="handleCheckChangeOther(item)">
-                v-else
-                class="file-list-item"
-                :class="{ selected: item.checked }"
-                @click="handleCheckChangeOther(item)"
-              >
             <!-- Checkbox -->
             <input v-model="item.checked" type="checkbox" class="file-list-checkbox file-checkbox" @click.stop />
 
@@ -552,8 +543,6 @@
         </template>
       </VirtualScroller>
     </div>
-      </div>
-    </div>
 
     <!-- URL Upload Dialog -->
     <div v-if="dialogVisible" class="modal-overlay" @click="dialogVisible = false">
@@ -779,7 +768,6 @@
                 )
               "
               :item-height="60"
-              :height="300"
               view-mode="list"
             >
               <template #default="{ item }">
@@ -869,7 +857,7 @@
                     {{ t('pages.manage.bucket.clearAll') }}
                   </button>
                 </div>
-                <VirtualScroller :items="uploadingTaskList" :item-height="60" :height="400" view-mode="list">
+                <VirtualScroller :items="uploadingTaskList" :item-height="60" view-mode="list">
                   <template #default="{ item }">
                     <div class="file-list-item">
                       <div class="file-list-info">
@@ -904,7 +892,6 @@
                 <VirtualScroller
                   :items="uploadedTaskList.filter(item => item.status === 'uploaded')"
                   :item-height="60"
-                  :height="400"
                   view-mode="list"
                 >
                   <template #default="{ item }">
@@ -944,7 +931,6 @@
                 <VirtualScroller
                   :items="uploadedTaskList.filter(item => item.status !== 'uploaded')"
                   :item-height="60"
-                  :height="400"
                   view-mode="list"
                 >
                   <template #default="{ item }">
@@ -1045,7 +1031,7 @@
                     {{ t('pages.manage.bucket.openDownloadFolder') }}
                   </button>
                 </div>
-                <VirtualScroller :items="downloadingTaskList" :item-height="60" :height="500" view-mode="list">
+                <VirtualScroller :items="downloadingTaskList" :item-height="60" view-mode="list">
                   <template #default="{ item }">
                     <div class="file-list-item">
                       <div class="file-list-info">
@@ -1084,7 +1070,6 @@
                 <VirtualScroller
                   :items="downloadedTaskList.filter(item => item.status === 'downloaded')"
                   :item-height="60"
-                  :height="500"
                   view-mode="list"
                 >
                   <template #default="{ item }">
@@ -1128,7 +1113,6 @@
                 <VirtualScroller
                   :items="downloadedTaskList.filter(item => item.status !== 'downloaded')"
                   :item-height="60"
-                  :height="500"
                   view-mode="list"
                 >
                   <template #default="{ item }">

src/renderer/manage/pages/css/BucketPage.css

@@ -12,6 +12,7 @@
 
 /* Header Card */
 .bucket-card {
+  overflow: hidden;
   border: 1px solid var(--color-border-secondary);
   border-radius: var(--radius-xl);
   background: var(--color-surface);
@@ -401,64 +402,76 @@
 }
 
 /* Content Area */
-.content-card {
+.content-area {
-  flex: 1;
   display: flex;
-  flex-direction: column;
+  overflow: hidden;
   min-height: 0;
+  flex: 1;
+  flex-direction: column;
 }
 
-.content-area {
+.content-area::-webkit-scrollbar {
-  position: relative;
+  width: 8px;
-  overflow: visible hidden;
+}
-  padding: 0.5rem;
+
-  background: var(--color-background-secondary);
+.content-area::-webkit-scrollbar-track {
-  flex: 1;
+  border-radius: var(--radius-md);
+  background: var(--color-surface-elevated);
+}
+
+.content-area::-webkit-scrollbar-thumb {
+  border-radius: var(--radius-md);
+  background: var(--color-border);
+  transition: var(--transition-fast);
+}
+
+.content-area::-webkit-scrollbar-thumb:hover {
+  background: var(--color-text-secondary);
 }
 
 /* Virtual Scroller Container */
-.virtual-scroller-container {
+.virtual-gallery-scroller {
-  overflow: visible;
   width: 100%;
-  height: 100%;
+  flex: 1;
+  min-height: 0;
 }
 
 /* File Grid Item */
-.file-grid-item {
+.virtual-gallery-scroller .file-grid-item {
-  position: relative;
-  z-index: 1;
   display: flex;
   overflow: visible;
   border: 1px solid var(--color-border-secondary);
   border-radius: var(--radius-lg);
-  height: 220px;
+  margin: 0;
   background: var(--color-surface);
-  transition: var(--transition-medium);
-  flex-direction: column;
   cursor: pointer;
+  transition: var(--transition-medium);
+  width: 100%;
+  height: calc(100% - 8px);
+  box-sizing: border-box;
+  flex-direction: column;
 }
 
-.file-grid-item:hover {
+.virtual-gallery-scroller .file-grid-item:hover {
-  z-index: 10;
   border-color: var(--color-border);
   box-shadow: var(--shadow-md);
   transform: translateY(-2px);
 }
 
-.file-grid-item.selected {
+.virtual-gallery-scroller .file-grid-item.selected {
-  z-index: 10;
+  border-color: var(--color-blue-common);
-  border-color: var(--color-accent);
   box-shadow: 0 0 0 2px rgb(59 130 246 / 20%);
 }
 
-.file-preview {
+.virtual-gallery-scroller .file-preview {
   position: relative;
   display: flex;
   justify-content: center;
   align-items: center;
   overflow: hidden;
   background: var(--color-surface-elevated);
-  aspect-ratio: 16/9;
+  flex: 1;
+  aspect-ratio: auto;
 }
 
 .file-image {
@@ -475,18 +488,17 @@
 }
 
 .file-info-section {
-  position: relative;
-  z-index: 1;
   display: flex;
   justify-content: space-between;
   padding: 0.75rem;
-  flex: 1;
+  min-height: 80px;
+  flex-shrink: 0;
   flex-direction: column;
 }
 
 .file-name {
   overflow: hidden;
-  margin-bottom: 0.5rem;
+  margin-bottom: 0.75rem;
   font-size: 0.875rem;
   font-weight: 500;
   text-overflow: ellipsis;
@@ -509,8 +521,6 @@
 }
 
 .file-actions {
-  position: relative;
-  z-index: 10;
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -528,8 +538,8 @@
   border: none;
   border-radius: var(--radius-sm);
   padding: 0.375rem;
-  width: 28px;
+  width: 32px;
-  height: 28px;
+  height: 32px;
   color: var(--color-text-secondary);
   background: var(--color-surface-elevated);
   transition: var(--transition-fast);
@@ -1151,35 +1161,6 @@ input:checked + .switch-slider::before {
   }
 }
 
-/* Empty State */
-.empty-state {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 4rem 2rem;
-  text-align: center;
-  flex-direction: column;
-}
-
-.empty-state-icon {
-  margin-bottom: 1rem;
-  width: 64px;
-  height: 64px;
-  color: var(--color-text-tertiary);
-}
-
-.empty-state-title {
-  margin-bottom: 0.5rem;
-  font-size: 1.125rem;
-  font-weight: 600;
-  color: var(--color-text-primary);
-}
-
-.empty-state-description {
-  font-size: 0.875rem;
-  color: var(--color-text-secondary);
-}
-
 /* Responsive Design */
 @media (width <= 768px) {
   .bucket-container {
@@ -1317,3 +1298,30 @@ input:checked + .switch-slider::before {
     justify-content: space-between;
   }
 }
+
+
+.empty-state {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 4rem 2rem;
+  text-align: center;
+  flex-direction: column;
+}
+
+.empty-icon {
+  margin-bottom: 1rem;
+  color: var(--color-text-secondary);
+}
+
+.empty-state h3 {
+  margin: 0 0 0.5rem;
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: var(--color-text-primary);
+}
+
+.empty-state p {
+  margin: 0;
+  color: var(--color-text-secondary);
+}

src/renderer/manage/pages/css/ManageMain.css

@@ -1,5 +1,9 @@
 /* ManageMain Page Styles */
 
+html, body {
+  overflow-x: hidden;
+}
+
 .manage-container {
   display: flex;
   padding: 0.75rem;
@@ -260,10 +264,13 @@
 }
 
 .content-area {
-  overflow-y: auto;
+  display: flex;
-  padding: 1.5rem;
+  overflow: hidden;
-  min-height: 0;
+  flex-direction: column;
-  flex: 1;
+  margin: 0;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
 }
 
 .action-button {

src/renderer/pages/Gallery.vue

@@ -202,16 +202,12 @@
         v-else
         :key="componentKey"
         ref="virtualScrollerRef"
-        v-model:view-mode="viewMode"
+        :view-mode="viewMode"
         class="virtual-gallery-scroller"
         :items="filterList"
-        :item-height="itemHeight"
+        :item-height="300"
-        :grid-items="4"
         :grid-breakpoints="effectiveGridBreakpoints"
         key-field="key"
-        :page-mode="true"
-        :buffer-factor="0.5"
-        :item-padding="8"
       >
         <template #default="{ item, index }">
           <div class="gallery-item" :class="{ selected: choosedList[item.id || ''] }">
@@ -590,7 +586,6 @@ const viewMode = useStorage<'list' | 'grid'>('galleryViewMode', 'grid')
 const componentKey = ref(0)
 const currentSortField = ref<'name' | 'time' | 'ext' | 'check'>('name')
 const userGridColumns = useStorage<number>('galleryGridColumns', 4)
-const itemHeight = 300
 
 const effectiveGridBreakpoints = computed(() => {
   return [{ min: 0, cols: userGridColumns.value }]

src/renderer/pages/css/Gallery.css

@@ -663,41 +663,9 @@ input:checked + .switch-slider::before {
   padding: 1.5rem;
 }
 
-.gallery-item {
-  overflow: hidden;
-  border: 1px solid var(--color-border-secondary);
-  border-radius: var(--radius-lg);
-  background: var(--color-surface);
-  transition: var(--transition-medium);
-  cursor: pointer;
-}
 
-.gallery-item:hover {
-  border-color: var(--color-border);
-  box-shadow: var(--shadow-md);
-  transform: translateY(-2px);
-}
-
-.gallery-item.selected {
-  border-color: var(--color-blue-common);
-  box-shadow: 0 0 0 2px rgb(59 130 246 / 20%);
-}
 
 /* Image Container */
-.image-container {
-  position: relative;
-  aspect-ratio: 16/9;
-  overflow: hidden;
-  background: var(--color-background-secondary);
-}
-
-.gallery-image {
-  transition: var(--transition-medium);
-}
-
-.gallery-image.loading {
-  opacity: 0;
-}
 
 .image-placeholder {
   display: flex;
@@ -709,15 +677,6 @@ input:checked + .switch-slider::before {
   background: var(--color-surface-elevated);
 }
 
-.image-loader {
-  position: absolute;
-  inset: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background: var(--color-surface-elevated);
-}
-
 .loader-spinner {
   border: 2px solid var(--color-border);
   border-top: 2px solid var(--color-blue-common);
@@ -733,9 +692,6 @@ input:checked + .switch-slider::before {
 }
 
 /* Image Info */
-.image-info {
-  padding: 1rem;
-}
 
 .image-name {
   overflow: hidden;
@@ -1348,11 +1304,28 @@ input:checked + .switch-slider::before {
 /* Ensure gallery items work well with virtual scroller */
 .virtual-gallery-scroller .gallery-item {
   display: flex;
+  overflow: hidden;
+  border: 1px solid var(--color-border-secondary);
+  border-radius: var(--radius-lg);
   margin: 0;
+  background: var(--color-surface);
+  cursor: pointer;
   width: 100%;
   height: calc(100% - 8px);
   box-sizing: border-box;
   flex-direction: column;
+  transition: var(--transition-medium);
+}
+
+.virtual-gallery-scroller .gallery-item:hover {
+  border-color: var(--color-border);
+  box-shadow: var(--shadow-md);
+  transform: translateY(-2px);
+}
+
+.virtual-gallery-scroller .gallery-item.selected {
+  border-color: var(--color-blue-common);
+  box-shadow: 0 0 0 2px rgb(59 130 246 / 20%);
 }
 
 .virtual-gallery-scroller .image-container {
@@ -1367,6 +1340,11 @@ input:checked + .switch-slider::before {
   aspect-ratio: auto;
 }
 
+.virtual-gallery-scroller .image-container.selected {
+  outline: 2px solid var(--color-blue-common);
+  box-shadow: 0 0 0 2px rgb(59 130 246 / 20%);
+}
+
 .virtual-gallery-scroller .image-info {
   display: flex;
   justify-content: space-between;
@@ -1380,6 +1358,11 @@ input:checked + .switch-slider::before {
   width: 100%;
   height: 100%;
   object-fit: contain;
+  transition: var(--transition-medium);
+}
+
+.virtual-gallery-scroller .gallery-image.loading {
+  opacity: 0;
 }
 
 .virtual-gallery-scroller .image-loader {