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

src/components/DashBoard.vue

@@ -45,7 +45,7 @@
   <el-dialog title="查询本子" v-model="chosenGallery" style="height: 350px">
     <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>
@@ -62,10 +62,9 @@
     </table>
     <template #footer>
       <el-button @click="postTask" v-if="chosenGallery.availableResolution">下载</el-button>
+      <el-button @click="window.open(chosenGallery.download)" v-else>下载文件</el-button>
       <el-button @click="readOnlineGallery(chosenGallery)">在线预览</el-button>
-      <tr v-if="chosenGallery.status === '下载完成'">
+      <el-button v-if="chosenGallery.status === '下载完成'" @click="deleteGallery">删除</el-button>
-        <el-button @click="deleteGallery">删除</el-button>
-      </tr>
     </template>
   </el-dialog>
 
@@ -111,7 +110,6 @@
       在线预览<hr>
       <span style="display: inline-block">在线预览分页页数:</span>
       <input v-model="lengthPerPage">
-      (建议为3的倍数，因为固定了一行三张)
     </div>
     <template #footer>
       <el-button type="primary" @click="saveConfig">保存</el-button>
@@ -157,6 +155,7 @@ let realAuthCode = computed(() => {
 
 let chosenGallery = computed(() => {
   param.value = ''
+  targetResolution.value = ''
   return store.state.chosenGallery
 })
 
@@ -203,7 +202,6 @@ function postTask(){
   store.dispatch("postGalleryTask",
       {link: chosenGallery.value.link,
               targetResolution: targetResolution.value})
-  targetResolution.value = ""
 }
 
 //查询任务

src/components/OnlineReader.vue

@@ -86,13 +86,11 @@ function set_current_page(page){
       </div>
     </template>
     <el-scrollbar height="75vh" ref="onlineReadingScrollbar">
-      <div v-for="(link, i) in links" style="display: inline-block; text-align: center">
+      <div v-for="(link, i) in links" style="display: inline-block; text-align: center; min-height: 300px">
-        <el-image :src="link" :style="{'width': store.state.imageWidth, 'padding-right': store.state.imagePadding, 'background-color': 'gary'}"
+        <el-image :src="link" :style="{'width': '66vw', 'background-color': 'gary'}"
                   :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

@@ -35,9 +35,9 @@
         <el-table-column label="操作" width="300vw">
           <template #default="scoped">
             <span>
-              <el-button @click="downloadTask(scoped.row.download)" :disabled="scoped.row.status !== '下载完成' || scoped.row.mode === 2">下载</el-button>
+              <el-button @click="downloadTask(scoped.row.download)" :disabled="scoped.row.status !== '下载完成'">下载</el-button>
               <el-button @click="changeGalleryCollect(scoped.row.gid, scoped.row.isCollect)">{{scoped.row.isCollect ? '取消收藏' : '收藏'}}</el-button>
-              <el-button @click="readOnlineGallery(scoped.row)" :disabled="scoped.row.status !== '下载完成' || scoped.row.mode === 1">在线看</el-button>
+              <el-button @click="readOnlineGallery(scoped.row)">在线看</el-button>
             </span>
           </template>
         </el-table-column>
@@ -102,8 +102,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,16 +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()
-                //写死图片合适宽度
-                state.imageWidth = 27 + 'vw'
-                state.imagePadding = 1 + 'vw'
             }
             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: {
@@ -184,95 +177,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,6 +321,7 @@ const mutations = {
             state.chosenGallery.createTimeDisplay = "等待下载完成后再查看"
             state.chosenGallery.progress = "已提交"
             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)
         }
@@ -390,6 +360,8 @@ const mutations = {
 }
 
 const state = {
+    websocket: {},                                 //websocket
+
     totalGalleryTask: [],                    //存放本子数据的数组
     chosenGallery: false,                    //准备下载的本子
     thumbnailGallery: {},                    //缩略图本子
@@ -401,8 +373,6 @@ const state = {
     isReading: false,                        //是否正在看
 
     currentGid: "",                          //当前GID
-    imageWidth: "",                          //图片宽度
-    imagePadding: "",                        //图片padding
     lengthPerPage: 0,                        //在线预览每页图片数量
 
     page: 1,                                 //当前页数
@@ -526,7 +496,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
             })
     }
@@ -539,4 +509,6 @@ function deleteTask(tasks, key, value){
                 tasks[j].splice(i, 1)
                 break
             }
-}
+}
+
+let status = ['已提交', '下载中', '等待压缩', '压缩中', '下载完成']