refactor: 优化代码格式，简化部分逻辑，提升可读性

2026-06-16 21:20:45 +08:00 · 2026-06-07 18:10:10 +08:00
parent 87d780d985
commit e239c0c5ea
9 changed files with 153 additions and 180 deletions
--- a/src/components/FileBrowser.vue
+++ b/src/components/FileBrowser.vue
@@ -161,15 +161,15 @@ const isDragging = ref(false)
 const dragStartX = ref(0)
 const dragStartWidth = ref(0)

-watch(sort, (val) => {
+watch(sort, val => {
  localStorage.setItem(SORT_KEY, val)
 })

-watch(showDirTree, (val) => {
+watch(showDirTree, val => {
  localStorage.setItem(SHOW_TREE_KEY, String(val))
 })

-watch(navigatorWidth, (val) => {
+watch(navigatorWidth, val => {
  localStorage.setItem(NAV_WIDTH_KEY, String(val))
 })

@@ -182,7 +182,6 @@ const storagesArray = computed(() => {
  }))
 })

-
 // 方法
 function loadingChanged(isLoading: number) {
  if (isLoading) loading.value++
@@ -272,7 +271,7 @@ function stopDrag() {
 </script>

 <template>
-  <div class="mx-auto" :loading="loading > 0">
+  <div class="mx-auto overflow-hidden" :loading="loading > 0">
    <div v-if="item">
      <FileToolbar
        ref="toolbarRef"
--- a/src/components/ThemeCustomizer.vue
+++ b/src/components/ThemeCustomizer.vue
@@ -288,7 +288,10 @@ async function handleResetSettings() {
      v-bind="customizerContainerProps"
      :style="customizerContainerStyle"
    >
-      <div class="theme-customizer-panel" :class="{ 'theme-customizer-panel--dialog': appMode, 'app-surface': appMode }">
+      <div
+        class="theme-customizer-panel"
+        :class="{ 'theme-customizer-panel--dialog': appMode, 'app-surface': appMode }"
+      >
        <div class="theme-customizer-header py-5 px-4">
          <div>
            <h2 class="theme-customizer-title">{{ t('theme.customizer.title') }}</h2>
@@ -493,7 +496,7 @@ async function handleResetSettings() {
  overflow: hidden;
  block-size: 100dvh !important;
  border-inline-start: 1px solid rgba(var(--v-theme-on-surface), 0.08) !important;
-  box-shadow: -2px 0 6px rgba(0, 0, 0, 10%) !important;
+  box-shadow: var(--app-surface-shadow) !important;
  inset-block: 0 !important;
  inset-inline-end: 0 !important;
  max-block-size: 100dvh !important;
@@ -534,6 +537,7 @@ async function handleResetSettings() {
  background: rgb(var(--v-theme-surface));
  block-size: var(--theme-customizer-viewport-height, 100dvh);
  max-block-size: var(--theme-customizer-viewport-height, 100dvh);
+
  /* fullscreen dialog 会贴到 viewport-fit=cover 顶部，iOS 需要在面板内部避开系统状态栏。 */
  padding-block-start: env(safe-area-inset-top);
 }
--- a/src/components/cards/DownloadingCard.vue
+++ b/src/components/cards/DownloadingCard.vue
@@ -71,82 +71,72 @@ async function deleteDownload() {
 </script>

 <template>
-  <VCard
-    v-if="cardState"
-    :key="props.info?.hash"
-    class="downloading-card flex flex-col h-full overflow-hidden"
-    min-height="150"
-  >
-    <template #image>
-      <VImg
-        :src="props.info?.media.image"
-        class="downloading-card-image"
-        aspect-ratio="2/3"
-        cover
-        @load="imageLoadHandler"
-        position="top"
+  <VHover>
+    <template #default="hover">
+      <VCard
+        v-if="cardState"
+        v-bind="hover.props"
+        :key="props.info?.hash"
+        class="downloading-card app-surface flex flex-col h-full overflow-hidden"
+        :class="{
+          'transition transform-cpu duration-300  -translate-y-1': hover.isHovering,
+        }"
+        min-height="150"
      >
-        <template #placeholder>
-          <div class="w-full h-full">
-            <VSkeletonLoader class="object-cover aspect-w-2 aspect-h-3" />
-          </div>
+        <template #image>
+          <VImg
+            :src="props.info?.media.image"
+            class="downloading-card-image"
+            aspect-ratio="2/3"
+            cover
+            @load="imageLoadHandler"
+            position="top"
+          >
+            <template #placeholder>
+              <div class="w-full h-full">
+                <VSkeletonLoader class="object-cover aspect-w-2 aspect-h-3" />
+              </div>
+            </template>
+            <template #default>
+              <div class="absolute inset-0 outline-none downloading-card-background"></div>
+            </template>
+          </VImg>
        </template>
-        <template #default>
-          <div class="absolute inset-0 outline-none downloading-card-background"></div>
-        </template>
-      </VImg>
+
+        <div>
+          <VCardTitle class="break-words whitespace-normal text-white">
+            {{ props.info?.media.title || props.info?.name }}
+            {{
+              props.info?.media.episode
+                ? `${props.info?.media.season} ${props.info?.media.episode}`
+                : props.info?.season_episode
+            }}
+          </VCardTitle>
+
+          <VCardSubtitle class="break-words whitespace-normal text-white">
+            {{ props.info?.title }}
+          </VCardSubtitle>
+
+          <VCardText class="text-subtitle-1 pt-3 pb-1 text-white">
+            {{ getSpeedText() }}
+          </VCardText>
+
+          <VCardText v-if="getPercentage() > 0" class="text-white">
+            <VProgressLinear :model-value="getPercentage()" bg-color="success" color="success" />
+          </VCardText>
+
+          <VCardActions class="justify-space-between">
+            <VBtn :icon="`${isDownloading ? 'mdi-pause' : 'mdi-play'}`" @click="toggleDownload" />
+            <VBtn color="error" icon="mdi-trash-can-outline" @click="deleteDownload" />
+          </VCardActions>
+        </div>
+      </VCard>
    </template>
-
-    <div>
-      <VCardTitle class="break-words whitespace-normal text-white">
-        {{ props.info?.media.title || props.info?.name }}
-        {{
-          props.info?.media.episode
-            ? `${props.info?.media.season} ${props.info?.media.episode}`
-            : props.info?.season_episode
-        }}
-      </VCardTitle>
-
-      <VCardSubtitle class="break-words whitespace-normal text-white">
-        {{ props.info?.title }}
-      </VCardSubtitle>
-
-      <VCardText class="text-subtitle-1 pt-3 pb-1 text-white">
-        {{ getSpeedText() }}
-      </VCardText>
-
-      <VCardText v-if="getPercentage() > 0" class="text-white">
-        <VProgressLinear :model-value="getPercentage()" bg-color="success" color="success" />
-      </VCardText>
-
-      <VCardActions class="justify-space-between">
-        <VBtn :icon="`${isDownloading ? 'mdi-pause' : 'mdi-play'}`" @click="toggleDownload" />
-        <VBtn color="error" icon="mdi-trash-can-outline" @click="deleteDownload" />
-      </VCardActions>
-    </div>
-  </VCard>
+  </VHover>
 </template>

 <style lang="scss" scoped>
-.downloading-card {
-  position: relative;
-  isolation: isolate;
-  background-color: rgb(31, 41, 55) !important;
-}
-
-// 图片槽和渐变遮罩统一继承卡片圆角，避免阴影增强后四角露出页面底色。
-.downloading-card :deep(.v-card__image),
-.downloading-card :deep(.v-responsive),
-.downloading-card :deep(.v-img),
-.downloading-card :deep(.v-img__img),
-.downloading-card :deep(.v-responsive__content) {
-  overflow: hidden;
-  border-radius: inherit;
-}
-
-.downloading-card :deep(.v-card__image) {
-  background-color: rgb(31, 41, 55);
-}
+/* stylelint-disable selector-pseudo-class-no-unknown */

 .downloading-card-image {
  block-size: 100%;
--- a/src/components/dialog/ReorganizeDialog.vue
+++ b/src/components/dialog/ReorganizeDialog.vue
@@ -418,17 +418,14 @@ watch(
 )

 // 切换媒体类型或识别源时，非 TMDB 电视剧不保留剧集组选择。
-watch(
-  [() => transferForm.type_name, () => mediaSource.value],
-  ([typeName, source]) => {
-    if (typeName === '电视剧' && source === 'themoviedb' && transferForm.tmdbid) {
-      getEpisodeGroups(transferForm.tmdbid)
-      return
-    }
-    transferForm.episode_group = null
-    episodeGroups.value = []
-  },
-)
+watch([() => transferForm.type_name, () => mediaSource.value], ([typeName, source]) => {
+  if (typeName === '电视剧' && source === 'themoviedb' && transferForm.tmdbid) {
+    getEpisodeGroups(transferForm.tmdbid)
+    return
+  }
+  transferForm.episode_group = null
+  episodeGroups.value = []
+})

 watch(
  () => transferForm.episode_group,
@@ -500,9 +497,7 @@ function normalizeTargetPath(path?: string | null) {
 }

 // 归一化剧集组值，兼容历史对象态值。
-function normalizeEpisodeGroup(
-  episodeGroup?: string | { value?: string | null } | null,
-) {
+function normalizeEpisodeGroup(episodeGroup?: string | { value?: string | null } | null) {
  if (!episodeGroup) return null
  if (typeof episodeGroup === 'string') {
    const normalizedEpisodeGroup = episodeGroup.trim()
@@ -632,11 +627,7 @@ const previewFileRows = computed(() => {
 // 标准化预览项中的识别词命中详情
 function getPreviewApplyWords(item: ManualTransferPreviewItem) {
  return [
-    ...new Set(
-      (item.apply_words ?? [])
-        .map(word => word?.trim())
-        .filter((word): word is string => Boolean(word)),
-    ),
+    ...new Set((item.apply_words ?? []).map(word => word?.trim()).filter((word): word is string => Boolean(word))),
  ]
 }

@@ -765,9 +756,7 @@ const episodeFormatRecommendSelectedFileItems = computed(() => {
 const episodeFormatRecommendHasValidSelectedFiles = computed(() => {
  if (episodeFormatRecommendSelectedFileItems.value.length <= 1) return false

-  const directoryKeys = new Set(
-    episodeFormatRecommendSelectedFileItems.value.map(item => getFileParentKey(item)),
-  )
+  const directoryKeys = new Set(episodeFormatRecommendSelectedFileItems.value.map(item => getFileParentKey(item)))
  return directoryKeys.size === 1
 })

@@ -778,8 +767,7 @@ const episodeFormatRecommendSourceItem = computed<FileItem | undefined>(() => {

 const canRecommendEpisodeFormat = computed(() => {
  return (
-    (Boolean(episodeFormatRecommendSourceItem.value?.path) ||
-      episodeFormatRecommendHasValidSelectedFiles.value) &&
+    (Boolean(episodeFormatRecommendSourceItem.value?.path) || episodeFormatRecommendHasValidSelectedFiles.value) &&
    !progressDialog.value &&
    !episodeFormatRecommendState.loading
  )
@@ -793,10 +781,7 @@ const episodeFormatRecommendSelectionKey = computed(() => {

 const episodeFormatRecommendTooltip = computed(() => {
  if (episodeFormatRecommendState.loading) return t('dialog.reorganize.episodeFormatRecommendLoading')
-  if (
-    normalizedItems.value.length > 1 &&
-    !episodeFormatRecommendHasValidSelectedFiles.value
-  ) {
+  if (normalizedItems.value.length > 1 && !episodeFormatRecommendHasValidSelectedFiles.value) {
    return t('dialog.reorganize.episodeFormatRecommendInvalidSelection')
  }
  if (!episodeFormatRecommendSourceItem.value?.path && !episodeFormatRecommendHasValidSelectedFiles.value) {
@@ -832,11 +817,7 @@ function getBatchItemsLabel(items: FileItem[]) {

 // 构造整理请求
 function createTransferPayload(options: { item?: FileItem; items?: FileItem[]; logid?: number; preview?: boolean }) {
-  const sourceItem =
-    options.item ??
-    (options.items?.length
-      ? options.items[0]
-      : ({} as FileItem))
+  const sourceItem = options.item ?? (options.items?.length ? options.items[0] : ({} as FileItem))
  const payload: ManualTransferPayload = {
    ...transferForm,
    fileitem: sourceItem,
@@ -1702,7 +1683,7 @@ onUnmounted(() => {
                      <div
                        v-for="(item, index) in pagedPreviewRows"
                        :key="`${item.source}-${item.target}-${index}`"
-                        class="preview-file-row"
+                        class="preview-file-row app-surface-shape"
                        :class="{ 'preview-file-row--failed': item.success === false }"
                      >
                        <div class="preview-file-row__card preview-file-row__card--source">
@@ -1983,18 +1964,18 @@ onUnmounted(() => {
 }

 .preview-custom-words__source {
-  overflow-wrap: anywhere;
  color: rgb(var(--v-theme-on-surface));
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.4;
+  overflow-wrap: anywhere;
 }

 .preview-custom-words__original {
-  overflow-wrap: anywhere;
  color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
  font-size: 0.75rem;
  line-height: 1.4;
+  overflow-wrap: anywhere;
 }

 .preview-custom-words__chips {
@@ -2107,10 +2088,10 @@ onUnmounted(() => {

 .preview-file-row__path {
  overflow: visible;
-  overflow-wrap: anywhere;
  color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
  font-size: 0.8125rem;
  line-height: 1.4;
+  overflow-wrap: anywhere;
  white-space: normal;
  word-break: break-all;
 }
--- a/src/components/filebrowser/FileList.vue
+++ b/src/components/filebrowser/FileList.vue
@@ -30,7 +30,7 @@ const { appMode } = usePWA()

 // 计算列表可用高度
 // componentOffset = FileToolbar(48) + FileList操作栏(40) + VCard边距(4) = 92
-const { availableHeight: listAvailableHeight } = useAvailableHeight(92, 300)
+const { availableHeight: listAvailableHeight } = useAvailableHeight(89, 300)

 // 输入参数
 const inProps = defineProps({
@@ -267,7 +267,7 @@ async function list_files(context: KeepAliveRefreshContext = {}) {
    }

    // 加载数据
-    const data = ((await inProps.axios.request<FileItem[], FileItem[]>(config))) ?? []
+    const data = (await inProps.axios.request<FileItem[], FileItem[]>(config)) ?? []
    // 如果当前路径已经变化，则放弃此次加载结果
    if (prevURI !== takeURISnapshot()) {
      return
@@ -381,7 +381,7 @@ async function download(item: FileItem) {
    responseType: 'blob',
  }
  // 加载数据
-  const result: Blob = (await inProps.axios.request<Blob, Blob>(config))
+  const result: Blob = await inProps.axios.request<Blob, Blob>(config)
  if (result) {
    const downloadUrl = URL.createObjectURL(result)
    window.open(downloadUrl, '_blank')
@@ -402,7 +402,7 @@ async function getImgLink(item: FileItem) {
    responseType: 'blob',
  }
  // 加载二进制数据
-  const result: Blob = (await inProps.axios.request<Blob, Blob>(config))
+  const result: Blob = await inProps.axios.request<Blob, Blob>(config)
  if (result) {
    // 创建图片地址
    revokeCurrentImgLink()
@@ -508,7 +508,7 @@ async function rename() {
    method: inProps.endpoints?.rename.method || 'post',
    data: currentItem.value,
  }
-  const result: { [key: string]: any } = (await inProps.axios?.request<any, { [key: string]: any }>(config))
+  const result: { [key: string]: any } = await inProps.axios?.request<any, { [key: string]: any }>(config)
  if (!result.success) {
    $toast.error(result.message)
  }
@@ -768,17 +768,9 @@ onUnmounted(() => {
 })
 </script>

-<style scoped>
-.file-list-container {
-  overflow: hidden auto;
-  block-size: 100%;
-  max-block-size: 100%;
-}
-</style>
-
 <template>
  <div>
-    <VCard class="d-flex flex-column w-full h-full">
+    <VCard class="d-flex flex-column w-full h-full file-list">
      <div v-if="!loading" class="flex">
        <IconBtn v-if="display.mdAndUp.value">
          <VIcon v-if="showTree" icon="mdi-file-tree" @click="switchFileTree(false)" />
@@ -792,7 +784,7 @@ onUnmounted(() => {
          density="compact"
          variant="plain"
          :placeholder="t('file.filterPlaceholder')"
-          :prepend-inner-icon="(filter.includes('*') || filter.includes('?')) ? 'mdi-asterisk' : 'mdi-filter-outline'"
+          :prepend-inner-icon="filter.includes('*') || filter.includes('?') ? 'mdi-asterisk' : 'mdi-filter-outline'"
          class="mx-2"
          rounded
        />
@@ -931,3 +923,17 @@ onUnmounted(() => {
    </VCard>
  </div>
 </template>
+
+<style scoped>
+.file-list {
+  border-radius: 0 !important;
+  box-shadow: none !important;
+}
+
+.file-list-container {
+  overflow: hidden auto;
+  border-radius: 0 !important;
+  block-size: 100%;
+  max-block-size: 100%;
+}
+</style>
--- a/src/components/filebrowser/FileNavigator.vue
+++ b/src/components/filebrowser/FileNavigator.vue
@@ -116,7 +116,7 @@ async function loadSubdirectories(path: string) {
      data: fakeItem,
    }

-    const result = (await props.axios?.request(config))
+    const result = await props.axios?.request(config)
    if (result && Array.isArray(result)) {
      // 过滤出目录项
      const dirs = result.filter(item => item.type === 'dir')
@@ -249,7 +249,6 @@ function getTreeRowStyle(level: number) {
 onMounted(async () => {
  await loadRootDirectories()
 })
-
 </script>

 <template>
@@ -296,13 +295,7 @@ onMounted(async () => {
          :style="getTreeRowStyle(item.level)"
        >
          <div class="folder-toggle" @click.stop="toggleFolder(item.dir.path || '')">
-            <VProgressCircular
-              v-if="loading[item.dir.path || '']"
-              indeterminate
-              size="14"
-              width="2"
-              color="primary"
-            />
+            <VProgressCircular v-if="loading[item.dir.path || '']" indeterminate size="14" width="2" color="primary" />
            <VIcon
              v-else
              size="small"
@@ -332,9 +325,10 @@ onMounted(async () => {
  overflow: hidden;
  flex-direction: column;
  flex-shrink: 0;
+  border-radius: 0 !important;
  background: rgb(var(--v-table-header-background));
  block-size: 100%;
-  border-end-start-radius: 12px;
+  box-shadow: none !important;
  inline-size: 240px;
 }

--- a/src/styles/common.scss
+++ b/src/styles/common.scss
@@ -141,7 +141,6 @@ html[data-theme-shadow='high'] {
 .v-card,
 .v-sheet,
 .v-list,
-.v-table,
 .v-expansion-panel {
  border: var(--app-surface-border);
  border-radius: var(--app-surface-radius) !important;
@@ -159,7 +158,6 @@ html[data-theme-shadow='high'] {
  .v-card:hover,
  .v-sheet:hover,
  .v-list:hover,
-  .v-table:hover,
  .v-expansion-panel:hover {
    box-shadow: var(--app-surface-hover-shadow) !important;
  }
@@ -190,6 +188,16 @@ html[data-theme-shadow='high'] {
  transition: border-radius 0.2s ease, box-shadow 0.2s ease;
 }

+.v-btn:not(.v-btn--variant-plain, .v-btn--variant-text) {
+  box-shadow: var(--app-surface-shadow) !important;
+  transition: box-shadow 0.2s ease;
+}
+
+.v-btn:not(.v-btn--rounded, [class^='rounded-'], [class*=' rounded-']) {
+  border-radius: var(--app-surface-radius);
+  transition: border-radius 0.2s ease;
+}
+
 // 只给外层 surface 加边框和阴影，卡片内部的列表、表格等子组件保持平面，避免层级噪声。
 .v-card .v-list:not(.app-surface),
 .v-card .v-sheet:not(.app-surface),
@@ -213,15 +221,6 @@ html[data-theme-shadow='high'] {
  --app-surface-shadow: none;
 }

-// 菜单只让直接承载层拥有弹出阴影，内部嵌套 surface 不再重复制造层级。
-.v-menu
-  > .v-overlay__content
-  > :where(.v-card, .v-sheet, .v-list)
-  :where(.v-card, .v-sheet, .v-list, .v-table, .v-expansion-panel):not(.app-card-colorful) {
-  --app-surface-hover-shadow: none;
-  --app-surface-shadow: none;
-}
-
 // 主题定制器的 bordered 皮肤：保持原布局密度，只给非 Vuetify 外壳增加清晰边界。
 html[data-theme-skin='bordered'] {
  .layout-vertical-nav {
@@ -619,10 +618,16 @@ html[data-theme="transparent"] .app-card-colorful,

 // 组件样式
 .v-alert--variant-elevated, .v-alert--variant-flat {
+  border-radius: var(--app-surface-radius);
  background: rgb(var(--v-table-header-background));
  color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
 }

+.Vue-Toastification__toast {
+  border-radius: var(--app-surface-radius);
+  box-shadow: var(--app-overlay-shadow);
+}
+
 .backdrop-blur {
  --tw-backdrop-blur: blur(8px)!important;

--- a/src/views/reorganize/FileBrowserView.vue
+++ b/src/views/reorganize/FileBrowserView.vue
@@ -77,14 +77,14 @@ function findCommonPath(paths: string[]): string {
 const STORAGE_KEY = 'fileBrowserView.activeStorage'

 interface BrowserInitialParams {
-  storage: string;
-  path: string;
-  name: string;
+  storage: string
+  path: string
+  name: string
 }
- // determine which entry to select initially
+// determine which entry to select initially
 function determineBrowserInitialParams(downloadDirectories: TransferDirectoryConf[]): BrowserInitialParams {
-  const isAvailable = (storage: string) => storageTypes.value.includes(storage);
-  const buckets = downloadDirectories.reduce<Map<string, string[]>>((dict, item) => { 
+  const isAvailable = (storage: string) => storageTypes.value.includes(storage)
+  const buckets = downloadDirectories.reduce<Map<string, string[]>>((dict, item) => {
    // filter out directories whose storage is not available
    if (!isAvailable(item.storage)) {
      return dict
@@ -98,37 +98,35 @@ function determineBrowserInitialParams(downloadDirectories: TransferDirectoryCon
      dict.get(item.storage)!.push(item.download_path)
    }
    return dict
-  }, new Map());
+  }, new Map())

-  const cachedStorage = localStorage.getItem(STORAGE_KEY) || '';
+  const cachedStorage = localStorage.getItem(STORAGE_KEY) || ''
  // if no download directories are configured, fall back to cached storage or first available storage
  if (buckets.size === 0) {
    return {
-      storage: isAvailable(cachedStorage)
-        ? cachedStorage
-        : (storageTypes.value[0] || 'local'),
+      storage: isAvailable(cachedStorage) ? cachedStorage : storageTypes.value[0] || 'local',
      path: '/',
      name: '/',
    }
  }
-  let selectedEntry: [string, string[]];
+  let selectedEntry: [string, string[]]
  if (cachedStorage && buckets.has(cachedStorage)) {
-    selectedEntry = [cachedStorage, buckets.get(cachedStorage)!];
+    selectedEntry = [cachedStorage, buckets.get(cachedStorage)!]
  } else {
    // if no storage selected previously, use the most populous one
    selectedEntry = Array.from(buckets.entries()).reduce((prev, curr) => {
-      return curr[1].length > prev[1].length ? curr : prev;
-    });
+      return curr[1].length > prev[1].length ? curr : prev
+    })
  }

-  const path = findCommonPath(selectedEntry[1]);
+  const path = findCommonPath(selectedEntry[1])
  return {
    storage: selectedEntry[0],
    path,
    name: path.split('/').filter(Boolean).pop() ?? '',
  }
 }
-      
+
 // 查询下载目录
 async function loadDownloadDirectories() {
  try {
@@ -138,7 +136,7 @@ async function loadDownloadDirectories() {

    const result: { [key: string]: any } = await api.get('system/setting/Directories')
    if (result.success && result.data?.value) {
-      const { storage, path, name } = determineBrowserInitialParams(result.data.value);
+      const { storage, path, name } = determineBrowserInitialParams(result.data.value)
      // operItem初始化
      operItem.value = {
        type: 'dir',
@@ -154,8 +152,8 @@ async function loadDownloadDirectories() {
          name: '/',
          path: '/',
          fileid: 'root',
-        }
-      ];
+        },
+      ]
      // 将初始数据拆分到堆栈中
      const paths = path.split('/').filter(Boolean)
      paths.map((name, index) => {
@@ -206,7 +204,7 @@ onMounted(loadDownloadDirectories)
 </script>

 <template>
-  <div class="file-browser-view">
+  <div class="file-browser-view app-surface">
    <FileBrowser
      v-if="operItem"
      :storages="storages"
@@ -223,6 +221,7 @@ onMounted(loadDownloadDirectories)
 <style lang="scss" scoped>
 .file-browser-view {
  position: relative;
+  overflow: hidden;
  block-size: 100%;
 }
 </style>
--- a/src/views/system/ModuleTestView.vue
+++ b/src/views/system/ModuleTestView.vue
@@ -144,8 +144,8 @@ onMounted(getModules)
              isChecking
                ? t('moduleTest.checking')
                : checkComplete
-                ? t('moduleTest.complete')
-                : t('moduleTest.preparing')
+                  ? t('moduleTest.complete')
+                  : t('moduleTest.preparing')
            }}
          </h3>
        </div>
@@ -230,16 +230,15 @@ onMounted(getModules)
 <style scoped>
 .system-health-check {
  display: flex;
-  flex-direction: column;
+  overflow: hidden;
  flex: 1 1 auto;
+  flex-direction: column;
  block-size: 100%;
  min-block-size: 0;
-  overflow: hidden;
 }

 .progress-container {
  flex-shrink: 0;
-  background: var(--v-surface-variant);
 }

 .progress-card {
@@ -336,10 +335,6 @@ onMounted(getModules)
  transition: all 0.3s ease;
 }

-.module-item:hover {
-  transform: translateY(-2px);
-}
-
 .module-item.success {
  border-color: #4caf50;
  background: linear-gradient(135deg, #f8fff9 0%, #e8f5e8 100%);