新增预览分页，可以设置每页有多少张图片；将预览抽取为单独一个组件；（同步更新）向index.html添加meta使得可以添加到ios主页

2023-06-29 14:17:55 +08:00 · 2023-06-29 14:17:55 +08:00 · 7cfeaf618c
commit 7cfeaf618c
parent 76b4179ace
5 changed files with 112 additions and 24 deletions
--- a/index.html
+++ b/index.html
@ -5,6 +5,7 @@
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
    <title>Vite + Vue</title>
+  <meta name="apple-mobile-web-app-capable" content="yes">
  </head>
  <body>
    <div id="app"></div>
--- a/src/components/DashBoard.vue
+++ b/src/components/DashBoard.vue
@ -33,7 +33,7 @@
    <el-button @click="isQuerying = true">里站搜索</el-button>
    <el-button @click="isAlterAuthCode = true">修改授权码</el-button>
    <el-button @click="deleteAuthCode">删除本地授权码</el-button>
-    <el-button @click="isConfigDarkMode = true">夜间模式配置</el-button><br>
+    <el-button @click="isConfig = true">配置</el-button><br>
    <span style="display: inline">夜间模式</span>
    <el-switch @click="toggleStyle" v-model="isDark">夜间模式</el-switch>
    <hr>
@ -135,17 +135,25 @@
    </el-footer>
  </el-dialog>

-  <el-dialog title="配置夜间模式" v-model="isConfigDarkMode" width="100%">
-    <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" width="100%">
+    <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>

@ -200,12 +208,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("furry yaoi")
 let galleries = ref([])
 let queryPage = ref({})
 let darkConfig = ref({})
+let lengthPerPage = ref(0)

 //查询相关
 let type = ref("link")
@ -496,6 +505,10 @@ function showThumbnail(gallery){
 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)
  }
@ -576,7 +589,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("请正确选择起始时间")
@ -584,8 +597,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>
--- a/src/components/OnlineReader.vue
+++ b/src/components/OnlineReader.vue
@ -0,0 +1,79 @@
+<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)
+  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 v-model="isShowUp" title="在线预览" @close="closeDialog" width="100%" top="0">
+    <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': 'auto', 'text-align': 'center', 'background-color': 'ghostwhite'}"
+                :preview-src-list="currentLinks" :initial-index="index * lengthPerPage + i" loading="lazy"/>
+    </el-scrollbar>
+
+    <!--五页以下-->
+    <div v-if="max > 1 && max < 4">
+      <el-button @click="jump(index - 1)" :disabled="index === 0" size="small">上一页</el-button>
+      <el-button v-for="i in max" @click="jump(i - 1)" size="small">
+      {{i}}
+      </el-button>
+      <el-button @click="jump(index + 1)" :disabled="index === max - 1" size="small">下一页</el-button>
+    </div>
+
+    <!--五页及以上-->
+    <div v-if="max >= 4" style="text-align: center">
+      <el-button @click="jump(index - 1)" :disabled="index === 0" size="small">上一页</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" size="small">下一页</el-button>
+      <el-button @click="jump(temp_index - 1)" size="large">跳转</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<style scoped>
+
+</style>
--- a/src/components/Side.vue
+++ b/src/components/Side.vue
@ -104,12 +104,7 @@
    </el-form>
  </el-dialog>

-  <el-dialog v-model="isOnlineReading" title="在线预览" @close="closeOnlineReading" width="100%" top="0">
-    <el-scrollbar height="80vh" ref="onlineReadingScrollbar">
-      <el-image v-for="(link, index) in currentLinks" :src="link" :style="{'width': 'auto', 'text-align': 'center', 'background-color': 'ghostwhite'}"
-                :preview-src-list="currentLinks" :initial-index="index" loading="lazy"/>
-    </el-scrollbar>
-  </el-dialog>
+  <OnlineReader :currentLinks="currentLinks" :isOnlineReading="isOnlineReading"/>
 </template>

 <script setup>
@ -117,6 +112,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)
@ -301,10 +297,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
--- a/src/store/index.js
+++ b/src/store/index.js
@ -617,6 +617,7 @@ const state = {
    isOnlineReading: false,                  //是否在线看
    currentGid: "",                          //当前GID
    currentLinks: [],                        //当前本子链接
+    lengthPerPage: 0,                        //在线预览每页图片数量

    page: 1,                                 //当前页数
    length: 5,                               //每页能有多少个链接