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

src/components/DashBoard.vue

@@ -16,6 +16,8 @@
     <el-button @click="searchLocalByKeyword">查找当前页任务</el-button>
     <br>
     <hr>
+    <el-button @click="isAlterAuthCode = true">修改授权码</el-button>
+    <hr>
     <div v-show="thumbnailGallery !== {}">
       <span>
         {{thumbnailGallery.shortName}}
@@ -65,6 +67,30 @@
     <el-button @click="deleteVideo" v-if="chosenVideo.resolution">删除</el-button>
   </el-dialog>
 
+  <el-dialog title="修改授权码" v-model="isAlterAuthCode">
+    <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" placeholder="请输入授权码" style="padding-top: 200px"/> <br>
       <el-checkbox v-model="isRemember">是否记住授权码</el-checkbox>
@@ -81,10 +107,17 @@ 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 targetResolution = ref("")
 
+    let realAuthCode = computed(() => {
+      return store.state.AuthCode
+    })
+
     let chosenGallery = computed(() => {
       return store.state.chosenGallery
     })
@@ -109,6 +142,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")
     }
@@ -222,13 +266,14 @@ export default {
       const auth = localStorage.getItem("auth")
       if(auth !== null){
         store.dispatch("validate", auth)
+        AuthCode.value = localStorage.getItem("auth")
       }
     })
 
     return {postTask, queryTask, validate, searchByLink, searchLocalByKeyword, searchRemoteByKeyword,
-            queryWeekUsedAmount, deleteVideo, deleteGallery, onlineGalleryReader, showThumbnailGallery,
+            queryWeekUsedAmount, deleteVideo, deleteGallery, onlineGalleryReader, showThumbnailGallery, alterAuthCode,
-            link, loadComplete, AuthCode, keyword, isRemember, chosenGallery, chosenVideo, targetResolution, weekUsed,
+            link, loadComplete, AuthCode, realAuthCode, keyword, isRemember, chosenGallery, chosenVideo, targetResolution, weekUsed,
-             thumbnailGallery,
+             thumbnailGallery, isAlterAuthCode, newAuthCode, tempAuthCode,
       store
     }
   }

src/components/Side.vue

@@ -79,12 +79,12 @@
       <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-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>
@@ -118,9 +118,9 @@ export default {
   setup(){
     let inputNode = ref(null)
     let isEditing = ref(false)
-    let showNameType = ref("shortName")   // shortName fullName
+    let showNameType = ref("shortName")   // shortName name
     let showType = ref("gallery")     // gallery video
-    let sortType = ref("shortName")   // shortName fullName createTime
+    let sortType = ref("shortName")   // shortName name createTime
     let targetPage = ref(1)
 
     let loadComplete = computed(() => {

src/store/index.js

@@ -8,101 +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})
-            }
-            else{
-                if(res.data.data)
-                    ElMessage(res.data.data)
-                else{
-                    ElMessage("提交失败")
-                }
-            }
-        })
-    },
-    postVideoTask(context, data){
-        axios.post(VideoManageUrl, qs.stringify({
-            AuthCode:context.state.AuthCode,
             link: data.link,
             targetResolution: data.targetResolution
         })).then((res) => {
             if(res.data.result === "success") {
                 ElMessage("提交成功")
-                context.commit("_setChosenVideo", {video:false, resolution:data.targetResolution})
+                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: 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
+                    ElMessage("提交失败")
             }
         })
     },
     queryGalleryTask(context, link){
-        const AuthCode = context.state.AuthCode
         axios.get(GalleryManageUrl, {
             params:{
-                param:link,
+                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",
+                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("查询失败")
         })
@@ -110,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){
@@ -199,9 +196,8 @@ const actions = {
                 ElMessage("删除成功")
                 context.commit("_deleteGallery", gid)
             }
-            else{
+            else
                 ElMessage(res.data.data)
-            }
         })
     },
     deleteVideo(context, id){
@@ -219,19 +215,29 @@ const actions = {
                 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)
+                    context.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("[")) {
+                if (task.name.includes("[")) {
                     let name = task.name
                     let lastIndex = name.lastIndexOf("[")
                     name = name.substring(0, lastIndex)
@@ -248,51 +254,91 @@ 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() + "%"
+                        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'])
+                            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 === "下载完成"){
+                if (task.status === "下载完成") {
                     let tempLink
                     let url = new URL(task.link)
 
                     state.maskDomain.forEach((mask) => {
-                    if(url.host === mask['raw'])
+                        if (url.host === mask['raw'])
                             tempLink = task.link.replace(mask['raw'], mask['mask'])
                     })
                     task.download = VideoManageUrl + "file/" + encodeURI(task.name) + "?link=" + tempLink + "&AuthCode=" + state.AuthCode
@@ -300,6 +346,25 @@ const mutations = {
                 }
                 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
@@ -377,6 +442,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 = "等待下载完成后再查看"
@@ -402,7 +468,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
                 })
@@ -455,12 +521,13 @@ const state = {
     isAuth:false,                           //是否授权
     AuthCode:'',                            //授权码
     loadComplete:false,                     //是否加载完成
+    refreshTimer:0,                         //更新计时器id
 
     isInclude:false,                        //是否搜索到任务
     searchTask:[],                          //搜索到的任务
     showHistory:'',                         //是否打开面板
     showType:'gallery',                     //展示类型
-    sortType:'name',                        //排序类型
+    sortType:'shortName',                    //排序类型
     weekUsed:{},                            //每周用量
 
     maskDomain:[]                           //伪装域名