no data found pages

src/views/discover/MediaCardListView.vue

@@ -23,7 +23,7 @@ const page = ref(1);
 // 是否加载中
 const loading = ref(false);
 // 是否加载完成
-const finished = ref(false);
+const isRefreshed = ref(false);
 
 // 数据列表
 const dataList = ref<MediaInfo[]>([]);
@@ -62,7 +62,7 @@ const fetchData = async ({ done }) => {
           params: getParams(),
         });
         // 标计为已请求完成
-        finished.value = true;
+        isRefreshed.value = true;
         if (currData.value.length === 0) {
           // 如果没有数据，跳出
           done("ok");
@@ -80,7 +80,7 @@ const fetchData = async ({ done }) => {
         params: getParams(),
       });
       // 标计为已请求完成
-      finished.value = true;
+      isRefreshed.value = true;
       if (currData.value.length === 0) {
         // 如果没有数据，跳出
         done("ok");
@@ -107,7 +107,7 @@ const fetchData = async ({ done }) => {
 <template>
   <VProgressCircular
     class="centered"
-    v-if="!finished"
+    v-if="!isRefreshed"
     indeterminate
     color="primary"
   ></VProgressCircular>
@@ -118,9 +118,16 @@ const fetchData = async ({ done }) => {
     class="overflow-hidden"
   >
     <template #loading />
-    <div class="grid gap-4 grid-media-card mx-3">
+    <div class="grid gap-4 grid-media-card mx-3" v-if="dataList.length > 0">
       <MediaCard v-for="data in dataList" :key="data.tmdb_id" :media="data"> </MediaCard>
     </div>
+    <NoDataFound
+      v-if="dataList.length === 0 && isRefreshed"
+      error-code="500"
+      error-title="出错啦！"
+      error-description="无法获取到媒体信息，请检查网络连接。"
+    >
+    </NoDataFound>
   </VInfiniteScroll>
 </template>
 

src/views/reorganize/DownloadingListView.vue

@@ -1,40 +1,64 @@
 <script lang="ts" setup>
-import api from "@/api";
-import type { DownloadingInfo } from "@/api/types";
-import DownloadingCard from "@/components/cards/DownloadingCard.vue";
-import PullRefresh from "pull-refresh-vue3";
+import api from '@/api'
+import type { DownloadingInfo } from '@/api/types'
+import NoDataFound from '@/components/NoDataFound.vue'
+import DownloadingCard from '@/components/cards/DownloadingCard.vue'
+import PullRefresh from 'pull-refresh-vue3'
 
 // 数据列表
-const dataList = ref<DownloadingInfo[]>([]);
+const dataList = ref<DownloadingInfo[]>([])
 
 // 获取订阅列表数据
 const fetchData = async () => {
   try {
-    dataList.value = await api.get("download");
+    dataList.value = await api.get('download')
   } catch (error) {
-    console.error(error);
+    console.error(error)
   }
-};
-
-// 加载时获取数据
-onMounted(fetchData);
+}
 
 // 刷新状态
-const loading = ref(false);
+const loading = ref(false)
+
+// 是否刷新过
+const isRefreshed = ref(false)
 
 // 下拉刷新
 const onRefresh = () => {
-  loading.value = true;
-  fetchData();
-  loading.value = false;
-};
+  loading.value = true
+  fetchData()
+  loading.value = false
+  isRefreshed.value = true
+}
+
+// 加载时获取数据
+onBeforeMount(() => {
+  fetchData()
+})
 </script>
 
 <template>
-  <PullRefresh v-model="loading" @refresh="onRefresh">
-    <div class="grid gap-3 grid-downloading-card">
-      <DownloadingCard v-for="data in dataList" :key="data.hash" :info="data" />
+  <PullRefresh
+    v-model="loading"
+    @refresh="onRefresh"
+  >
+    <div
+      class="grid gap-3 grid-downloading-card"
+      v-if="dataList.length > 0"
+    >
+      <DownloadingCard
+        v-for="data in dataList"
+        :key="data.hash"
+        :info="data"
+      />
     </div>
+    <NoDataFound 
+      v-if="dataList.length === 0 && isRefreshed"
+      error-code="404"
+      error-title="没有任务"
+      error-description="正在下载的任务将会显示在这里。"
+    >
+    </NoDataFound>
   </PullRefresh>
 </template>
 

src/views/site/SiteCardListView.vue

@@ -1,28 +1,46 @@
 <script lang="ts" setup>
-import api from "@/api";
-import { Site } from "@/api/types";
-import SiteCard from "@/components/cards/SiteCard.vue";
+import api from '@/api';
+import { Site } from '@/api/types';
+import SiteCard from '@/components/cards/SiteCard.vue';
 
 // 数据列表
-const dataList = ref<Site[]>([]);
+const dataList = ref<Site[]>([])
+
+// 是否刷新过
+const isRefreshed = ref(false)
 
 // 获取订阅列表数据
 const fetchData = async () => {
   try {
-    dataList.value = await api.get("site");
+    dataList.value = await api.get('site')
+    isRefreshed.value = true
   } catch (error) {
-    console.error(error);
+    console.error(error)
   }
-};
+}
 
 // 加载时获取数据
-onMounted(fetchData);
+onBeforeMount(fetchData)
 </script>
 
 <template>
-  <div class="grid gap-3 grid-site-card">
-    <SiteCard v-for="data in dataList" :key="data.id" :site="data" />
+  <div
+    class="grid gap-3 grid-site-card"
+    v-if="dataList.length > 0"
+  >
+    <SiteCard
+      v-for="data in dataList"
+      :key="data.id"
+      :site="data"
+    />
   </div>
+  <NoDataFound
+    v-if="dataList.length === 0 && isRefreshed"
+    error-code="404"
+    error-title="没有站点"
+    error-description="已添加并支持的站点将会在这里显示。"
+  >
+  </NoDataFound>
 </template>
 
 <style type="scss">

src/views/subscribe/SubscribeListView.vue

@@ -9,6 +9,9 @@ const props = defineProps({
   type: String,
 });
 
+// 是否刷新过
+const isRefreshed = ref(false)
+
 // 数据列表
 const dataList = ref<Subscribe[]>([]);
 
@@ -16,13 +19,14 @@ const dataList = ref<Subscribe[]>([]);
 const fetchData = async () => {
   try {
     dataList.value = await api.get("subscribe");
+    isRefreshed.value = true
   } catch (error) {
     console.error(error);
   }
 };
 
 // 加载时获取数据
-onMounted(fetchData);
+onBeforeMount(fetchData);
 
 // 刷新状态
 const loading = ref(false);
@@ -42,9 +46,17 @@ const filteredDataList = computed(() => {
 
 <template>
   <PullRefresh v-model="loading" @refresh="onRefresh">
-    <div class="grid gap-3 grid-subscribe-card">
+    <div class="grid gap-3 grid-subscribe-card" 
+      v-if="filteredDataList.length > 0">
       <SubscribeCard v-for="data in filteredDataList" :key="data.id" :media="data" />
     </div>
+    <NoDataFound
+      v-if="filteredDataList.length === 0 && isRefreshed"
+      error-code="404"
+      error-title="没有订阅"
+      error-description="请通过搜索添加电影、电视剧订阅。"
+    >
+    </NoDataFound>
   </PullRefresh>
 </template>