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

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,7 +133,9 @@
     </div>
   </el-dialog>
 
-  <el-dialog title="配置夜间模式" v-model="isConfigDarkMode">
+  <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>
@@ -142,8 +144,14 @@
         <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")
@@ -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>

src/components/OnlineReader.vue

@@ -0,0 +1,78 @@
+<script setup>
+import {computed, ref, watch} from "vue";
+import store from "../store/index.js";
+let props = defineProps(['currentLinks', 'isOnlineReading'])
+let isShowUp = ref()
+let onlineReadingScrollbar = ref()
+let links = ref()
+let index = ref(0)
+let temp_index = ref(0)   //用于跳转
+let max = ref(0)
+let lengthPerPage = computed(() => {
+  return store.state.lengthPerPage
+})
+
+watch(props, (props)=>{
+  isShowUp.value = props.isOnlineReading
+  alterPage()
+})
+
+//切换本子
+function alterPage(){
+  console.log(lengthPerPage.value, props.currentLinks.length)
+  if(props.currentLinks.length > lengthPerPage.value){
+    links.value = props.currentLinks.slice(0, lengthPerPage.value)
+    max.value = Math.ceil(props.currentLinks.length / lengthPerPage.value)
+  }else{
+    links.value = props.currentLinks
+  }
+  index.value = 0
+  temp_index.value = 1
+}
+
+//跳转到对应页数
+function jump(targetIndex){
+  links.value = props.currentLinks.slice(targetIndex * lengthPerPage.value, (targetIndex + 1) * lengthPerPage.value)
+  index.value = targetIndex
+  temp_index.value = targetIndex + 1
+}
+
+function closeDialog(){
+  onlineReadingScrollbar.value.setScrollTop(0)
+}
+</script>
+
+<template>
+  <el-dialog title="在线预览" v-model="isShowUp" width="90%" style="margin-top: 0; margin-bottom: 0; padding: 0" @close="closeDialog">
+    <div style="font-size: 20px; text-align: center; "  v-if="max > 0">
+      {{index + 1}} - {{(index) * lengthPerPage + 1}} ~ {{(index + 1) * lengthPerPage + 1 > currentLinks.length? currentLinks.length: (index + 1) * lengthPerPage + 1}}
+    </div>
+    <el-scrollbar height="75vh" ref="onlineReadingScrollbar">
+      <el-image v-for="(link, i) in links" :src="link" :style="{'width': store.state.imageWidth, 'padding-right': store.state.imagePadding, 'background-color': 'ghostwhite'}"
+                :preview-src-list="currentLinks" :initial-index="index * lengthPerPage + i" loading="lazy"/>
+    </el-scrollbar>
+
+<!--    十页以下-->
+    <span v-if="max > 1 && max < 9">
+      <el-button @click="jump(index - 1)" :disabled="index === 0">上一页</el-button>
+      <el-button v-for="i in max" @click="jump(i - 1)">
+      {{i}}
+      </el-button>
+      <el-button @click="jump(index + 1)" :disabled="index === max - 1">下一页</el-button>
+    </span>
+
+<!--    十页及以上-->
+    <span v-if="max >= 9">
+      <el-button @click="jump(index - 1)" :disabled="index === 0">上一页</el-button>
+      1 &lt;
+      <el-input-number v-model="temp_index" :min="1" :max="max"/>
+      &lt; {{max}}
+      <el-button @click="jump(index + 1)" :disabled="index === max - 1">下一页</el-button><br>
+      <el-button @click="jump(temp_index - 1)" >跳转</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<style scoped>
+
+</style>

src/components/Side.vue

@@ -111,12 +111,7 @@
       </el-form>
     </el-dialog>
 
-    <el-dialog v-model="isOnlineReading" title="在线预览" @close="closeOnlineReading" width="90%" style="margin-top: 0; margin-bottom: 0; padding: 0">
-      <el-scrollbar height="84vh" ref="onlineReadingScrollbar">
-        <el-image v-for="(link, index) in currentLinks" :src="link" :style="{'width': imageWidth, 'padding-right': imagePadding, 'background-color': 'ghostwhite'}"
-                  :preview-src-list="currentLinks" :initial-index="index" loading="lazy"/>
-      </el-scrollbar>
-    </el-dialog>
+    <OnlineReader :currentLinks="currentLinks" :isOnlineReading="isOnlineReading"/>
 
     <span v-show="!loadComplete" class="side">请输入授权码后再查看</span>
   </div>
@@ -127,6 +122,7 @@ import store from "../store";
 import {computed, ref} from "vue";
 import axios from "axios";
 import {ElMessage} from "element-plus";
+import OnlineReader from "./OnlineReader.vue";
 
 //输入
 let inputNode = ref(null)
@@ -316,10 +312,6 @@ function deleteGallery(gid){
 function onlineGalleryReader(gid){
   store.dispatch("queryOnlineLinks", gid)
 }
-function closeOnlineReading(){
-  store.state.isOnlineReading = false
-  onlineReadingScrollbar.value.setScrollTop(0)
-}
 function shareGallery(data){
   const {gid, shortName} = data
   let link

src/store/index.js

@@ -118,18 +118,19 @@ const actions = {
                 context.dispatch("updateGalleryTasks", "all").then(() => confirmCurrentTask(context.state))
 
                 //获取图片合适长度
-                let screenWidth = window.screen.width * 0.9 - 40
-                let width
-                let i
-                for(i=3; i>0; i--)
-                    if(screenWidth / i <= 350 || screenWidth / i >= 100){
-                        width = screenWidth / i
-                        break
-                    }
-
-                width = width - (width % 10)
-                state.imageWidth = width + 'px'
-                state.imagePadding = ((screenWidth - i * width) / i) + 'px'
+                // let screenWidth = window.screen.width * 0.9 - 40
+                // let width
+                // let i
+                // for(i=3; i>0; i--)
+                //     if(screenWidth / i <= 350 || screenWidth / i >= 100){
+                //         width = screenWidth / i
+                //         break
+                //     }
+                //
+                // width = width - (width % 10)
+                //写死图片合适宽度
+                state.imageWidth = 550 + 'px'
+                state.imagePadding = 10 + 'px'
             }
             else
                 context.commit("_unAuthed")
@@ -615,6 +616,7 @@ const state = {
     currentLinks: [],                        //当前本子链接
     imageWidth: "",                          //图片宽度
     imagePadding: "",                        //图片padding
+    lengthPerPage: 0,                        //在线预览每页图片数量
 
     page: 1,                                 //当前页数
     length: 10,                              //每页能有多少个链接