refactor(SubscribeListView): 移除不必要的 VPullToRefresh 组件,简化订阅列表渲染逻辑

This commit is contained in:
jxxghp
2025-01-25 19:15:02 +08:00
parent b316f960a1
commit a019dbd44e
+19 -22
View File
@@ -1,6 +1,5 @@
<script lang="ts" setup> <script lang="ts" setup>
import draggable from 'vuedraggable' import draggable from 'vuedraggable'
import { VPullToRefresh } from 'vuetify/labs/VPullToRefresh'
import api from '@/api' import api from '@/api'
import type { Subscribe } from '@/api/types' import type { Subscribe } from '@/api/types'
import NoDataFound from '@/components/NoDataFound.vue' import NoDataFound from '@/components/NoDataFound.vue'
@@ -138,27 +137,25 @@ onActivated(async () => {
<template> <template>
<LoadingBanner v-if="!isRefreshed" class="mt-12" /> <LoadingBanner v-if="!isRefreshed" class="mt-12" />
<VPullToRefresh v-model="loading" @load="onRefresh"> <draggable
<draggable v-if="displayList.length > 0"
v-if="displayList.length > 0" v-model="displayList"
v-model="displayList" @end="saveSubscribeOrder"
@end="saveSubscribeOrder" handle=".cursor-move"
handle=".cursor-move" item-key="id"
item-key="id" tag="div"
tag="div" :component-data="{ class: 'mx-3 grid gap-4 grid-subscribe-card p-1' }"
:component-data="{ class: 'mx-3 grid gap-4 grid-subscribe-card p-1' }" >
> <template #item="{ element }">
<template #item="{ element }"> <SubscribeCard :key="element.id" :media="element" @remove="fetchData" @save="fetchData" />
<SubscribeCard :key="element.id" :media="element" @remove="fetchData" @save="fetchData" /> </template>
</template> </draggable>
</draggable> <NoDataFound
<NoDataFound v-if="displayList.length === 0 && isRefreshed"
v-if="displayList.length === 0 && isRefreshed" error-code="404"
error-code="404" error-title="没有订阅"
error-title="没有订阅" error-description="请通过搜索添加电影电视剧订阅"
error-description="请通过搜索添加电影电视剧订阅" />
/>
</VPullToRefresh>
<!-- 底部操作按钮 --> <!-- 底部操作按钮 -->
<div> <div>
<VFab <VFab