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

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