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

src/components/DashBoard.vue

@@ -1,61 +1,39 @@
 <template>
   <div class="DashBoard" v-show="loadComplete">
-    <el-row>
-      <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>
+    <el-input v-model="link" placeholder="输入链接"/>
     <br>
-    <el-row>
-      <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>
+    <el-button @click="query">查询本子</el-button>
+    <el-button @click="searchByLink">查找任务</el-button>
     <br>
     <hr>
     <br>
-    <el-row>
-      <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>
+    <el-input v-model="keyword" placeholder="输入关键字查找任务" @change="searchByKeyword"/>
     <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>
+    <el-button>确定</el-button>
   </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" class="validate">
-        <template #prefix>
-          请输入授权码：
-        </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>
-
+      <el-input v-model="AuthCode" placeholder="请输入授权码" style="padding-top: 200px"/> <br>
+      <el-checkbox v-model="isRemember">是否记住授权码</el-checkbox>
+      <el-button @click="validate" type="primary" @keydown.enter="validate" style="margin-left: 50px">验证</el-button>
   </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,7 +94,8 @@ export default {
       }
       else{
         store.dispatch("validate", AuthCode.value)
-        localStorage.setItem("auth", 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{
-    width: auto;
-    background-color: ghostwhite;
-    display: block;
-    margin-left: 180px;
-    margin-top: 200px;
+  .el-input{
+    width: 300px;
   }
 </style>