Merge pull request #64 from thofx/thofx_fix_ui

2026-06-01 05:40:41 +08:00 · 2023-12-28 07:04:14 +08:00
parent 562c829267 b200ed242d
commit 28c55a05e6
6 changed files with 144 additions and 139 deletions
--- a/src/plugins/vuetify/defaults.ts
+++ b/src/plugins/vuetify/defaults.ts
@@ -31,7 +31,7 @@ export default {
    elevation: 0,
  },
  VList: {
-    activeColor: 'primary',
+    color: 'primary',
  },
  VPagination: {
    activeColor: 'primary',
--- a/src/styles/styles.scss
+++ b/src/styles/styles.scss
@@ -3,6 +3,10 @@
@tailwind components;
@tailwind utilities;

+:root{
+  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei UI", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
+
 #nprogress .bar {
  background: rgb(var(--v-theme-primary)) !important;
  top: env(safe-area-inset-top) !important;
--- a/src/util/dom.ts
+++ b/src/util/dom.ts
@@ -4,3 +4,18 @@ export function removeEl(selector: string) {
    el?.parentNode?.removeChild(el)
  }
 }
+
+export function useDefer(maxFrameCount = 1) {
+  const frameCount = ref(0)
+  const refreshFrameCount = () => {
+    requestAnimationFrame(() => {
+      frameCount.value++
+      if (frameCount.value < maxFrameCount)
+        refreshFrameCount()
+    })
+  }
+  refreshFrameCount()
+  return function (showInFrameCount: number) {
+    return frameCount.value >= showInFrameCount
+  }
+}
--- a/src/views/discover/TorrentCardListView.vue
+++ b/src/views/discover/TorrentCardListView.vue
@@ -1,6 +1,8 @@
 <script lang="ts" setup>
-import { ref } from 'vue'
 import _ from 'lodash'
+import type { Ref } from 'vue'
+import { ref } from 'vue'
+import { useDefer } from '@/util'
 import type { Context } from '@/api/types'
 import TorrentCard from '@/components/cards/TorrentCard.vue'

@@ -48,7 +50,7 @@ const editionFilterOptions = ref<Array<string>>([])
 const resolutionFilterOptions = ref<Array<string>>([])

 // 数据列表
-const dataList = ref <Array<SearchTorrent>>([])
+const dataList = ref<Array<SearchTorrent>>([])

 // 分组后的数据列表
 const groupedDataList = ref<Map<string, Context[]>>()
@@ -69,7 +71,7 @@ function initOptions(data: Context) {
 }

 // 计算分组后的列表
-watchEffect(() => {
+onMounted(() => {
  // 数据分组
  const groupMap = new Map<string, Context[]>()
  // 遍历数据
@@ -92,10 +94,12 @@ watchEffect(() => {
  groupedDataList.value = groupMap
 })

+const defer: Ref<Function> = ref(() => true)
+
 // 计算过滤后的列表
 watchEffect(() => {
  // 清空列表
-  dataList.value.splice(0)
+  dataList.value = []
  // 匹配过滤函数
  const match = (filter: Array<string>, value: string | undefined) =>
    filter.length === 0 || (value && filter.includes(value))
@@ -126,10 +130,12 @@ watchEffect(() => {
        const firstData = _.cloneDeepWith(matchData[0]) as SearchTorrent
        if (matchData.length > 1)
          firstData.more = matchData.slice(1)
+
        dataList.value.push(firstData)
      }
    }
  })
+  defer.value = useDefer(dataList.value.length)
 })
 </script>

@@ -216,12 +222,9 @@ watchEffect(() => {
    </VRow>
  </VCard>
  <div class="grid gap-3 grid-torrent-card items-start">
-    <TorrentCard
-      v-for="(item, index) in dataList"
-      :key="`${index}_${item.torrent_info.title}_${item.torrent_info.site}`"
-      :torrent="item"
-      :more="item.more"
-    />
+    <div v-for="(item, index) in dataList" :key="`${index}_${item.torrent_info.title}_${item.torrent_info.site}`">
+      <TorrentCard v-if="defer(index)" :torrent="item" :more="item.more" />
+    </div>
  </div>
 </template>

--- a/src/views/discover/TorrentRowListView.vue
+++ b/src/views/discover/TorrentRowListView.vue
@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { ref } from 'vue'
 import type { Context } from '@/api/types'
 import TorrentItem from '@/components/cards/TorrentItem.vue'

@@ -27,7 +28,7 @@ const filterForm = reactive({
 })

 // 数据列表
-const dataList = ref <Array<Context>>([])
+const dataList = ref<Array<Context>>([])

 // 获取站点过滤选项
 const siteFilterOptions = ref<Array<string>>([])
@@ -62,7 +63,7 @@ function initOptions(data: Context) {
 // 计算过滤后的列表
 watchEffect(() => {
  // 清空列表
-  dataList.value.splice(0)
+  dataList.value = []
  // 匹配过滤函数
  const match = (filter: Array<string>, value: string | undefined) =>
    filter.length === 0 || (value && filter.includes(value))
@@ -72,18 +73,18 @@ watchEffect(() => {
    if (
      // 站点过滤
      match(filterForm.site, torrent_info.site_name)
-        // 促销状态过滤
-        && match(filterForm.freeState, torrent_info.volume_factor)
-        // 季过滤
-        && match(filterForm.season, meta_info.season_episode)
-        // 制作组过滤
-        && match(filterForm.releaseGroup, meta_info.resource_team)
-        // 视频编码过滤
-        && match(filterForm.videoCode, meta_info.video_encode)
-        // 分辨率过滤
-        && match(filterForm.resolution, meta_info.resource_pix)
-        // 质量过滤
-        && match(filterForm.edition, meta_info.edition)
+      // 促销状态过滤
+      && match(filterForm.freeState, torrent_info.volume_factor)
+      // 季过滤
+      && match(filterForm.season, meta_info.season_episode)
+      // 制作组过滤
+      && match(filterForm.releaseGroup, meta_info.resource_team)
+      // 视频编码过滤
+      && match(filterForm.videoCode, meta_info.video_encode)
+      // 分辨率过滤
+      && match(filterForm.resolution, meta_info.resource_pix)
+      // 质量过滤
+      && match(filterForm.edition, meta_info.edition)
    )
      dataList.value.push(data)
  })
@@ -100,26 +101,19 @@ onMounted(() => {
 <template>
  <VRow>
    <VCol>
-      <VList
-        lines="three"
-        class="rounded"
-      >
-        <TorrentItem
-          v-for="(item, index) in dataList"
-          :key="`${index}_${item.torrent_info.title}_${item.torrent_info.site}`"
-          :torrent="item"
-        />
-        <VListItem v-if="dataList.length === 0">
+      <VList v-if="dataList.length === 0" lines="three" class="rounded">
+        <VListItem>
          <VListItemTitle>没有附合当前过滤条件的资源。</VListItemTitle>
        </VListItem>
      </VList>
+      <v-virtual-scroll lines="three" class="rounded" :items="dataList" height="calc(100vh - 156px)">
+        <template #default="{ item }">
+          <TorrentItem :torrent="item" />
+        </template>
+      </v-virtual-scroll>
    </VCol>
-    <VCol
-      xl="2"
-      md="3"
-      class="d-none d-md-block"
-    >
-      <VList lines="one" class="rounded">
+    <VCol xl="2" md="3" class="d-none d-md-block">
+      <VList lines="one" class="rounded" height="calc(100vh - 156px)">
        <VListSubheader v-if="siteFilterOptions.length > 0">
          站点
        </VListSubheader>
--- a/src/views/reorganize/TransferHistoryView.vue
+++ b/src/views/reorganize/TransferHistoryView.vue
@@ -25,13 +25,36 @@ const selected = ref<TransferHistory[]>([])

 // 表头
 const headers = [
-  { title: '标题', key: 'title', sortable: false },
-  { title: '目录', key: 'src', sortable: false },
-  { title: '转移方式', key: 'mode', sortable: false },
-  { title: '时间', key: 'date', sortable: false },
-  { title: '状态', key: 'status', sortable: false },
-  { title: '失败原因', key: 'errmsg', sortable: false },
-  { title: '', key: 'actions', sortable: false },
+  {
+    title: '标题',
+    key: 'title',
+    sortable: false,
+  },
+  {
+    title: '目录',
+    key: 'src',
+    sortable: false,
+  },
+  {
+    title: '转移方式',
+    key: 'mode',
+    sortable: false,
+  },
+  {
+    title: '时间',
+    key: 'date',
+    sortable: false,
+  },
+  {
+    title: '状态',
+    key: 'status',
+    sortable: false,
+  },
+  {
+    title: '',
+    key: 'actions',
+    sortable: false,
+  },
 ]

 // 数据列表
@@ -71,13 +94,7 @@ const deleteConfirmDialog = ref(false)
 const confirmTitle = ref('')

 // 获取订阅列表数据
-async function fetchData({
-  page,
-  itemsPerPage,
-}: {
-  page: number
-  itemsPerPage: number
-}) {
+async function fetchData({ page, itemsPerPage }: { page: number; itemsPerPage: number }) {
  loading.value = true
  try {
    currentPage.value = page
@@ -92,7 +109,9 @@ async function fetchData({

    dataList.value = result.data.list
    totalItems.value = result.data.total
-    searchHintList.value = ['失败', '成功', ...new Set(dataList.value.map(item => item.title || ''))].filter(title => title !== '')
+    searchHintList.value = ['失败', '成功', ...new Set(dataList.value.map(item => item.title || ''))].filter(
+      title => title !== '',
+    )
  }
  catch (error) {
    console.error(error)
@@ -110,11 +129,6 @@ function getIcon(type: string) {
    return 'mdi-help-circle'
 }

-// 计算颜色
-function getStatusColor(status: boolean) {
-  return status ? 'success' : 'error'
-}
-
 // 转移方式字典
 const TransferDict: { [key: string]: string } = {
  copy: '复制',
@@ -136,7 +150,9 @@ async function removeHistory(item: TransferHistory) {
 async function remove(item: TransferHistory, deleteSrc: boolean, deleteDest: boolean) {
  try {
    // 调用删除API
-    const result: { [key: string]: any } = await api.delete(`history/transfer?deletesrc=${deleteSrc}&deletedest=${deleteDest}`, {
+    const result: {
+      [key: string]: any
+    } = await api.delete(`history/transfer?deletesrc=${deleteSrc}&deletedest=${deleteDest}`, {
      data: item,
    })

@@ -154,6 +170,7 @@ async function removeSingle(deleteSrc: boolean, deleteDest: boolean) {
  deleteConfirmDialog.value = false
  if (!currentHistory.value)
    return
+
  // 删除
  await remove(currentHistory.value, deleteSrc, deleteDest)
  // 刷新
@@ -171,6 +188,7 @@ async function removeBatch(deleteSrc: boolean, deleteDest: boolean) {
  const total = selected.value.length
  if (total === 0)
    return
+
  // 已处理条数
  let handled = 0
  // 显示进度条
@@ -182,7 +200,7 @@ async function removeBatch(deleteSrc: boolean, deleteDest: boolean) {
    await remove(item, deleteSrc, deleteDest)
    // 删除完成
    handled++
-    progressValue.value = handled / total * 100
+    progressValue.value = (handled / total) * 100
  }
  // 清空选中项
  selected.value = []
@@ -207,6 +225,7 @@ async function deleteConfirmHandler(deleteSrc: boolean, deleteDest: boolean) {
 async function removeHistoryBatch() {
  if (selected.value.length === 0)
    return
+
  // 清空当前操作记录
  currentHistory.value = undefined
  confirmTitle.value = `确认删除 ${selected.value.length} 条记录 ?`
@@ -218,11 +237,14 @@ async function removeHistoryBatch() {
 function getRootPath(path: string, type: string, category: string) {
  if (!path)
    return ''
+
  let index = -2
  if (type !== '电影')
    index = -3
+
  if (category)
    index -= 1
+
  if (path.includes('/'))
    return path.split('/').slice(0, index).join('/')
  else
@@ -233,6 +255,7 @@ function getRootPath(path: string, type: string, category: string) {
 async function retransferBatch() {
  if (selected.value.length === 0)
    return
+
  // 清空当前操作记录
  currentHistory.value = undefined
  // 重新整理IDS
@@ -329,58 +352,52 @@ const dropdownItems = ref([
      @update:options="fetchData"
    >
      <template #item.title="{ item }">
-        <div class="d-flex">
-          <VAvatar><VIcon :icon="getIcon(item.raw.type || '')" /></VAvatar>
+        <div class="d-flex align-center">
+          <VAvatar>
+            <VIcon :icon="getIcon(item.value.type || '')" />
+          </VAvatar>
          <div class="d-flex flex-column ms-1">
            <span class="d-block whitespace-nowrap text-high-emphasis">
-              {{ item.raw.title }} {{ item.raw.seasons }}{{ item.raw.episodes }}
+              {{ item.value.title }} {{ item.value.seasons }}{{ item.value.episodes }}
            </span>
-            <small>{{ item.raw.category }}</small>
+            <small>{{ item.value.category }}</small>
          </div>
        </div>
      </template>
      <template #item.src="{ item }">
-        <small>{{ item.raw.src }} <br>=> {{ item.raw.dest }}</small>
+        <small>{{ item.value.src }} <br>=> {{ item.value.dest }}</small>
      </template>
      <template #item.mode="{ item }">
-        <VChip
-          variant="outlined"
-          color="primary"
-          size="small"
-        >
-          {{
-            TransferDict[item.raw.mode]
-          }}
+        <VChip variant="outlined" color="primary" size="small">
+          {{ TransferDict[item.value.mode] }}
        </VChip>
      </template>
      <template #item.status="{ item }">
-        <VChip
-          :color="getStatusColor(item.raw.status)"
-          size="small"
-        >
-          {{ item.raw.status ? "成功" : "失败" }}
+        <VChip v-if="item.value.status" color="success" size="small">
+          成功
        </VChip>
+        <v-tooltip v-else :text="item.value.errmsg">
+          <template #activator="{ props }">
+            <VChip v-bind="props" color="error" size="small">
+              失败
+            </VChip>
+          </template>
+        </v-tooltip>
      </template>
      <template #item.date="{ item }">
-        <small>{{ item.raw.date }}</small>
-      </template>
-      <template #item.errmsg="{ item }">
-        <small class="text-error">{{ item.raw.errmsg }}</small>
+        <small>{{ item.value.date }}</small>
      </template>
      <template #item.actions="{ item }">
        <IconBtn>
          <VIcon icon="mdi-dots-vertical" />
-          <VMenu
-            activator="parent"
-            close-on-content-click
-          >
+          <VMenu activator="parent" close-on-content-click>
            <VList>
              <VListItem
                v-for="(menu, i) in dropdownItems"
                :key="i"
                variant="plain"
                :base-color="menu.props.color"
-                @click="menu.props.click(item.raw)"
+                @click="menu.props.click(item.value)"
              >
                <template #prepend>
                  <VIcon :icon="menu.props.prependIcon" />
@@ -397,23 +414,9 @@ const dropdownItems = ref([
    </VDataTableServer>
  </VCard>
  <!-- 底部操作按钮 -->
-  <span
-    v-if="selected.length > 0"
-    class="fixed right-5 bottom-5"
-  >
-    <VBtn
-      icon="mdi-redo-variant"
-      class="me-2"
-      color="primary"
-      size="x-large"
-      @click="retransferBatch"
-    />
-    <VBtn
-      icon="mdi-trash-can-outline"
-      color="error"
-      size="x-large"
-      @click="removeHistoryBatch"
-    />
+  <span v-if="selected.length > 0" class="fixed right-5 bottom-5">
+    <VBtn icon="mdi-redo-variant" class="me-2" color="primary" size="x-large" @click="retransferBatch" />
+    <VBtn icon="mdi-trash-can-outline" color="error" size="x-large" @click="removeHistoryBatch" />
  </span>
  <!-- 底部弹窗 -->
  <VBottomSheet v-model="deleteConfirmDialog" inset>
@@ -422,33 +425,17 @@ const dropdownItems = ref([
      <VCardTitle class="pe-10">
        {{ confirmTitle }}
      </VCardTitle>
-      <div class="d-flex  flex-column flex-lg-row justify-center my-3">
-        <VBtn
-          color="primary"
-          class="mb-2 mx-2"
-          @click="deleteConfirmHandler(false, false)"
-        >
+      <div class="d-flex flex-column flex-lg-row justify-center my-3">
+        <VBtn color="primary" class="mb-2 mx-2" @click="deleteConfirmHandler(false, false)">
          仅删除历史记录
        </VBtn>
-        <VBtn
-          color="warning"
-          class="mb-2 mx-2"
-          @click="deleteConfirmHandler(true, false)"
-        >
+        <VBtn color="warning" class="mb-2 mx-2" @click="deleteConfirmHandler(true, false)">
          删除历史记录和源文件
        </VBtn>
-        <VBtn
-          color="info"
-          class="mb-2 mx-2"
-          @click="deleteConfirmHandler(false, true)"
-        >
+        <VBtn color="info" class="mb-2 mx-2" @click="deleteConfirmHandler(false, true)">
          删除历史记录和媒体库文件
        </VBtn>
-        <VBtn
-          color="error"
-          class="mb-2 mx-2"
-          @click="deleteConfirmHandler(true, true)"
-        >
+        <VBtn color="error" class="mb-2 mx-2" @click="deleteConfirmHandler(true, true)">
          删除历史记录、源文件和媒体库文件
        </VBtn>
      </div>
@@ -459,17 +446,19 @@ const dropdownItems = ref([
    v-model="redoDialog"
    :logids="redoIds"
    :target="redoTarget"
-    @done="() => {
-      redoDialog = false
-      // 清空当前操作记录
-      currentHistory = undefined
-      selected = []
-      // 刷新
-      fetchData({
-        page: currentPage,
-        itemsPerPage,
-      })
-    }"
+    @done="
+      () => {
+        redoDialog = false
+        // 清空当前操作记录
+        currentHistory = undefined
+        selected = []
+        // 刷新
+        fetchData({
+          page: currentPage,
+          itemsPerPage,
+        })
+      }
+    "
    @close="redoDialog = false"
  />
 </template>