新增预览分页，可以设置每页有多少张图片；将预览抽取为单独一个组件；（同步更新）

src/components/DashBoard.vue

@@ -32,7 +32,7 @@
     <hr>
     <el-button @click="isAlterAuthCode = true">修改授权码</el-button>
     <el-button @click="deleteAuthCode">删除本地授权码</el-button>
-    <el-button @click="isConfigDarkMode = true">夜间模式配置</el-button>
+    <el-button @click="isConfig = true">配置</el-button>
     <span style="display: inline">夜间模式</span>
     <el-switch @click="toggleStyle" v-model="isDark">夜间模式</el-switch>
     <hr>
@@ -133,17 +133,25 @@
     </div>
   </el-dialog>
 
-  <el-dialog title="配置夜间模式" v-model="isConfigDarkMode">
-    <span style="display: inline-block">夜间模式跟随系统</span>
-    <el-switch v-model="darkConfig.followSystem"></el-switch><br>
-    <span style="display: inline-block">自定义起始时间(精确到分)</span>
-    <el-switch v-model="darkConfig.customTime"></el-switch><br>
-    <el-form :disabled="!darkConfig.customTime">
-      <el-time-picker v-model="darkConfig.startTime" /> ~
-      <el-time-picker v-model="darkConfig.endTime"/>
-    </el-form>
+  <el-dialog title="配置" v-model="isConfig">
+    <div>
+      夜间模式<hr>
+      <span style="display: inline-block">夜间模式跟随系统</span>
+      <el-switch v-model="darkConfig.followSystem"></el-switch><br>
+      <span style="display: inline-block">自定义起始时间(精确到分)</span>
+      <el-switch v-model="darkConfig.customTime"></el-switch><br>
+      <el-form :disabled="!darkConfig.customTime">
+        <el-time-picker v-model="darkConfig.startTime" /> ~
+        <el-time-picker v-model="darkConfig.endTime"/>
+      </el-form>
+    </div>
+    <div>
+      在线预览<hr>
+      <span style="display: inline-block">在线预览分页页数:</span>
+      <input v-model="lengthPerPage">
+    </div>
     <template #footer>
-      <el-button type="primary" @click="saveDarkConfig">保存</el-button>
+      <el-button type="primary" @click="saveConfig">保存</el-button>
     </template>
   </el-dialog>
 
@@ -197,12 +205,13 @@ let tempAuthCode = ref("")
 
 let isQuerying = ref(false)
 let isViewingTag = ref(false)
-let isConfigDarkMode = ref(false)
+let isConfig = ref(false)
 let isDark = ref(false)
 let keyword = ref("")
 let galleries = ref([])
 let queryPage = ref({})
 let darkConfig = ref({})
+let lengthPerPage = ref(0)
 
 //查询相关
 let type = ref("link")
@@ -401,12 +410,12 @@ function resetLocalQuery(){
   store.commit("_searchLocalByKeyword", "")
   param.value = ""
 }
-function queryGalleries(link){
+function queryGalleries(link) {
   let tempParam
-  if(link !== null) {
+  if (link !== null) {
     let url = new URL(link)
     tempParam = url.search.replace("?f_search=", "")
-  }else{
+  } else {
     tempParam = keyword.value
   }
   tempParam = tempParam.replace(" ", "+")
@@ -426,7 +435,7 @@ function queryGalleries(link){
           tempGalleries.forEach((gallery) => {
             galleries.value.push(gallery)
           })
-        }else {
+        } else {
           ElMessage({message: res.data.data, type: "error"})
         }
       })
@@ -484,6 +493,9 @@ function toggleStyle(){
 onMounted(() => {
   const auth = localStorage.getItem("auth")
   adjustForStyle()
+  store.state.lengthPerPage = localStorage.getItem("lengthPerPage")
+  store.state.lengthPerPage = store.state.lengthPerPage === null ? 30: Number(store.state.lengthPerPage)
+  lengthPerPage.value = store.state.lengthPerPage
 
   if(auth !== null){
     store.dispatch("validate", auth)
@@ -566,7 +578,7 @@ function light(){
   document.querySelector(".DashBoard").style.setProperty("background-color", "ghostwhite")
   document.querySelector(".app").style.setProperty("background-color", "#c6e2ff")
 }
-function saveDarkConfig(){
+function saveConfig(){
   if(darkConfig.value.customTime) {
     if(darkConfig.value.startTime === undefined || darkConfig.value.endTime === undefined){
       ElMessage("请正确选择起始时间")
@@ -574,8 +586,10 @@ function saveDarkConfig(){
     }
   }
 
+  store.state.lengthPerPage = Number(lengthPerPage.value)
+  localStorage.setItem("lengthPerPage", lengthPerPage.value)
   localStorage.setItem("darkConfig", JSON.stringify(darkConfig.value))
-  isConfigDarkMode.value = false
+  isConfig.value = false
   adjustForStyle()
 }
 </script>