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

2026-06-21 07:33:49 +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;
 }