feat: 添加刷新状态控制,优化多个视图的显示逻辑

This commit is contained in:
jxxghp
2025-01-25 19:34:39 +08:00
parent a019dbd44e
commit a3ecad3436
6 changed files with 36 additions and 34 deletions
+25 -23
View File
@@ -139,27 +139,29 @@ onUnmounted(() => {
<TorrentCardListView v-else :items="dataList" /> <TorrentCardListView v-else :items="dataList" />
</div> </div>
<!-- 视图切换 --> <!-- 视图切换 -->
<VFab <div v-if="isRefreshed">
v-if="viewType === 'list'" <VFab
class="mb-12" v-if="viewType === 'list'"
icon="mdi-view-grid" class="mb-12"
location="bottom" icon="mdi-view-grid"
size="x-large" location="bottom"
absolute size="x-large"
app absolute
appear app
@click="setViewType('card')" appear
:class="{ 'mb-12': appMode }" @click="setViewType('card')"
/> :class="{ 'mb-12': appMode }"
<VFab />
v-else <VFab
icon="mdi-view-list" v-else
location="bottom" icon="mdi-view-list"
size="x-large" location="bottom"
fixed size="x-large"
app fixed
appear app
@click="setViewType('list')" appear
:class="{ 'mb-12': appMode }" @click="setViewType('list')"
/> :class="{ 'mb-12': appMode }"
/>
</div>
</template> </template>
+1 -1
View File
@@ -507,7 +507,7 @@ onMounted(async () => {
</VWindow> </VWindow>
</div> </div>
<div> <div v-if="isRefreshed">
<!-- 插件搜索图标 --> <!-- 插件搜索图标 -->
<VFab <VFab
icon="mdi-magnify" icon="mdi-magnify"
+7 -3
View File
@@ -113,6 +113,9 @@ const progressText = ref('请稍候 ...')
// 进度值 // 进度值
const progressValue = ref(0) const progressValue = ref(0)
// 是否已刷新
const isRefreshed = ref(false)
// 删除确认对话框 // 删除确认对话框
const deleteConfirmDialog = ref(false) const deleteConfirmDialog = ref(false)
@@ -160,7 +163,8 @@ watch(
) )
// 搜索监听 // 搜索监听
watch([() => search.value, () => isComposing.value], watch(
[() => search.value, () => isComposing.value],
debounce(async () => { debounce(async () => {
if (!isComposing.value) { if (!isComposing.value) {
console.log('search: ' + search.value) console.log('search: ' + search.value)
@@ -181,7 +185,7 @@ async function fetchData(page = currentPage.value, count = itemsPerPage.value) {
title: search.value, title: search.value,
}, },
}) })
isRefreshed.value = true
dataList.value = result.data?.list dataList.value = result.data?.list
totalItems.value = result.data?.total totalItems.value = result.data?.total
searchHintList.value = ['失败', '成功', ...new Set(dataList.value.map(item => item.title || ''))].filter( searchHintList.value = ['失败', '成功', ...new Set(dataList.value.map(item => item.title || ''))].filter(
@@ -502,7 +506,7 @@ onMounted(fetchData)
</VCard> </VCard>
<!-- 底部操作按钮 --> <!-- 底部操作按钮 -->
<div> <div v-if="isRefreshed">
<VFab <VFab
v-if="selected.length > 0" v-if="selected.length > 0"
icon="mdi-trash-can-outline" icon="mdi-trash-can-outline"
+1
View File
@@ -111,6 +111,7 @@ onActivated(() => {
/> />
<!-- 新增站点按钮 --> <!-- 新增站点按钮 -->
<VFab <VFab
v-if="isRefreshed"
icon="mdi-plus" icon="mdi-plus"
location="bottom" location="bottom"
size="x-large" size="x-large"
+1 -7
View File
@@ -109,12 +109,6 @@ async function fetchData() {
// 刷新状态 // 刷新状态
const loading = ref(false) const loading = ref(false)
// 下拉刷新
async function onRefresh({ done }: { done: any }) {
await fetchData()
done('ok')
}
onMounted(async () => { onMounted(async () => {
await loadSubscribeOrderConfig() await loadSubscribeOrderConfig()
await fetchData() await fetchData()
@@ -157,7 +151,7 @@ onActivated(async () => {
error-description="请通过搜索添加电影电视剧订阅" error-description="请通过搜索添加电影电视剧订阅"
/> />
<!-- 底部操作按钮 --> <!-- 底部操作按钮 -->
<div> <div v-if="isRefreshed">
<VFab <VFab
v-if="store.state.auth.superUser" v-if="store.state.auth.superUser"
icon="mdi-clipboard-edit" icon="mdi-clipboard-edit"
+1
View File
@@ -68,6 +68,7 @@ onActivated(() => {
/> />
<VFab <VFab
v-if="isRefreshed"
icon="mdi-plus" icon="mdi-plus"
location="bottom" location="bottom"
size="x-large" size="x-large"