新增简洁名字(仅限本子)，大幅度优化手机端体验，可选择显示全名以及简称，切换时每页的本子数会变化。排序新增简洁名字排序，并且与显示绑定。优化代码结构，去除部分无用代码。修复查找任务bug(同步更新)

src/components/DashBoard.vue

@@ -29,7 +29,7 @@
       <tr v-if="chosenGallery.availableResolution">
         目标分辨率:<el-select v-model="targetResolution">
           <el-option v-for="(fileSize, resolution) in chosenGallery.availableResolution" :value="resolution"
-                     :label="modify(resolution, fileSize)">
+                     :label="resolution + '  ' + fileSize">
           </el-option>
         </el-select>
       </tr>
@@ -81,12 +81,12 @@ import {ElMessage} from "element-plus"
 export default {
   name: "DashBoard",
   setup(){
-    const link = ref("")
+    let AuthCode = ref("")
-    const AuthCode = ref("")
+    let isRemember = ref(false)
-    const keyword = ref("")
+    let keyword = ref("")
-    const isRemember = ref(false)
+    let link = ref("")
-    const targetResolution = ref("")
+    let showTips = ref(false)
-    const showTips = ref(false)
+    let targetResolution = ref("")
 
     let chosenGallery = computed(() => {
       return store.state.chosenGallery
@@ -96,14 +96,14 @@ export default {
       return store.state.chosenVideo
     })
 
-    let maskDomain = computed(() => {
-      return store.state.maskDomain
-    })
-
     let loadComplete = computed(() => {
       return store.state.loadComplete
     })
 
+    let maskDomain = computed(() => {
+      return store.state.maskDomain
+    })
+
     let weekUsed = computed(() => {
       return store.state.weekUsed
     })
@@ -112,10 +112,6 @@ export default {
       store.dispatch("loadWeekUsedAmount")
     }
 
-    function modify(str1, str2){
-      return str1 + "   " + str2
-    }
-
     function postTask(){
       if(!validateLink(link.value)){
         ElMessage("链接错误")
@@ -171,6 +167,29 @@ export default {
       }
     }
 
+    function validateLink(rawLink){
+      if(rawLink.trim() === "")
+        return false
+      if(rawLink.includes("hentai")){
+        return rawLink.includes("/g/")
+      }
+      else if(rawLink.includes("xvideos.com")){
+        return true
+      }
+      else if(rawLink.includes("pornhub.com")){
+        return rawLink.includes("view_video.php")
+      }
+    }
+
+    function coverLink(rawLink){
+      let url = new URL(rawLink)
+      maskDomain.value.forEach((mask) => {
+        if(url.host === mask['raw'])
+          rawLink = rawLink.replace(mask['raw'], mask['mask'])
+      })
+      return rawLink;
+    }
+
     function searchByLink() {
       if(link.value.trim() === ""){
         ElMessage("请输入链接后查找")
@@ -189,42 +208,14 @@ export default {
       store.dispatch("searchRemoteByKeyword", keyword.value)
     }
 
-    function coverLink(rawLink){
-      let url = new URL(rawLink)
-      maskDomain.value.forEach((mask) => {
-        if(url.host === mask['raw'])
-          rawLink = rawLink.replace(mask['raw'], mask['mask'])
-      })
-      return rawLink;
-    }
-
-    function validateLink(rawLink){
-      if(rawLink.trim() === "")
-        return false
-      if(rawLink.includes("hentai")){
-        return rawLink.includes("/g/")
-      }
-      else if(rawLink.includes("xvideos.com")){
-        return true
-      }
-      else if(rawLink.includes("pornhub.com")){
-        return rawLink.includes("view_video.php")
-      }
-    }
-
     function openPanel(){
       store.commit("_openHistoryPanel")
     }
 
-    function closePanel(){
-      store.commit("_closeHistoryPanel")
-    }
-
     function onlineGalleryReader(name){
       window.open("http://zfile.lionwebsite.xyz/1/gallery/" + encodeURI(name))
     }
 
-
     onMounted(() => {
       const auth = localStorage.getItem("auth")
       if(auth !== null){
@@ -232,7 +223,7 @@ export default {
       }
     })
 
-    return {postTask, queryTask, validate, searchByLink, searchLocalByKeyword, searchRemoteByKeyword, modify, openPanel, closePanel, onlineGalleryReader,
+    return {postTask, queryTask, validate, searchByLink, searchLocalByKeyword, searchRemoteByKeyword, openPanel, onlineGalleryReader,
             queryWeekUsedAmount, deleteVideo, deleteGallery,
             link, loadComplete, AuthCode, keyword, isRemember, chosenGallery, chosenVideo, targetResolution, weekUsed, showTips,
       store

src/components/Side.vue

@@ -1,27 +1,27 @@
 <template>
-  <el-drawer v-model="isOpenHistoryPanel" direction="ltr" size="150" @close="closeHistoryPanel" :title="showType === 'gallery' ? '本子' : '视频'">
+  <el-drawer v-model="isOpenHistoryPanel" direction="ltr" size="100%" @close="closeHistoryPanel" :title="showType === 'gallery' ? '本子' : '视频'">
     <div class="side">
       <div v-show="loadComplete" class="load_complete">
         <el-table :data="galleryTasks" v-show="isShowGalleryHistory">
 
           <el-table-column type="expand" width="25px">
             <template #default="props">
-<!--              名字:{{ props.row.name}} <br>-->
+              名字:{{ props.row.name}} <br>
               链接:<el-link :href="props.row.link">Link</el-link> <br>
               语言:{{props.row.language}} <br>
               页数:{{props.row.pages}} <br>
               文件大小:{{props.row.fileSize}}<br>
               分辨率:{{props.row.resolution}}<br>
               任务创建时间:{{props.row.createTimeDisplay}}<br>
-              <el-button @click="downloadTask(props.row.download)" :disabled="operational(props.row.download)">下载</el-button>
+              <el-button @click="downloadTask(props.row.download)" :disabled="props.row.download === undefined">下载</el-button>
-              <el-button @click="deleteGallery(props.row.gid)" :disabled="operational(props.row.download)">删除</el-button>
+              <el-button @click="deleteGallery(props.row.gid)" :disabled="props.row.download === undefined">删除</el-button>
-              <el-button @click="onlineGalleryReader(props.row.name)" :disabled="operational(props.row.download)">在线看</el-button>
+              <el-button @click="onlineGalleryReader(props.row.name)" :disabled="props.row.download === undefined">在线看</el-button>
             </template>
           </el-table-column>
 
           <el-table-column label="名字" width="255px">
             <template #default="scoped">
-              {{scoped.row.name}}
+              {{showNameType === 'shortName' ? scoped.row.shortName: scoped.row.name}}
             </template>
           </el-table-column>
 
@@ -35,16 +35,16 @@
         <el-table :data="videoTasks" v-show="isShowVideoHistory">
           <el-table-column type="expand">
             <template #default="props">
-<!--              名字:{{props.row.name}}     <br>-->
+              名字:{{props.row.name}}     <br>
               网站:{{props.row.website}}  <br>
               链接:<el-link :href="props.row.link">链接</el-link> <br>
               文件大小:{{props.row.fileSize}} <br>
               视频长度:{{props.row.duration}} <br>
               分辨率:{{props.row.resolution}} <br>
               任务创建时间:{{props.row.createTimeDisplay}}<br>
-              <el-button @click="downloadTask(props.row.download)" :disabled="operational(props.row.download)">下载</el-button>
+              <el-button @click="downloadTask(props.row.download)" :disabled="props.row.download === undefined">下载</el-button>
-              <el-button @click="deleteVideo(props.row.id)" :disabled="operational(props.row.download)">删除</el-button>
+              <el-button @click="deleteVideo(props.row.id)" :disabled="props.row.download === undefined">删除</el-button>
-              <el-button @click="onlineVideoViewer()" :disabled="operational(props.row.download)">在线看</el-button>
+              <el-button @click="onlineVideoViewer()" :disabled="props.row.download === undefined">在线看</el-button>
             </template>
           </el-table-column>
 
@@ -65,8 +65,15 @@
         <el-row class="pageChanger">
           <el-col>
             排列顺序:<el-select v-model="sortType" @change="changeSortType">
-            <el-option value="name" label="名字"></el-option>
+                      <el-option value="fullName" label="名字"></el-option>
-            <el-option value="time" 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="shortName" label="简洁名字"></el-option>
           </el-select>
           </el-col>
           <el-col>
@@ -75,10 +82,10 @@
             <el-input v-model="targetPage"
                       @change="changePage"
                       v-show="isEditing"
-                      @blur="reverse"
+                      @blur="reverseEditMode"
                       class="page"
                       ref="inputNode"></el-input>
-            <span @click="reverse" v-show="!isEditing" class="page">{{page}}</span>
+            <span @click="reverseEditMode" v-show="!isEditing" class="page">{{page}}</span>
             <el-button @click="next">+</el-button>
             <el-button @click="toMax">{{max}}</el-button>
             <el-button @click="changeShowType">切换</el-button>
@@ -95,13 +102,16 @@ import {computed, ref} from "vue";
 export default {
   name: "Side",
   setup(){
-
-    const targetPage = ref(1)
-    const isEditing = ref(false)
-
     let inputNode = ref(null)
-    let showType = ref("gallery")
+    let isEditing = ref(false)
-    let sortType = ref("name")
+    let showNameType = ref("shortName")   // shortName fullName
+    let showType = ref("gallery")     // gallery video
+    let sortType = ref("shortName")   // shortName fullName createTime
+    let targetPage = ref(1)
+
+    let loadComplete = computed(() => {
+      return store.state.loadComplete
+    })
 
     let galleryTasks = computed(() => {
       if(store.getters.galleryTasks)
@@ -144,10 +154,6 @@ export default {
       return store.state.page
     })
 
-    let loadComplete = computed(() => {
-      return store.state.loadComplete
-    })
-
     function next() {
       if(targetPage.value < max.value) {
         targetPage.value++
@@ -177,7 +183,37 @@ export default {
         store.commit("_changePage", targetPage.value)
     }
 
-    function reverse(){
+    function changeShowType(){
+      if(isShowVideoHistory.value){
+        store.commit("_setShowType", "gallery")
+        showType.value = "gallery"
+      }
+      else{
+        store.commit("_setShowType", "video")
+        showType.value = "video"
+      }
+    }
+
+    function changeShowNameType(){
+      store.commit("_setShowNameType", showNameType.value)
+
+      if(showNameType.value !== sortType.value){
+        store.commit("_setSortType", showNameType.value)
+        sortType.value = showNameType.value
+      }
+    }
+
+    function changeSortType(){
+      store.commit("_setSortType", sortType.value)
+
+
+      if(sortType.value !== showNameType.value && sortType.value !== "createTime") {
+        store.commit("_setShowNameType", sortType.value)
+        showNameType.value = sortType.value
+      }
+    }
+
+    function reverseEditMode(){
       isEditing.value = !isEditing.value
       if(isEditing){
         inputNode.value.focus()
@@ -209,30 +245,10 @@ export default {
       window.open("http://zfile.lionwebsite.xyz/1/video/")
     }
 
-    function changeShowType(){
-      if(isShowVideoHistory.value){
-        store.commit("_setShowType", "gallery")
-        showType.value = "gallery"
-      }
-      else{
-        store.commit("_setShowType", "video")
-        showType.value = "video"
-      }
-    }
-
-    function changeSortType(sortType){
-      store.commit("_setSortType", sortType)
-    }
-
-    function operational(download){
-      return download === undefined
-    }
-
-
     return {galleryTasks, videoTasks, min, max, targetPage, loadComplete, page, isEditing, inputNode, isShowVideoHistory,
-            isShowGalleryHistory, showType, sortType, isOpenHistoryPanel,
+            isShowGalleryHistory, showType, showNameType, sortType, isOpenHistoryPanel,
-            reverse, changePage, changeShowType, changeSortType, toMax, toMin, previous, next, downloadTask, deleteGallery,
+            reverseEditMode, changePage, changeShowType, changeShowNameType, changeSortType, toMax, toMin, previous, next, downloadTask, deleteGallery,
-            deleteVideo, onlineGalleryReader, onlineVideoViewer, operational, closeHistoryPanel,
+            deleteVideo, onlineGalleryReader, onlineVideoViewer, closeHistoryPanel,
             store
     }
   }
@@ -248,8 +264,7 @@ export default {
   }
   .pageChanger{
     position: absolute;
-    top:88vh;
+    top:85vh;
-    left: 30px;
   }
   .page{
     display: inline-block;

src/store/index.js

@@ -17,13 +17,8 @@ const actions = {
                 AuthCode
             }
         }).then((res) => {
-            let temp = []
             context.commit("_emptyGalleryTasks")
-            JSON.parse(res.data.data).forEach((task) => {
+            context.commit("_updateGalleryTasks", JSON.parse(res.data.data))
-                temp.push(task)
-            })
-            context.commit("_updateGalleryTasks", temp)
-
         })
     },
     updateVideoTasks(context){
@@ -35,12 +30,8 @@ const actions = {
                 AuthCode
             }
         }).then(res => {
-            let temp = []
             context.commit("_emptyVideoTasks")
-            JSON.parse(res.data.data).forEach(task => {
+            context.commit("_updateVideoTasks", JSON.parse(res.data.data))
-                temp.push(task)
-            })
-            context.commit("_updateVideoTasks", temp)
         })
     },
     postGalleryTask(context, data){
@@ -239,6 +230,23 @@ const mutations = {
     },
     _updateGalleryTasks(state, tasks){
         tasks.forEach((task) => {
+            let name = task.name
+            let lastIndex = name.lastIndexOf("[")
+            name = name.substring(0, lastIndex)
+            while(name.includes("[") && name.includes("]")){
+                let start = name.indexOf("[")
+                let end = name.indexOf("]") + 1
+                let temp = name.substring(start, end)
+                name = name.replace(temp, "")
+            }
+            while(name.includes("(") && name.includes(")")){
+                let start = name.indexOf("(")
+                let end = name.indexOf(")") + 1
+                let temp = name.substring(start, end)
+                name = name.replace(temp, "")
+            }
+            task.shortName = name.trim()
+
             if(task.status === "已提交"){
                 task.progress = "已提交"
             }
@@ -328,22 +336,27 @@ const mutations = {
         }
         else{
             ElMessage("已跳转到该任务所在页数")
+            state.isShowHistory = true
         }
     },
     _searchLocalByKeyword(state, keyword){
         state.searchTask.splice(0)
-        state.page = 1
+        if(keyword.trim() !== '') {
-        let tasks
+            state.page = 1
-        if(state.showType === "video")
+            let tasks
-            tasks = state.totalVideoTask
+            if (state.showType === "video")
-        else
+                tasks = state.totalVideoTask
-            tasks = state.totalGalleryTask
+            else
-        tasks.forEach((task) => {
+                tasks = state.totalGalleryTask
-            if(task.name.includes(keyword))
+            tasks.forEach((task) => {
-                state.searchTask.push(task)
+                if (task.name.includes(keyword))
-        })
+                    state.searchTask.push(task)
-        if(state.searchTask.length === 0){
+            })
-            ElMessage("未找到该关键字的任务")
+            if (state.searchTask.length === 0) {
+                ElMessage("未找到该关键字的任务")
+            } else {
+                state.isShowHistory = true
+            }
         }
     },
     _deleteGallery(state, gid){
@@ -385,18 +398,34 @@ const mutations = {
     },
     _setSortType(state, sortType){
         state.sortType = sortType
-        state.totalGalleryTask =  state.totalGalleryTask.sort((before, after) => {
+        switch (sortType) {
-            if(sortType === 'name')
+            case "fullName":
-                return before.name > after.name ? 1: -1
+                state.totalGalleryTask =  state.totalGalleryTask.sort((before, after) => {
-            else
+                    return before.name > after.name ? 1: -1
-                return before.createTime - after.createTime
+                })
-        })
+                state.totalVideoTask = state.totalVideoTask.sort((before, after) => {
-        state.totalVideoTask = state.totalVideoTask.sort((before, after) => {
+                    return before.name > after.name ? 1: -1
-            if(sortType === 'name')
+                })
-                return before.name > after.name ? 1: -1
+                break
-            else
+            case "shortName":
-                return before.createTime - after.createTime
+                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
+                })
+                state.totalVideoTask = state.totalVideoTask.sort((before, after) => {
+                    return before.createTime - after.createTime
+                })
+        }
+    },
+    _setShowNameType(state, type){
+        if(type === "shortName")
+            state.length = state.shortLength
+        else
+            state.length = state.defaultLength
     },
     _setMaskDomain(state, maskDomain){
         state.maskDomain = maskDomain
@@ -417,7 +446,9 @@ const state = {
     chosenVideo:false,                      //准备下载的视频
 
     page:1,                                 //当前页数
-    length:5,                               //每页能有多少个链接
+    length:6,                               //每页能有多少个链接
+    defaultLength:4,                        //默认个数
+    shortLength:6,                          //简洁个数
 
     isAuth:false,                           //是否授权
     AuthCode:'',                            //授权码
@@ -428,9 +459,9 @@ const state = {
     isShowHistory:false,                    //是否打开面板
     showType:"gallery",                     //展示类型
     sortType:"name",                        //排序类型
-    weekUsed:{},
+    weekUsed:{},                            //每周用量
 
-    maskDomain:[]
+    maskDomain:[]                           //伪装域名
 }
 
 const getters = {