加入在线看的跳转按钮，精简代码

src/App.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="app">
     <el-container>
-      <el-aside width="590px">
+      <el-aside width="700px">
         <Side/>
       </el-aside>
       <el-main>

src/components/DashBoard.vue

@@ -1,61 +1,39 @@
 <template>
   <div class="DashBoard" v-show="loadComplete">
-    <el-row>
+    <el-input v-model="link" placeholder="输入链接"/>
-      <el-col :span="24"> </el-col>
-    </el-row>
-    <el-row>
-      <el-col :span="8"></el-col>
-      <el-col :span="8">
-      <el-input v-model="link" placeholder="输入链接"></el-input>
-      </el-col>
-      <el-col :span="8"></el-col>
-    </el-row>
     <br>
-    <el-row>
+    <el-button @click="query">查询本子</el-button>
-      <el-col :span="8"></el-col>
-      <el-col :span="12">
-        <el-button @click="post">提交下载</el-button>
-        <el-button @click="query">查询任务</el-button>
     <el-button @click="searchByLink">查找任务</el-button>
-      </el-col>
-      <el-col :span="4"></el-col>
-    </el-row>
     <br>
     <hr>
     <br>
-    <el-row>
+    <el-input v-model="keyword" placeholder="输入关键字查找任务" @change="searchByKeyword"/>
-      <el-col :span="8"></el-col>
-      <el-col :span="8">
-        <el-input v-model="keyword" placeholder="输入关键字" @change="searchByKeyword">
-          <template #prefix>
-            输入关键字查找：
-          </template>
-        </el-input>
-      </el-col>
-      <el-col :span="8"></el-col>
-    </el-row>
     <br>
-    <el-row>
-      <el-col :span="11"></el-col>
-      <el-col :span="7">
     <el-button>确定</el-button>
-      </el-col>
-      <el-col :span="6"></el-col>
-    </el-row>
   </div>
 
+  <el-dialog title="查询本子" v-model="preDownloadGallery">
+    <table>
+      <tr>本子名字:{{preDownloadGallery.name}}</tr>
+      <tr>本子页数:{{preDownloadGallery.pages}}</tr>
+      <tr>本子语言:{{preDownloadGallery.language}}</tr>
+      <tr>本子大小:{{preDownloadGallery.fileSize}}</tr>
+      <tr>本子状态:{{preDownloadGallery.status}}</tr>
+      <tr v-if="preDownloadGallery.availableResolution">
+        目标分辨率:<el-select v-model="targetResolution">
+          <el-option v-for="(fileSize, resolution) in preDownloadGallery.availableResolution" :value="resolution"
+                     :label="modify(resolution, fileSize)">
+          </el-option>
+        </el-select>
+      </tr>
+    </table>
+    <el-button @click="post" v-if="preDownloadGallery.availableResolution">下载</el-button>
+  </el-dialog>
+
   <div class="DashBoard" v-show="!loadComplete">
-    <el-col :span="15">
+      <el-input v-model="AuthCode" placeholder="请输入授权码" style="padding-top: 200px"/> <br>
-      <el-input v-model="AuthCode" class="validate">
+      <el-checkbox v-model="isRemember">是否记住授权码</el-checkbox>
-        <template #prefix>
+      <el-button @click="validate" type="primary" @keydown.enter="validate" style="margin-left: 50px">验证</el-button>
-          请输入授权码：
-        </template>
-      </el-input>
-      <el-checkbox v-model="isRemember" style="margin-left: 180px">是否记住授权码</el-checkbox>
-      <el-button @click="validate" type="primary" @keydown.enter="validate" style="margin-left: 100px">验证</el-button>
-
-    </el-col>
-
   </div>
 </template>
 
@@ -70,23 +48,35 @@ export default {
     const AuthCode = ref("")
     const keyword = ref("")
     const isRemember = ref(false)
+    const targetResolution = ref("")
     let timer
 
+    let preDownloadGallery = computed(() => {
+      return store.getters.preDownloadGallery
+    })
+
     const loadComplete = computed(() => {
       return store.getters.loadComplete
     })
 
+    function modify(str1, str2){
+      return str1 + "   " + str2
+    }
+
     function post(){
       if(link.value.trim() === ''){
         ElMessage("请输入链接后再提交")
       }
+      if(targetResolution.value === ''){
+        ElMessage("请选择分辨率再提交")
+      }
       else {
         let gid = link.value.split('/')[4]
         if (!gid || !link.value.includes("hentai")) {
           ElMessage("请检查链接输入是否正确")
         }
         else
-          store.dispatch("post", link.value)
+          store.dispatch("post", {link: link.value, targetResolution: targetResolution.value})
       }
     }
 
@@ -104,6 +94,7 @@ export default {
       }
       else{
         store.dispatch("validate", AuthCode.value)
+        if(isRemember.value)
           localStorage.setItem("auth", AuthCode.value)
       }
     }
@@ -132,7 +123,21 @@ export default {
       }
     })
 
-    return {post, query,  validate, searchByLink, searchByKeyword, link, loadComplete, AuthCode,  keyword, isRemember, store}
+    return {post,
+            query,
+            validate,
+            searchByLink,
+            searchByKeyword,
+            modify,
+            link,
+            loadComplete,
+            AuthCode,
+            keyword,
+            isRemember,
+            preDownloadGallery,
+            targetResolution,
+            store
+    }
   }
 }
 </script>
@@ -142,13 +147,10 @@ export default {
     width: auto;
     height: 90vh;
     background-color: ghostwhite;
+    text-align: center;
   }
 
-  .validate{
+  .el-input{
-    width: auto;
+    width: 300px;
-    background-color: ghostwhite;
-    display: block;
-    margin-left: 180px;
-    margin-top: 200px;
   }
 </style>

src/components/Side.vue

@@ -3,34 +3,41 @@
     <span>下载历史</span>
     <div  v-show="loadComplete" class="load_complete" >
       <el-table :data="data">
+
         <el-table-column type="expand">
           <template #default="props">
             名字:{{ 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}}
+            文件大小:{{props.row.fileSize}}<br>
+            分辨率:{{props.row.resolution}}
           </template>
         </el-table-column>
+
         <el-table-column label="名字" width="300">
           <template #default="scoped">
             {{scoped.row.name}}
           </template>
         </el-table-column>
-        <el-table-column label="操作" width="180">
+
+        <el-table-column label="操作" width="250">
           <template #default="scoped">
             <span v-show="scoped.row.download">
               <el-button @click="downloadGallery(scoped.row.download)">下载</el-button>
               <el-button @click="deleteGallery(scoped.row.gid)">删除</el-button>
+              <el-button @click="onlineReader(scoped.row.name)">在线看</el-button>
             </span>
           </template>
         </el-table-column>
+
         <el-table-column label="进度" width="60">
           <template #default="scoped">
             {{ scoped.row.progress }}
           </template>
         </el-table-column>
       </el-table>
+
       <el-row class="pageChanger">
         <el-col>
           <el-button @click="toMin">{{min}}</el-button>
@@ -114,9 +121,6 @@ export default {
       return store.getters.loadComplete
     })
 
-    function update(){
-      store.dispatch("update")
-    }
 
     function changePage(){
       if(targetPage.value >= min.value && targetPage.value <= max.value)
@@ -139,9 +143,12 @@ export default {
       store.dispatch("deleteGallery", gid)
     }
 
+    function onlineReader(name){
+      window.open("http://100.42.234.138:8080/1/gallery/" + encodeURI(name))
+    }
 
-    return {update,
+
-            data,
+    return {data,
             min,
             max,
             targetPage,
@@ -157,6 +164,7 @@ export default {
             next,
             downloadGallery,
             deleteGallery,
+            onlineReader,
             store
     }
   }

src/store/index.js

@@ -2,12 +2,12 @@ import vuex from "vuex"
 import axios from "axios"
 import {ElMessage} from "element-plus"
 import qs from "qs"
-
+const BaseUrl = "http://100.42.234.138:8888/"
-const base_url = "http://107.189.14.196:8080/TaskHandler/"
+const GalleryTaskHandlerUrl = BaseUrl + "GalleryTaskHandler/"
 const actions = {
     update(context){
         const AuthCode = context.state.AuthCode
-        axios.get(base_url, {
+        axios.get(GalleryTaskHandlerUrl, {
             params:{
                 param:"",
                 type:"all",
@@ -17,20 +17,23 @@ const actions = {
             let temp = []
             context.commit("_empty")
             JSON.parse(res.data.data).forEach((task) => {
-                temp.push(JSON.parse(task))
+                temp.push(task)
             })
             context.commit("_update", temp)
 
         })
     },
-    post(context, link){
+    post(context, data){
         const AuthCode = context.state.AuthCode
-        axios.post(base_url, qs.stringify({
+        axios.post(GalleryTaskHandlerUrl, qs.stringify({
             AuthCode:AuthCode,
-                link:link
+            link:data.link,
+            targetResolution:data.targetResolution
         })).then((res) => {
-            if(res.data.result === "success")
+            if(res.data.result === "success") {
                 ElMessage("提交成功")
+                context.commit("_setPreDownloadGallery", false)
+            }
             else{
                 if(res.data.data)
                     ElMessage(res.data.data)
@@ -42,7 +45,7 @@ const actions = {
     },
     query(context, link){
         const AuthCode = context.state.AuthCode
-        axios.get(base_url, {
+        axios.get(GalleryTaskHandlerUrl, {
             params:{
                 param:link,
                 type:'link',
@@ -51,46 +54,19 @@ const actions = {
         }).then((res) => {
             if(res.data.result === 'success'){
                 const gallery = JSON.parse(res.data.data)
-                let message = "本子名字: " + gallery.name + "<br>"
+                context.commit("_setPreDownloadGallery", gallery)
-                    message += "本子页数: " + gallery.pages + "<br>"
-                    message += "gid: " + gallery.gid + "<br>"
-                if(gallery.language === "N/A")
-                    message += "语言: 未知<br>"
-                else
-                    message += "语言: " + gallery.language + "<br>"
-                    message += "大小: " + gallery.fileSize + "<br>"
-                    switch (gallery.status){
-                        case "complete":
-                            message += "状态: 下载完成"
-                            break
-                        case "posted" :
-                            message += "状态: 等待中"
-                            break
-                        case "proceeding":
-                            message += "状态: 下载中"
-                            break
-                        default:
-                            break
-                    }
-                console.log(gallery)
-                ElMessage({
-                    dangerouslyUseHTMLString: true,
-                    duration: 5000,
-                    showClose: true,
-                    message
-                })
             }
             else
                 ElMessage("查询失败")
         })
     },
     validate(context, AuthCode){
-        axios.post(base_url + "validate?AuthCode=" + AuthCode).then((res)=>{
+        axios.post(BaseUrl + "validate?AuthCode=" + AuthCode).then((res)=>{
             if(res.data.result === 'success'){
                 context.commit("_authed", AuthCode, context)
-                context.dispatch("update")
+                context.dispatch("update").then()
                 setInterval(() => {
-                    context.dispatch("update")
+                    context.dispatch("update").then()
                 }, 30000)
             }
             else{
@@ -105,7 +81,7 @@ const actions = {
         context.commit("_searchByKeyword", keyword)
     },
     deleteGallery(context, gid){
-        axios.delete(base_url, {params:{AuthCode:state.AuthCode, gid:gid}}).then((res) => {
+        axios.delete(GalleryTaskHandlerUrl, {params:{AuthCode:state.AuthCode, gid:gid}}).then((res) => {
             if(res.data.result === "success"){
                 ElMessage("删除成功")
                 context.commit("_deleteGallery", gid)
@@ -122,7 +98,7 @@ const mutations = {
         state.totalTask.splice(0)
     },
     _update(state, tasks){
-        const download_url = base_url + "file?link="
+        const download_url = GalleryTaskHandlerUrl + "file?link="
 
         tasks.forEach((task) => {
             if(task.status === "posted"){
@@ -154,6 +130,7 @@ const mutations = {
         state.isAuth = false
         state.AuthCode = ""
         ElMessage("授权码错误")
+        localStorage.removeItem("auth")
     },
     _searchByLink(state, link){
         let gid = link.split('/')[4]
@@ -185,14 +162,20 @@ const mutations = {
         }
     },
     _deleteGallery(state, gid){
-        state.totalTask.map((currentValue, index, arr) => {
+        state.totalTask.forEach((item, index, arr) => {
-            return currentValue.gid === gid ? null: currentValue
+            if(item.gid === gid){
-        })
+                arr.splice(index, 1)
-        if(state.searchTask.length !== 1){
-            state.searchTask.map(currentValue => {
-                return  currentValue.gid === gid ? null : currentValue
-            })
             }
+        })
+    },
+    _setPreDownloadGallery(state,gallery){
+        state.preDownloadGallery = gallery
+    },
+    _openHistoryPanel(state){
+        state.showHistory = true
+    },
+    _closeHistoryPanel(state){
+        state.showHistory = false
     }
 }
 
@@ -204,7 +187,9 @@ const state = {
     AuthCode:'',                    //授权码
     loadComplete:false,             //是否加载完成
     isInclude:false,                //是否搜索到任务
-    searchTask:[]           //搜索到的任务
+    searchTask:[],                  //搜索到的任务
+    preDownloadGallery:false,       //准备下载的本子
+    showHistory:false
 }
 
 const getters = {
@@ -243,6 +228,12 @@ const getters = {
     },
     loadComplete(state){
         return state.loadComplete
+    },
+    preDownloadGallery(state){
+        return state.preDownloadGallery
+    },
+    showHistory(state){
+        return state.showHistory
     }
 }