加入修改授权码的对话框,优化更新策略，轮询未下载完成的任务而不是全部任务，解除40个的数量限制，部分细节优化(同步更新)

src/components/DashBoard.vue

@@ -15,6 +15,7 @@
     <el-button @click="searchLocalByKeyword">查找当前页任务</el-button>
     <br>
     <el-button @click="openPanel">打开面板</el-button>
+    <el-button @click="isAlterAuthCode = true">修改授权码</el-button>
     <br>
     <div v-show="thumbnailGallery !== {}">
       <span>
@@ -64,6 +65,30 @@
     <el-button @click="deleteVideo" v-if="chosenVideo.resolution">删除</el-button>
   </el-dialog>
 
+  <el-dialog title="修改授权码" v-model="isAlterAuthCode" width="100">
+    <el-form>
+      <el-form-item>
+        <template #label>当前授权码</template>
+        <template #default>{{realAuthCode}}</template>
+      </el-form-item>
+      <el-form-item>
+        <template #label>新的授权码</template>
+        <template #default>
+          <el-input v-model="newAuthCode"></el-input>
+        </template>
+      </el-form-item>
+      <el-form-item>
+        <template #label>再次输入授权码</template>
+        <template #default>
+          <el-input v-model="tempAuthCode"></el-input>
+        </template>
+      </el-form-item>
+    </el-form>
+    <el-footer>
+      <el-button @click="alterAuthCode">提交</el-button>
+    </el-footer>
+  </el-dialog>
+
 
   <div class="DashBoard" v-show="!loadComplete">
       <el-input v-model="AuthCode" class="validate" placeholder="请输入授权码">
@@ -82,11 +107,18 @@ export default {
   setup(){
     let AuthCode = ref("")
     let isRemember = ref(false)
+    let isAlterAuthCode = ref(false)
+    let newAuthCode = ref("")
+    let tempAuthCode = ref("")
     let keyword = ref("")
     let link = ref("")
     let showTips = ref(false)
     let targetResolution = ref("")
 
+    let realAuthCode = computed(() => {
+      return store.state.AuthCode
+    })
+
     let chosenGallery = computed(() => {
       return store.state.chosenGallery
     })
@@ -111,6 +143,17 @@ export default {
       return store.state.thumbnailGallery
     })
 
+    function alterAuthCode(){
+      if(newAuthCode.value.trim() === "" || tempAuthCode.value.trim() === "" || newAuthCode.value !== tempAuthCode.value)
+        ElMessage("请检查授权码输入是否错误")
+      else {
+        store.dispatch("alterAuthCode", newAuthCode.value)
+        isAlterAuthCode.value = false
+        newAuthCode.value = ""
+        tempAuthCode.value = ""
+      }
+    }
+
     function queryWeekUsedAmount(){
       store.dispatch("loadWeekUsedAmount")
     }
@@ -227,8 +270,9 @@ export default {
     })
 
     return {postTask, queryTask, validate, searchByLink, searchLocalByKeyword, searchRemoteByKeyword, openPanel, onlineGalleryReader,
-            queryWeekUsedAmount, deleteVideo, deleteGallery,
+            queryWeekUsedAmount, deleteVideo, deleteGallery, alterAuthCode,
-            link, loadComplete, AuthCode, keyword, isRemember, chosenGallery, chosenVideo, targetResolution, weekUsed, showTips, thumbnailGallery,
+            link, loadComplete, AuthCode, realAuthCode,  keyword, isRemember, chosenGallery, chosenVideo, targetResolution, weekUsed, showTips, thumbnailGallery,
+            isAlterAuthCode, newAuthCode, tempAuthCode,
       store
     }
   }

src/components/Side.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-drawer v-model="isOpenHistoryPanel" direction="ltr" size="100%" @close="closeHistoryPanel" :title="showType === 'gallery' ? '本子' : '视频'">
+  <el-drawer v-model="isOpenHistoryPanel" direction="ltr" size="100%" @close="closeHistoryPanel" >
     <div class="side">
       <div v-show="loadComplete" class="load_complete">
         <el-table :data="galleryTasks" v-show="isShowGalleryHistory">
@@ -68,14 +68,14 @@
         <el-row class="pageChanger">
           <el-col>
             排列顺序:<el-select v-model="sortType" @change="changeSortType">
-                      <el-option value="fullName" label="名字"></el-option>
+                      <el-option value="name" label="名字"></el-option>
                       <el-option value="shortName" label="简洁名字"></el-option>
                       <el-option value="createTime" label="任务创建时间"></el-option>
                     </el-select>
           </el-col>
           <el-col>
             显示:<el-select v-model="showNameType" @change="changeShowNameType">
-            <el-option value="fullName" label="名字"></el-option>
+            <el-option value="name" label="名字"></el-option>
             <el-option value="shortName" label="简洁名字"></el-option>
           </el-select>
           </el-col>

src/store/index.js

@@ -8,100 +8,110 @@ const GalleryManageUrl = BaseUrl + "GalleryManage/"
 const VideoManageUrl = BaseUrl + "VideoManage/"
 
 const actions = {
-    updateGalleryTasks(context){
+    updateGalleryTasks(context, type){
-        const AuthCode = context.state.AuthCode
         axios.get(GalleryManageUrl, {
             params:{
-                param:"",
+                type,
-                type:"all",
+                AuthCode: state.AuthCode
-                AuthCode
             }
         }).then((res) => {
-            context.commit("_emptyGalleryTasks")
+            if(res.data.result === "success")
-            context.commit("_updateGalleryTasks", JSON.parse(res.data.data))
+                context.commit("_updateGalleryTasks", {tasks:JSON.parse(res.data.data), type})
+
+            else if(type === 'undone') {
+                context.dispatch("updateGalleryTasks", "all").then()
+                clearInterval(state.refreshTimer)
+                state.refreshTimer = 0
+            }
         })
     },
-    updateVideoTasks(context){
+    updateVideoTasks(context, type){
-        const AuthCode = context.state.AuthCode
         axios.get(VideoManageUrl, {
             params:{
-                param:"123",
+                type,
-                type:"all",
+                AuthCode: state.AuthCode
-                AuthCode
             }
         }).then(res => {
-            context.commit("_emptyVideoTasks")
+            if(res.data.result === "success")
-            context.commit("_updateVideoTasks", JSON.parse(res.data.data))
+                context.commit("_updateVideoTasks", {tasks:JSON.parse(res.data.data), type})
+
+            else if(type === 'undone') {
+                clearInterval(state.refreshTimer)
+                state.refreshTimer = 0
+                context.dispatch("updateVideoTasks", "all").then()
+            }
         })
     },
     postGalleryTask(context, data){
         axios.post(GalleryManageUrl, qs.stringify({
-            AuthCode:context.state.AuthCode,
+            AuthCode: state.AuthCode,
             link: data.link,
             targetResolution: data.targetResolution
         })).then((res) => {
             if(res.data.result === "success") {
                 ElMessage("提交成功")
                 context.commit("_setChosenGallery", {gallery: false, resolution: data.targetResolution})
+                if(state.refreshTimer === 0)
+                    state.refreshTimer = setInterval(() => {
+                        context.dispatch("updateGalleryTasks", "undone").then()
+                    }, 20000)
             }
             else{
                 if(res.data.data)
                     ElMessage(res.data.data)
-                else{
+                else
                     ElMessage("提交失败")
             }
-            }
         })
     },
     postVideoTask(context, data){
         axios.post(VideoManageUrl, qs.stringify({
-            AuthCode:context.state.AuthCode,
+            AuthCode: state.AuthCode,
             link: data.link,
             targetResolution: data.targetResolution
         })).then((res) => {
             if(res.data.result === "success") {
                 ElMessage("提交成功")
                 context.commit("_setChosenVideo", {video: false, resolution: data.targetResolution})
+                if(state.refreshTimer === 0)
+                    state.refreshTimer = setInterval(() => {
+                        context.dispatch("updateVideoTasks", "undone").then()
+                    }, 20000)
             }
             else{
                 if(res.data.data)
                     ElMessage(res.data.data)
-                else{
+                else
                     ElMessage("提交失败")
             }
-            }
         })
     },
     queryGalleryTask(context, link){
-        const AuthCode = context.state.AuthCode
         axios.get(GalleryManageUrl, {
             params:{
                 param: link,
                 type:'link',
-                AuthCode
+                AuthCode: state.AuthCode
             }
         }).then((res) => {
-            if(res.data.result === 'success'){
+            if(res.data.result === 'success')
-                const gallery = JSON.parse(res.data.data)
+                context.commit("_setChosenGallery", {gallery: JSON.parse(res.data.data)})
-                context.commit("_setChosenGallery", {gallery})
+
-            }
             else
                 ElMessage("查询失败")
         })
     },
     queryVideoTask(context, link){
-        const AuthCode = context.state.AuthCode
         axios.get(VideoManageUrl, {
             params:{
                 param: link,
                 type: "link",
-                AuthCode
+                AuthCode: state.AuthCode
             }
         }).then((res) => {
-            if(res.data.result === 'success'){
+            if(res.data.result === 'success')
-                const video = JSON.parse(res.data.data)
+                context.commit("_setChosenVideo", {video: JSON.parse(res.data.data)})
-                context.commit("_setChosenVideo", {video})
+
-            }
             else
                 ElMessage("查询失败")
         })
@@ -109,45 +119,33 @@ const actions = {
     validate(context, AuthCode){
         axios.post(BaseUrl + "validate?AuthCode=" + AuthCode).then((res)=>{
             if(res.data.result === 'success'){
-                context.commit("_authed", AuthCode, context)
+                context.commit("_authed", AuthCode)
-                context.dispatch("updateGalleryTasks").then()
-                context.dispatch("updateVideoTasks").then()
                 context.dispatch("loadMaskDomain").then()
                 context.dispatch("loadWeekUsedAmount").then()
-                setInterval(() => {
+                context.dispatch("updateGalleryTasks", "all").then()
-                    context.dispatch("update").then()
+                context.dispatch("updateVideoTasks", "all").then()
-                }, 30000)
             }
-            else{
-                context.commit("_unAuthed")
-            }
-        })
-    },
-    update(context){
-        if(context.state.showType === "video")
-            context.dispatch("updateVideoTasks").then()
             else
-            context.dispatch("updateGalleryTasks").then()
+                context.commit("_unAuthed")
+        })
     },
     loadMaskDomain(context){
       axios.get(BaseUrl + "maskDomain").then((res) => {
-          if(res.data.result === "success"){
+          if(res.data.result === "success")
               context.commit("_setMaskDomain", JSON.parse(res.data.data))
-          }
       })
     },
     loadWeekUsedAmount(context){
         axios.get(GalleryManageUrl + "weekUsedAmount", {
             params: {
-                AuthCode: context.state.AuthCode
+                AuthCode: state.AuthCode
             }
         }).then((res) => {
             if(res.data.result === "success"){
                 context.state.weekUsed = JSON.parse(res.data.data)
                 ElMessage("查询用量成功")
-            }else{
+            }else
                 ElMessage("查询用量失败")
-            }
         })
     },
     searchByLink(context, link){
@@ -198,9 +196,8 @@ const actions = {
                 ElMessage("删除成功")
                 context.commit("_deleteGallery", gid)
             }
-            else{
+            else
                 ElMessage(res.data.data)
-            }
         })
     },
     deleteVideo(context, id){
@@ -214,21 +211,30 @@ const actions = {
                 ElMessage("删除成功")
                 context.commit("_deleteVideo", id)
             }
-            else{
+            else
                 ElMessage(res.data.data)
+        })
+    },
+    alterAuthCode(context, AuthCode){
+        axios.put(BaseUrl + "AuthCode?" + qs.stringify({'AuthCode': state.AuthCode, 'newAuthCode': AuthCode}))
+            .then((res) => {
+                if(res.data.result === 'success') {
+                    ElMessage("修改成功")
+                    if(localStorage.getItem("auth") === state.AuthCode)
+                        localStorage.setItem("auth", AuthCode)
+                    state.AuthCode = AuthCode
                 }
+                else
+                    ElMessage(res.data.data)
             })
     }
 }
 
 const mutations = {
-    _emptyGalleryTasks(state){
+    _updateGalleryTasks(state, data){
+        let {tasks, type} = data
+        if(type === 'all') {
             state.totalGalleryTask.splice(0)
-    },
-    _emptyVideoTasks(state){
-        state.totalVideoTask.splice(0)
-    },
-    _updateGalleryTasks(state, tasks){
             tasks.forEach((task) => {
                 if (task.name.includes("[")) {
                     let name = task.name
@@ -247,43 +253,83 @@ const mutations = {
                         name = name.replace(temp, "")
                     }
                     task.shortName = name.trim()
-            }
+                } else {
-            else{
                     task.shortName = task.name
                 }
 
-            if(task.status === "已提交"){
+                switch (task.status) {
+                    case "已提交":
                         task.progress = "已提交"
-            }
+                        break;
-            else if(task.status === "下载中"){
+                    case "下载中":
                         task.progress = (Math.round((task.proceeding / task.pages) * 100)).toString() + "%"
-            }
+                        break;
-            else if(task.status === "下载完成"){
+                    case "下载完成":
                         task.progress = "下载完成"
                         let tempLink
                         let url = new URL(task.link)
-
                         state.maskDomain.forEach((mask) => {
                             if (url.host === mask['raw'])
                                 tempLink = task.link.replace(mask['raw'], mask['mask'])
                         })
                         task.download = GalleryManageUrl + "file/" + encodeURI(task.name) + "?link=" + tempLink + "&AuthCode=" + state.AuthCode
+                        break;
                 }
+
                 task.createTimeDisplay = moment(task.createTime * 1000).format("YYYY-MM-DD HH:mm:ss")
                 state.totalGalleryTask.push(task)
             })
-        state.totalGalleryTask =  state.totalGalleryTask.sort((before, after) => {
+        }
-            if(state.sortType === 'name')
+        else {
-                return before.name > after.name ? 1: -1
+            let tempArray = Array.from(state.totalGalleryTask)
+            state.totalGalleryTask.splice(0)
+            let preDeleteIndex
+            tempArray.forEach((task) => {
+                preDeleteIndex = -1
+                if(task.status !== "下载完成")
+                    tasks.forEach((newTask, index) => {
+                        if(newTask.name === task.name){
+                            preDeleteIndex = index
+                            task.status = newTask.status
+                            task.proceeding = newTask.proceeding
+                            if(task.proceeding  === 0)
+                                task.progress = task.status
                             else
+                                task.progress = (Math.round((task.proceeding / task.pages) * 100)).toString() + "%"
+                        }
+                    })
+
+                if(preDeleteIndex !== -1)
+                    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("加载完成")
         }
     },
-    _updateVideoTasks(state, tasks){
+    _updateVideoTasks(state, data){
+        let {tasks, type} = data
+        if(type === 'all') {
+            state.totalVideoTask.splice(0)
             tasks.forEach((task) => {
                 task.progress = task.status
                 if (task.status === "下载完成") {
@@ -295,10 +341,29 @@ const mutations = {
                             tempLink = task.link.replace(mask['raw'], mask['mask'])
                     })
                     task.download = VideoManageUrl + "file/" + encodeURI(task.name) + "?link=" + tempLink + "&AuthCode=" + state.AuthCode
-            }
                     task.createTimeDisplay = moment(task.createTime * 1000).format("YYYY-MM-DD HH:mm:ss")
+                }
                 state.totalVideoTask.push(task)
             })
+        }
+        else{
+            let tempArray = Array.from(state.totalVideoTask)
+            state.totalVideoTask.splice(0)
+            let preDeleteIndex
+            tempArray.forEach((task) => {
+                preDeleteIndex = -1
+                if(task.status !== "下载完成")
+                    tasks.forEach((newTask, index) => {
+                        if(newTask.name === task.name){
+                            task.progress = task.status
+                            preDeleteIndex = index
+                        }
+                    })
+                if(preDeleteIndex !== -1)
+                    delete tasks[preDeleteIndex]
+                state.totalVideoTask.push(task)
+            })
+        }
         state.totalVideoTask = state.totalVideoTask.sort((before, after) => {
             if(state.sortType === 'name')
                 return before.name > after.name ? 1: -1
@@ -379,6 +444,7 @@ const mutations = {
     },
     _setChosenGallery(state,data){
         if(data.gallery === false) {
+            //state.chosenGallery.shortName = getShortName(state.chosenGallery.name)
             state.chosenGallery.resolution = data.resolution
             state.chosenGallery.fileSize = "等待下载完成后再查看"
             state.chosenGallery.createTimeDisplay = "等待下载完成后再查看"
@@ -404,7 +470,7 @@ const mutations = {
     _setSortType(state, sortType){
         state.sortType = sortType
         switch (sortType) {
-            case "fullName":
+            case "name":
                 state.totalGalleryTask =  state.totalGalleryTask.sort((before, after) => {
                     return before.name > after.name ? 1: -1
                 })
@@ -456,13 +522,14 @@ const state = {
     chosenVideo:false,                      //准备下载的视频
 
     page:1,                                 //当前页数
-    length:4,                               //每页能有多少个链接
+    length:5,                               //每页能有多少个链接
     defaultLength:4,                        //默认个数
-    shortLength:6,                          //简洁个数
+    shortLength:5,                          //简洁个数
 
     isAuth:false,                           //是否授权
     AuthCode:'',                            //授权码
     loadComplete:false,                     //是否加载完成
+    refreshTimer:0,                         //更新计时器id
 
     isInclude:false,                        //是否搜索到任务
     searchTask:[],                          //搜索到的任务