From 4bcbcdf6d9e0ed74d83d905eb99bf5ce7a1c3152 Mon Sep 17 00:00:00 2001
From: jxxghp <jxxghp@gmail.com>
Date: Sun, 9 Jul 2023 11:51:52 +0800
Subject: [PATCH] fix search loading

---
 src/styles/styles.scss                     |  8 ++++
 src/views/discover/TorrentCardListView.vue | 45 +++++++++++++++++++++-
 2 files changed, 52 insertions(+), 1 deletion(-)

diff --git a/src/styles/styles.scss b/src/styles/styles.scss
index 10475c71..3c236ba7 100644
--- a/src/styles/styles.scss
+++ b/src/styles/styles.scss
@@ -27,3 +27,11 @@
   inset-inline-start: 50%;
   transform: translate(-50%, -50%);
 }
+
+
+.top-centered {
+  position: absolute;
+  inset-block-start: 20%;
+  inset-inline-start: 50%;
+  transform: translate(-50%, -50%);
+}
diff --git a/src/views/discover/TorrentCardListView.vue b/src/views/discover/TorrentCardListView.vue
index 6c5c2747..296320f6 100644
--- a/src/views/discover/TorrentCardListView.vue
+++ b/src/views/discover/TorrentCardListView.vue
@@ -3,6 +3,7 @@ import api from "@/api";
 import { Context } from "@/api/types";
 import TorrentCard from "@/components/cards/TorrentCard.vue";
 import NoDataFound from "@/components/NoDataFound.vue";
+import store from "@/store";
 
 // 定义输入参数
 const props = defineProps({
@@ -20,6 +21,13 @@ const groupedDataList = computed(() => {
 // 是否刷新过
 const isRefreshed = ref(false);
 
+// 加载进度文本
+const progressText = ref("");
+// 加载进度
+const progressValue = ref(0);
+// 加载进度SSE
+const progressEventSource = ref<EventSource>();
+
 // 获取订阅列表数据
 const fetchData = async () => {
   try {
@@ -28,6 +36,7 @@ const fetchData = async () => {
       // 查询上次搜索结果
       dataList.value = await api.get("search/last");
     } else {
+      startLoadingProgress();
       // 优先按TMDBID精确查询
       if (props.keyword?.startsWith("tmdb:") || props.keyword?.startsWith("douban:")) {
         dataList.value = await api.get(`search/media/${props.keyword}`);
@@ -35,6 +44,7 @@ const fetchData = async () => {
         // 按标题模糊查询
         dataList.value = await api.get(`search/title/${props.keyword}`);
       }
+      stopLoadingProgress();
     }
     isRefreshed.value = true;
   } catch (error) {
@@ -76,6 +86,26 @@ const getFirstContexts = computed(() => {
   return firstContexts;
 });
 
+// 使用SSE监听加载进度
+const startLoadingProgress = () => {
+  progressText.value = "正在搜索，请稍候...";
+  const token = store.state.auth.token;
+  progressEventSource.value = new EventSource(
+    `${import.meta.env.VITE_API_BASE_URL}system/progress/search?token=${token}`
+  );
+  progressEventSource.value.onmessage = (event) => {
+    const progress = JSON.parse(event.data);
+    console.log(progress);
+    progressText.value = progress.text;
+    progressValue.value = progress.value;
+  };
+};
+
+// 停止监听加载进度
+const stopLoadingProgress = () => {
+  progressEventSource.value?.close();
+};
+
 // 加载时获取数据
 onBeforeMount(fetchData);
 </script>
@@ -83,10 +113,23 @@ onBeforeMount(fetchData);
 <template>
   <VProgressCircular
     class="centered"
-    v-if="!isRefreshed"
+    v-if="!isRefreshed && !props.keyword"
     indeterminate
     color="primary"
   ></VProgressCircular>
+  <div
+    class="top-centered mt-12 w-full text-center text-gray-500 text-sm flex flex-col items-center"
+    v-if="!isRefreshed && props.keyword"
+  >
+    <VProgressCircular
+      class="mb-3"
+      color="primary"
+      :model-value="progressValue"
+      size="64"
+      width="7"
+    ></VProgressCircular>
+    <span>{{ progressText }}</span>
+  </div>
   <div class="grid gap-3 grid-torrent-card items-start" v-if="dataList.length > 0">
     <TorrentCard
       v-for="data in getFirstContexts"