新增在线看本子，去除视频在线看。优化本子名称缩短使其至少不为空白。优化部分代码。(同步更新)

src/components/Side.vue

@@ -34,7 +34,7 @@
             <span>
               <el-button @click="downloadTask(scoped.row.download)" :disabled="scoped.row.download === undefined">下载</el-button>
               <el-button @click="deleteGallery(scoped.row.gid)" :disabled="scoped.row.download === undefined">删除</el-button>
-              <el-button @click="onlineGalleryReader(scoped.row.name)" :disabled="scoped.row.download === undefined">在线看</el-button>
+              <el-button @click="onlineGalleryReader(scoped.row.gid)" :disabled="scoped.row.download === undefined">在线看</el-button>
             </span>
           </template>
         </el-table-column>
@@ -69,7 +69,6 @@
             <span>
               <el-button @click="downloadTask(scoped.row.download)" :disabled="scoped.row.download === undefined">下载</el-button>
               <el-button @click="deleteVideo(scoped.row.id)" :disabled="scoped.row.download === undefined">删除</el-button>
-              <el-button @click="onlineVideoViewer()" :disabled="scoped.row.download === undefined">在线看</el-button>
             </span>
           </template>
         </el-table-column>
@@ -83,7 +82,7 @@
 
       <el-row class="pageChanger">
         <el-col>
-          筛选:<el-select v-model="showType" @change="changeShowType">
+          筛选:<el-select v-model="showType" @change="changeShowType" class="el-select">
             <el-option value="gallery" label="本子"/>
             <el-option value="video" label="视频"/>
             <el-option value="collect" label="收藏"/>
@@ -130,6 +129,13 @@
       </el-footer>
     </el-dialog>
 
+    <el-dialog v-model="isOnlineReading" title="在线预览" @close="closeOnlineReader" width="90%" style="margin-top: 0; margin-bottom: 0; padding: 0">
+      <el-scrollbar height="84vh">
+        <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>
+
     <span v-show="!loadComplete" class="side">请输入授权码后再查看</span>
   </div>
 </template>
@@ -144,15 +150,15 @@ let inputNode = ref(null)
 let isEditingPage = ref(false)
 //是否正在编辑标签
 let isEditingTag = ref(false)
+
 //临时变量
 let tempTag = ref("")
 let tempGid = ref("")
 
-
+let showNameType = ref("shortName")     // shortName name
-let showNameType = ref("shortName")   // shortName name
+let showType = ref("gallery")           // gallery video collect
-let showType = ref("gallery")     // gallery video collect
+let sortType = ref("shortName")         // shortName name createTime
-let sortType = ref("shortName")   // shortName name createTime
+let targetPage = ref(1)                 // 当前页数
-let targetPage = ref(1)
 
 //防抖计时器
 let debounceTimer = 0
@@ -174,6 +180,9 @@ let isShowVideoHistory = computed(() => {
 let isShowGalleryHistory = computed(() => {
   return store.state.showType === "gallery" || store.state.showType === "collect"
 })
+let isOnlineReading = computed(() => {
+  return store.state.isOnlineReading
+})
 
 let min = computed(() => {
   return store.getters.min
@@ -188,6 +197,16 @@ let page = computed(() => {
   return store.state.page
 })
 
+let currentLinks = computed(() => {
+  return store.state.currentLinks
+})
+let imageWidth = computed(() => {
+  return store.state.imageWidth
+})
+let imagePadding = computed(() => {
+  return store.state.imagePadding
+})
+
 //翻页
 function next() {
   if(targetPage.value < max.value) {
@@ -274,11 +293,11 @@ function deleteGallery(gid){
 function deleteVideo(id){
   store.dispatch("deleteVideo", id)
 }
-function onlineGalleryReader(name){
+function onlineGalleryReader(gid){
-  window.open("http://zfile.lionwebsite.xyz/1/gallery/" + encodeURI(name))
+  store.dispatch("queryOnlineLinks", gid)
 }
-function onlineVideoViewer(){
+function closeOnlineReader(){
-  window.open("http://zfile.lionwebsite.xyz/1/video/")
+  store.state.isOnlineReading = false
 }
 
 //显示缩略图

src/store/index.js

@@ -116,6 +116,26 @@ const actions = {
                 ElMessage("查询失败")
         })
     },
+    queryOnlineLinks(context, gid){
+        // 如果本地有缓存，则直接返回，没有再请求
+        if(context.state.onlineLinks[gid] !== undefined){
+            context.commit("_setOnlineLinks", gid)
+        }
+        else {
+            axios.get(GalleryManageUrl + "/onlineLinks", {
+                params: {
+                    AuthCode: state.AuthCode,
+                    gid,
+                }
+            }).then((res) => {
+                if (res.data.result === "success")
+                    context.commit("_addAndSetOnlineLinks", {gid, links: res.data.data})
+
+                else
+                    ElMessage(res.data.data)
+            })
+        }
+    },
     updateGallery(context, link){
         axios.post(GalleryManageUrl + "/update", qs.stringify({AuthCode: state.AuthCode, link}))
             .then((res) => {
@@ -135,10 +155,25 @@ const actions = {
             if(res.data.result === 'success'){
                 state.userId = parseInt(res.data.data)
                 context.commit("_authed", AuthCode)
+                //初始化
                 context.dispatch("loadMaskDomain").then()
                 context.dispatch("loadWeekUsedAmount").then()
                 context.dispatch("updateGalleryTasks", "all").then()
                 context.dispatch("updateVideoTasks", "all").then()
+
+                //获取图片合适长度
+                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'
             }
             else
                 context.commit("_unAuthed")
@@ -558,6 +593,27 @@ const mutations = {
     _setMaskDomain(state, maskDomain){
         state.maskDomain = maskDomain
     },
+    _addAndSetOnlineLinks(state, data){
+        let links = JSON.parse(data.links)
+        state.onlineLinks[data.gid] = []
+        state.currentLinks.splice(0)
+        state.currentGid = data.gid
+
+        links.forEach((link) => {
+            state.onlineLinks[data.gid].push('http://downloader.lionwebsite.xyz/GalleryManage/onlineImage/' + link + '?gid=' + state.currentGid + '&AuthCode=' + state.AuthCode)
+            state.currentLinks.push('http://downloader.lionwebsite.xyz/GalleryManage/onlineImage/' + link + '?gid=' + state.currentGid + '&AuthCode=' + state.AuthCode)
+        })
+
+        state.isOnlineReading = true
+    },
+    _setOnlineLinks(state, gid){
+        state.currentLinks.splice(0)
+        state.onlineLinks[gid].forEach((link) => {
+            state.currentLinks.push(link)
+        })
+        state.currentGid = gid
+        state.isOnlineReading = true
+    },
     _changeThumbnailGallery(state, gallery){
         state.thumbnailGallery = gallery
         state.thumbnailGallery.url = GalleryManageUrl + "/thumbnail/" + encodeURIComponent(gallery.name) + ".webp?AuthCode="+state.AuthCode
@@ -565,11 +621,18 @@ const mutations = {
 }
 
 const state = {
-    totalGalleryTask:[],                   //存放本子数据的数组
+    totalGalleryTask:[],                    //存放本子数据的数组
-    chosenGallery:false,                   //准备下载的本子
+    chosenGallery:false,                    //准备下载的本子
-    thumbnailGallery:{},
+    thumbnailGallery:{},                    //缩略图链接
     collectGallery:[],                      //收藏的本子
 
+    onlineLinks:{},                         //在线本子链接
+    isOnlineReading: false,                 //是否在线看
+    currentGid: "",                         //当前GID
+    currentLinks: [],                       //当前本子链接
+    imageWidth: "",                         //图片宽度
+    imagePadding: "",                       //图片padding
+
     totalVideoTask:[],                      //存放视频数据的数组
     chosenVideo:false,                      //准备下载的视频
 
@@ -653,13 +716,25 @@ function getShortname(name){
             let start = name.indexOf("[")
             let end = name.indexOf("]") + 1
             let temp = name.substring(start, end)
-            name = name.replace(temp, "")
+            temp = name.replace(temp, "")
+            if(temp.trim() === ""){
+                name = name.replace("[", "").replace("]", "")
+                break
+            }
+            else
+                name = temp
         }
         while (name.includes("(") && name.includes(")")) {
             let start = name.indexOf("(")
             let end = name.indexOf(")") + 1
             let temp = name.substring(start, end)
-            name = name.replace(temp, "")
+            temp = name.replace(temp, "")
+            if(temp.trim() === ""){
+                name = name.replace("(", "").replace(")", "")
+                break
+            }
+            else
+                name = temp
         }
         return name.trim()
     } else {