抛弃轮询，使用websocket获取任务进度;部分优化;去除残留的条件判断;修复去除临时本子时加载不存在的预览图(同步更新)

src/components/DashBoard.vue

@@ -35,7 +35,7 @@
 
   <el-dialog title="查询本子" v-model="chosenGallery" width="100%">
     <el-image v-show='chosenGallery.thumb_link !== undefined' style="float: right; width: 250px; height: 250px" fit="contain"
-              :src="'https://downloader.lionwebsite.xyz/GalleryManage/ehThumbnail?path=' + chosenGallery.thumb_link"/>
+              :src="chosenGallery.thumb_link !== undefined ? 'https://downloader.lionwebsite.xyz/GalleryManage/ehThumbnail?path=' + chosenGallery.thumb_link: ''"/>
     <table>
       <tr>本子名字:{{chosenGallery.name}}</tr>
       <tr>本子页数:{{chosenGallery.pages}}</tr>

src/components/OnlineReader.vue

@@ -93,7 +93,6 @@ function set_current_page(page){
                   :preview-src-list="links" :initial-index="i" @switch="switch_page" @show="set_current_page(i)" loading="lazy"/> <br>
         {{lengthPerPage * index + i + 1}}
       </div>
-
     </el-scrollbar>
 
     <!--五页以下-->

src/components/Side.vue

@@ -103,14 +103,11 @@
       </span>
     </div>
     <template #footer>
-      <el-button @click="downloadTask(currentGallery.download)" :disabled="currentGallery.status !== '下载完成' || currentGallery.mode === 2"
+      <el-button @click="downloadTask(currentGallery.download)" :disabled="currentGallery.status !== '下载完成'" size="large">下载</el-button>
-                 size="large">下载</el-button>
+      <el-button @click="deleteGallery(currentGallery.gid)" :disabled="currentGallery.status !== '下载完成'" size="large">删除</el-button>
-      <el-button @click="deleteGallery(currentGallery.gid)" :disabled="currentGallery.status !== '下载完成'"
-                 size="large">删除</el-button>
       <el-button @click="changeGalleryCollect(currentGallery.gid, currentGallery.isCollect)" :disabled="currentGallery.status !== '下载完成'"
                  size="large">{{currentGallery.isCollect ? '取消收藏' : '收藏'}}</el-button>
-      <el-button @click="readOnlineGallery(currentGallery)" :disabled="currentGallery.status !== '下载完成' || currentGallery.mode === 1"
+      <el-button @click="readOnlineGallery(currentGallery)" size="large">在线看</el-button>
-                 size="large">在线看</el-button>
     </template>
   </el-dialog>
 
@@ -124,8 +121,6 @@ import axios from "axios";
 import {ElMessage} from "element-plus";
 import OnlineReader from "./OnlineReader.vue";
 
-let GalleryManagePrefix = "https://downloader.lionwebsite.xyz/GalleryManage/"
-
 //输入
 let inputNode = ref(null)
 //是否正在编辑页数

src/store/index.js

@@ -6,32 +6,15 @@ const BaseUrl = "https://downloader.lionwebsite.xyz/"
 const GalleryManageUrl = BaseUrl + "GalleryManage"
 
 const actions = {
-    updateGalleryTasks(context, type){
+    updateGalleryTasks(context){
         axios.get(GalleryManageUrl, {
             params:{
-                type,
+                AuthCode: state.AuthCode,
-                AuthCode: state.AuthCode
+                type: 'all'
             }
         }).then((res) => {
-            if(res.data.result === "success") {
+            if(res.data.result === "success")
-                let tasks = JSON.parse(res.data.data)
+                context.commit("_updateGalleryTasks", JSON.parse(res.data.data))
-                if (type === "all" && state.galleryRefreshTimer === 0) {         //判断是否有未下载完成的本子以及定时更新是否开启
-                    for (let i = tasks.length - 1; i > tasks.length - 11; i--)  //从后往前遍历十个本子,查看是否有未下载完成的本子
-                        if (tasks[i].status !== "下载完成") {
-                            state.galleryRefreshTimer = setInterval(() => {
-                                context.dispatch("updateGalleryTasks", "undone").then()
-                            }, 20000)
-                            break
-                        }
-                }
-                context.commit("_updateGalleryTasks", {tasks, type})
-            }
-
-            else if(type === 'undone') {
-                context.dispatch("updateGalleryTasks", "all").then()
-                clearInterval(state.galleryRefreshTimer)
-                state.galleryRefreshTimer = 0
-            }
         })
     },
     postGalleryTask(context, data){
@@ -43,17 +26,12 @@ const actions = {
                 ElMessage("提交成功")
                 context.commit("_setChosenGallery", {gallery: false,
                                                      resolution: data.targetResolution})
-                if(state.galleryRefreshTimer === 0)
-                    state.galleryRefreshTimer = setInterval(() => {
-                        context.dispatch("updateGalleryTasks", "undone").then()
-                    }, 20000)
             }
-            else{
+            else
                 if(res.data.data)
                     ElMessage(res.data.data)
                 else
                     ElMessage("提交失败")
-            }
         })
     },
     queryGalleryTask(context, link){
@@ -79,14 +57,31 @@ const actions = {
                 context.commit("_authed", {AuthCode, ...data})
                 //初始化
                 context.dispatch("loadWeekUsedAmount").then()
-                context.dispatch("updateGalleryTasks", "all").then(() => confirmCurrentTask(context.state))
+                context.dispatch("updateGalleryTasks").then(() => confirmCurrentTask(context.state))
-
+                context.dispatch("initWebsocket").then()
-                //手机不需要设置宽度
             }
             else
                 context.commit("_unAuthed")
         })
     },
+    initWebsocket(context){
+        state.websocket = new WebSocket("wss://downloader.lionwebsite.xyz/ws/")
+        state.websocket.onopen = () => {
+            state.websocket.send("DownloaderWebsocket")
+        }
+
+        state.websocket.onmessage = (event) => {
+            let message = JSON.parse(event.data)
+
+            switch (message.type){
+                case "updateTasks":
+                    context.commit("_updateGalleryTaskProceeding", message.data)
+                    break
+                case "fullUpdate":
+                    context.dispatch("updateGalleryTasks").then()
+            }
+        }
+    },
     loadWeekUsedAmount(context){
         axios.get(GalleryManageUrl + "/weekUsedAmount", {
             params: {
@@ -183,95 +178,71 @@ const mutations = {
         state.collectGallery[index].isCollect = false
         state.collectGallery.splice(index, 1)
     },
-    _updateGalleryTasks(state, data){
+    _updateGalleryTasks(state, tasks){
-        let {tasks, type} = data
+        state.totalGalleryTask.splice(0)
-        if(type === 'all') {
+        state.collectGallery.slice(0)
-            state.totalGalleryTask.splice(0)
+        state.downloadGallery.splice(0)
-            state.collectGallery.slice(0)
-            state.downloadGallery.splice(0)
 
-            tasks.forEach((task) => {
+        tasks.forEach((task) => {
-                //处理名字
+            //处理名字
-                task.shortName = getShortname(task.name)
+            task.shortName = getShortname(task.name)
-                task.thumb_link = GalleryManageUrl + "/ehThumbnail?path=" + task.thumb_link
+            task.thumb_link = GalleryManageUrl + "/ehThumbnail?path=" + task.thumb_link
 
-                //处理进度相关
+            //处理进度相关
-                switch (task.status) {
+            switch (task.status) {
-                    case "已提交":
+                case "已提交":
-                        task.progress = "已提交"
+                case "压缩中":
-                        break;
+                    task.progress = task.status
-                    case "下载中":
+                    break;
-                        task.progress = (Math.round((task.proceeding / task.pages) * 100)).toString() + "%"
+                case "下载中":
-                        break;
+                    task.progress = (Math.round((task.proceeding / task.pages) * 100)).toString() + "%"
-                    case "下载完成":
+                    break;
-                        task.progress = "下载完成"
+                case "下载完成":
-                        task.download = GalleryManageUrl + "/file/" + encodeURI(task.name) + ".zip?AuthCode=" + state.AuthCode + "&gid=" + task.gid
+                    task.progress = task.status
-                        break;
+                    task.download = GalleryManageUrl + "/file/" + encodeURI(task.name) + ".zip?AuthCode=" + state.AuthCode + "&gid=" + task.gid
-                    case "压缩中":
+                    break;
-                        task.progress = "压缩中"
+            }
-                        break
-                }
 
-                //处理时间戳
+            //处理时间戳
-                task.createTimeDisplay = new Date(task.createTime * 1000).toLocaleString("zh")
+            task.createTimeDisplay = new Date(task.createTime * 1000).toLocaleString("zh")
 
-                //处理是否收藏
+            //处理是否收藏
-                if('isCollect' in task)
+            if('isCollect' in task)
-                    state.collectGallery.push(task)
+                state.collectGallery.push(task)
-                else
+            else
-                    task.isCollect = false
+                task.isCollect = false
 
-                //处理是否下载
+            //处理是否下载
-                if(task.downloader === state.userId)
+            if(task.downloader === state.userId)
-                    state.downloadGallery.push(task)
+                state.downloadGallery.push(task)
 
-                state.totalGalleryTask.push(task)
+            state.totalGalleryTask.push(task)
-            })
+        })
-        } else {
-            let tempArray = Array.from(state.totalGalleryTask)
-            state.totalGalleryTask.splice(0)
-            let preDeleteIndex
-            tempArray.forEach((task) => {
-                preDeleteIndex = -1
-                if(task.status !== "下载完成")
-                    for(let i=0; i < tasks.length; i++)
-                        if(tasks[i] !== undefined && tasks[i].name === task.name) {
-                            preDeleteIndex = i
-                            task.status = tasks[i].status
-                            task.proceeding = tasks[i].proceeding
-                            if (task.proceeding === 0)
-                                task.progress = task.status
-                            else
-                                task.progress = (Math.round((task.proceeding / task.pages) * 100)).toString() + "%"
-                        }
 
-                if(preDeleteIndex !== -1)
+        sortTasks(state)
-                    delete tasks[preDeleteIndex]
-                state.totalGalleryTask.push(task)
-            })
-        }
-
-        switch (state.sortType) {
-            case "name":
-                state.totalGalleryTask = state.totalGalleryTask.sort((before, after) => {
-                    return before.name > after.name ? 1: -1
-                })
-                break
-            case "shortName":
-                state.totalGalleryTask = state.totalGalleryTask.sort((before, after) => {
-                    return before.shortName > after.shortName ? 1: -1
-                })
-                break
-            case "createTime":
-                state.totalGalleryTask = state.totalGalleryTask.sort((before, after) => {
-                    return before.createTime - after.createTime
-                })
-        }
         if(state.isAuth && !state.loadComplete){
             state.loadComplete = true
             ElMessage("加载完成")
         }
     },
+    _updateGalleryTaskProceeding(state, tasks){
+        let galleries = Array.from(state.totalGalleryTask)
+        state.totalGalleryTask.splice(0)
+        galleries.forEach((gallery) => {
+            if(gallery.status !== '下载完成')
+                tasks.forEach((task) => {
+                    if(task.gid === gallery.gid){
+                        gallery.status = status[task.status]
+                        gallery.proceeding = task.proceeding
+                        if(gallery.status === '下载中')
+                            gallery.progress = (Math.round((gallery.proceeding / gallery.pages) * 100)).toString() + "%"
+                        else
+                            gallery.progress = gallery.status
+                    }
+                })
+            state.totalGalleryTask.push(gallery)
+        })
+    },
     _changePage(state, targetPage){
         state.page = targetPage
     },
@@ -352,7 +323,7 @@ const mutations = {
             state.chosenGallery.createTimeDisplay = "等待下载完成后再查看"
             state.chosenGallery.progress = "已提交"
             state.chosenGallery.downloader = state.userId
-            state.chosenGallery.downloader = state.userId
+            state.chosenGallery.thumb_link = GalleryManageUrl + "/ehThumbnail?path=" + state.chosenGallery.thumb_link
             state.totalGalleryTask.push(state.chosenGallery)
             state.downloadGallery.push(state.chosenGallery)
         }
@@ -397,6 +368,8 @@ const mutations = {
 }
 
 const state = {
+    websocket: {},                                 //websocket
+
     totalGalleryTask: [],                    //存放本子数据的数组
     chosenGallery: false,                    //准备下载的本子
     thumbnailGallery: {},                    //缩略图本子
@@ -528,7 +501,7 @@ function sortTasks(state){
             })
             break
         case "createTime":
-            state.currentTasks =  state.currentTasks.sort((before, after) => {
+            state.currentTasks = state.currentTasks.sort((before, after) => {
                 return before.createTime - after.createTime
             })
     }
@@ -541,4 +514,6 @@ function deleteTask(tasks, key, value){
                 tasks[j].splice(i, 1)
                 break
             }
-}
+}
+
+let status = ['已提交', '下载中', '等待压缩', '压缩中', '下载完成']