From 853ed0c2f2dab0f3420219fe45f30b94964fee70 Mon Sep 17 00:00:00 2001
From: chuzhongzai <njy1822574439@outlook.com>
Date: Sun, 27 Aug 2023 15:40:36 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AF=B9=E8=B0=83=E4=B8=BB=E9=A1=B5=E8=B7=9F?=
 =?UTF-8?q?=E4=BE=A7=E8=BE=B9=E6=A0=8F=EF=BC=8C=E4=BC=98=E5=8C=96=E7=95=8C?=
 =?UTF-8?q?=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                     |   6 +-
 src/components/DashBoard.vue    |  35 ++---
 src/components/HentaiSearch.vue |  38 ++++--
 src/components/OnlineReader.vue |   2 +-
 src/components/Side.vue         | 227 +++++++++++++++++++++++---------
 5 files changed, 213 insertions(+), 95 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 3eb7d8f..4b24a1f 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -8,10 +8,10 @@ import DashBoard from "./components/DashBoard.vue";
 <template>
   <div class="app">
     <el-container>
+      <DashBoard/>
+      <main>
         <Side/>
-      <el-main>
-        <DashBoard/>
-      </el-main>
+      </main>
     </el-container>
   </div>
 </template>
diff --git a/src/components/DashBoard.vue b/src/components/DashBoard.vue
index 3b81914..c73a752 100644
--- a/src/components/DashBoard.vue
+++ b/src/components/DashBoard.vue
@@ -1,35 +1,19 @@
 <template>
-  <div class="DashBoard" v-show="loadComplete">
+  <el-drawer class="DashBoard" v-model="store.state.isShowHistory" size="90%" direction="ltr">
     <span>E站额度本周已用:{{weekUsed.weekUsedAmount}} <br>上次重置时间:{{weekUsed.lastResetAmountTime}}</span><br>
     <el-button @click="queryWeekUsedAmount">查询用量</el-button>
     <hr>
     <el-row>
       <el-col>
-        查询参数类型: <el-select style="width: 125px" v-model="type" @change="resetLocalQuery()">
-        <el-option value="link" label="链接"/>
-        <el-option value="keyword" label="关键字"/>
-        <el-option value="tag" label="标签"/>
-      </el-select><br>
         <el-input style="width: 200px;" v-model="param"  v-if="type !== 'tag'">
           <template #prepend>
-            参数:
+            链接:
           </template>
         </el-input>
-        <div v-if="type === 'tag'">
-          <el-tag v-for="tid in paramForTags" closable @close="removeQueryTag(tid)">
-            {{store.state.tags.get(tid).tag}}
-          </el-tag>
-          <el-autocomplete v-model="param" :fetch-suggestions="completeQueryTag"  @select="handleTagSelect" ref="tagInput" placeholder="检索标签"/>
-        </div>
-      </el-col>
-      <el-col>
-        <el-button @click="queryRemoteTask" v-show="type === 'link'">远程查询</el-button>
-        <el-button @click="queryLocalTask">当前页查询</el-button>
-        <el-button @click="removeAllQueryTag" v-show="type === 'tag'">清空查询标签</el-button>
+        <el-button @click="queryRemoteTask" v-show="type === 'link'">解析链接</el-button>
       </el-col>
     </el-row>
     <hr>
-    <el-button @click="openPanel">打开面板</el-button>
     <el-button @click="isQuerying = true">里站搜索</el-button>
     <el-button @click="isAlterAuthCode = true">修改授权码</el-button>
     <el-button @click="deleteAuthCode">删除本地授权码</el-button>
@@ -50,7 +34,7 @@
                   style="height: 30vh" fit="contain"/>
       </picture>
     </div>
-  </div>
+  </el-drawer>
 
   <el-dialog title="查询本子" v-model="chosenGallery" width="100%">
     <table>
@@ -530,6 +514,11 @@ function dark(){
     html.classList.add('dark')
   document.querySelector(".DashBoard").style.setProperty("background-color", null)
   document.querySelector(".app").style.setProperty("background-color", null)
+  let galleries = document.querySelectorAll("#gallery");
+  for(let gallery of galleries){
+    gallery.style.setProperty("background-color", null)
+  }
+
 }
 function light(){
   let html = document.querySelector("html")
@@ -538,6 +527,11 @@ function light(){
 
   document.querySelector(".DashBoard").style.setProperty("background-color", "ghostwhite")
   document.querySelector(".app").style.setProperty("background-color", "#c6e2ff")
+  let galleries = document.querySelectorAll("#gallery");
+  if(galleries !== undefined && galleries.length !== 0)
+    for(let gallery of galleries){
+      gallery.style.setProperty("background-color", "FloralWhite")
+    }
 }
 function saveConfig(){
   if(darkConfig.value.customTime) {
@@ -570,7 +564,6 @@ function saveConfig(){
 
   .validate{
     width: 50vw;
-    background-color: ghostwhite;
     display: block;
     padding-top: 200px;
     padding-left: 20vw;
diff --git a/src/components/HentaiSearch.vue b/src/components/HentaiSearch.vue
index 15f9630..e81d87d 100644
--- a/src/components/HentaiSearch.vue
+++ b/src/components/HentaiSearch.vue
@@ -14,6 +14,7 @@ let queryPage = ref({})
 let galleries = ref([])
 let param = ref()
 let isShowUp = ref()
+let isLoading = ref()
 watch(props, () => {
   isShowUp.value = props.isQuerying
 })
@@ -27,11 +28,11 @@ function queryGalleries(link){
     tempParam = keyword.value
   }
   tempParam = tempParam.replace(" ", "+")
-  document.getElementById("loading").style.display = "inline-block";
+  isLoading = true
 
   axios.get("https://downloader.lionwebsite.xyz/query?keyword=" + tempParam)
       .then((res) => {
-        document.getElementById("loading").style.display = "none";
+        isLoading = false
         if (res.data.result === "success") {
           let tempGalleries = JSON.parse(res.data.data)
           queryPage.value.first = 'first' in res.data ? res.data.first : undefined
@@ -74,23 +75,42 @@ function coverLink(rawLink){
 function close(){
   emit("close")
 }
+
+function adjustGalleryName(name, length) {
+  let truncated = '';
+  let bytesCount = 0;
+
+  for (const char of name) {
+    const charCode = char.charCodeAt(0);
+    const byteLength = charCode < 0x80 ? 1 : charCode < 0x800 ? 2 : 3;
+
+    if (bytesCount + byteLength <= length) {
+      truncated += char;
+      bytesCount += byteLength;
+    } else {
+      truncated += "..."
+      break;
+    }
+  }
+  return truncated;
+}
 </script>
 
 <template>
-  <el-dialog title="里站搜索" v-model="isShowUp" top="0" style="margin-bottom: 0" width="100%" class="el-dialogClass" @close="close">
+  <el-dialog title="里站搜索" v-model="isShowUp" top="0" style="margin-bottom: 0" fullscreen class="el-dialogClass" @close="close">
     <div style="text-align: center">
-      <el-input v-model="keyword" style="width: 50vw"></el-input> <el-button @click="queryGalleries(null)">查询</el-button> <div id="loading"/>
+      <el-input v-model="keyword" style="width: 50vw"></el-input> <el-button @click="queryGalleries(null)">查询</el-button> <div id="loading" v-if="isLoading"/>
     </div>
-    <el-scrollbar height="65vh" ref="scrollBar">
-      <div style="height: 20vh; width: 100%; border-radius: 5px" v-for="gallery in galleries">
+    <el-scrollbar height="75vh" ref="scrollBar">
+      <div style="height: 20vh; width: 100%; border-radius: 5px; padding-bottom: 2vh" v-for="gallery in galleries">
         <el-image alt="picture" :preview-src-list="['https://downloader.lionwebsite.xyz/GalleryManage/ehThumbnail?path=' + gallery.thumbnailUrl.replace('/t', ''),]"
                   :src="'https://downloader.lionwebsite.xyz/GalleryManage/ehThumbnail?path=' + gallery.thumbnailUrl.replace('/t', '') "
                   style="height:20vh;width:35vw;float: left;"
                   fit="contain"
                   loading="lazy"
         />
-        <div style="font: bold 10px semi-condensed; margin-top: 1vh; padding-left: 40vw; padding-top: 2vw">
-          <span>{{gallery.name}}</span><br>
+        <div style="font: bold 16px semi-condensed; height: 25vh; padding-left: 40vw;">
+          <span>{{adjustGalleryName(gallery.name, 80)}}</span><br>
           <span>上传时间：{{gallery.uploadTime}}</span><br>
           <span>页数：{{gallery.page}}</span><br>
           <span class="ct6">类型：{{gallery.type}}</span><br>
@@ -120,7 +140,7 @@ function close(){
   border-top-color: #3498db;
   border-radius: 50%;
   animation: spin 1s linear infinite;
-  display: none;
+  display: inline-block;
 }
 
 @keyframes spin {
diff --git a/src/components/OnlineReader.vue b/src/components/OnlineReader.vue
index 15479e6..d6bd406 100644
--- a/src/components/OnlineReader.vue
+++ b/src/components/OnlineReader.vue
@@ -82,7 +82,7 @@ function set_current_page(page){
 </script>
 
 <template>
-  <el-dialog v-model="isShowUp" @close="closeDialog" width="100%" top="0">
+  <el-dialog v-model="isShowUp" @close="closeDialog" width="100%" top="0" fullscreen >
     <template #header style="padding-bottom: 0">
       在线预览:  {{currentGallery.name}} 页数：{{currentGallery.pages}}<br>
       <div style="font-size: 3vh; display: inline" v-if="max > 0">
diff --git a/src/components/Side.vue b/src/components/Side.vue
index 577b4dd..4d6a335 100644
--- a/src/components/Side.vue
+++ b/src/components/Side.vue
@@ -1,48 +1,50 @@
 <template>
-  <el-drawer v-model="isOpenHistoryPanel" direction="ltr" size="100%" @close="closeHistoryPanel" >
     <div class="side">
       <div v-show="loadComplete" class="load_complete">
-        <el-table :data="currentTasks" :empty-text="emptyText" :row-key="gallery=>gallery.gid">
 
-          <el-table-column type="expand" width="25px">
-            <template #default="props">
-              名字:{{ props.row.name}} <br>
-              链接:<el-link :href="props.row.link">Link</el-link> <br>
-              语言:{{props.row.language}} <br>
-              页数:{{props.row.pages}} <br>
-              文件大小:{{props.row.fileSize}}<br>
-              分辨率:{{props.row.resolution}}<br>
-              任务创建时间:{{props.row.createTimeDisplay}}<br>
-              标签:{{props.row.tag === '' ? '无': props.row.tag}} <br>
-              <span v-show="isLion">
-                downloader:{{props.row.downloader}}
+        <el-scrollbar max-height="80vh">
+          <div v-for="gallery in currentTasks" :style="{'height': '20vh', 'background': isDark() ? '': 'FloralWhite', 'border-radius': '1%',
+          'margin-bottom': '10px'}"
+               @click="viewInfo(gallery)" id="gallery">
+            <el-image :src="'https://downloader.lionwebsite.xyz/GalleryManage/onlineImage/0?gid=' + gallery.gid"
+                    style="height: 20vh; width: 35vw; float:left"
+                  fit="contain"
+                  loading="lazy"
+            ></el-image>
+            <div style="font: bold 16px semi-condensed;">
+              {{adjustGalleryName(gallery.name, 95)}}<br>
+              页数:{{gallery.pages}}<br>
+              语言:{{gallery.language}}
+              <span v-if="gallery.download !== undefined">
+                下载进度: {{gallery.progress}}
               </span>
-
-              <el-button @click="downloadTask(props.row.download)" :disabled="props.row.download === undefined">下载</el-button>
-              <el-button @click="deleteGallery(props.row.gid)" :disabled="props.row.download === undefined">删除</el-button>
-              <el-button @click="shareGallery({gid:props.row.gid, shortName:props.row.shortName + '.zip'})" v-if="isLion">分享</el-button>
-              <el-button @click="changeGalleryCollect(props.row.gid, props.row.isCollect)" :disabled="props.row.download === undefined">{{props.row.isCollect ? '取消收藏' : '收藏'}}</el-button>
-              <el-button @click="onlineGalleryReader(props.row)" :disabled="props.row.download === undefined">在线看</el-button>
-              <el-button @click="showThumbnail(props.row)" :disabled="props.row.download === undefined">预览封面</el-button><br>
-              <el-button @click="editGalleryTag(props.row)" :disabled="props.row.download === undefined">编辑标签</el-button>
-              <el-button @click="updateGallery(props.row.link)" :disabled="props.row.download === undefined">更新本子</el-button>
-            </template>
-          </el-table-column>
-
-          <el-table-column label="名字" width="240px">
-            <template #default="scoped">
-              <span @click="showThumbnail(scoped.row)">
-                {{galleryNameType === 'shortName' ? scoped.row.shortName: scoped.row.name}}
-              </span>
-            </template>
-          </el-table-column>
-
-          <el-table-column label="进度" width="55px">
-            <template #default="scoped">
-              {{ scoped.row.progress }}
-            </template>
-          </el-table-column>
-        </el-table>
+            </div>
+          </div>
+        </el-scrollbar>
+        <el-col>
+          <el-row>
+            <el-button @click="store.state.isShowHistory = true">三</el-button>
+            <el-select style="width: 22vw" v-model="type">
+              <el-option value="keyword" label="关键字"/>
+              <el-option value="tag" label="标签"/>
+            </el-select>
+            <el-input style="width: 63vw" v-model="param" v-show="type === 'keyword'" placeholder="关键字搜索">
+              <template #append>
+                <el-button @click="queryLocalTask">搜索</el-button>
+              </template>
+            </el-input>
+            <el-autocomplete v-model="param" :fetch-suggestions="generateQueryTag"
+                             @select="handleQueryTagSelect" placeholder="检索标签"
+                             style="width: 63vw" v-if="type === 'tag'">
+              <template #append>
+                <el-button :disabled="paramForTags.length === 0" @click="removeAllQueryTag">清空tag</el-button>
+              </template>
+            </el-autocomplete>
+          </el-row>
+        </el-col>
+        <el-tag v-for="tid in paramForTags" closable @close="removeQueryTag(tid)" size="large" style="display: inline-block" v-if="paramForTags.length !== 0">
+          {{store.state.tags.get(tid).tag}}
+        </el-tag>
 
         <el-row class="pageChanger">
           <el-col>
@@ -86,7 +88,6 @@
         </el-row>
       </div>
     </div>
-  </el-drawer>
 
   <el-dialog v-model="isEditingTag" title="编辑本子标签" width="100%">
     <el-form>
@@ -104,6 +105,43 @@
     </el-form>
   </el-dialog>
 
+  <el-dialog v-model="isViewing" width="100%" top="0" style="padding: 0">
+    <div style="height: 20vh; font: bold 16px semi-expanded">
+        <el-image :src="'https://downloader.lionwebsite.xyz/GalleryManage/onlineImage/0?gid=' + currentGallery.gid"
+                  style="float: left; width: 40vw; height: 20vh" fit="contain"
+                  :preview-src-list="['https://downloader.lionwebsite.xyz/GalleryManage/onlineImage/1?gid=' + currentGallery.gid,]"></el-image>
+      {{adjustGalleryName(currentGallery.name, 150)}}
+    </div>
+    <div style="font: bold 20px semi-expanded">
+      页数:{{currentGallery.pages}}                 <br>
+      语言:{{currentGallery.language}}              <br>
+      下载时间:{{currentGallery.createTimeDisplay}}  <br>
+      大小:{{currentGallery.fileSize}}              <br>
+      分辨率:{{currentGallery.resolution}}          <br>
+      链接:<a :href="currentGallery.link">link</a>  <br>
+      标签:{{currentGallery.tag === '' ? '无': currentGallery.tag}} <br>
+      <span v-show="isLion">
+            downloader:{{currentGallery.downloader}}
+      </span>
+    </div>
+    <template #footer>
+      <el-button @click="downloadTask(currentGallery.download)" :disabled="currentGallery.download === undefined"
+                 size="large">下载</el-button>
+      <el-button @click="deleteGallery(currentGallery.gid)" :disabled="currentGallery.download === undefined"
+                 size="large">删除</el-button>
+      <el-button @click="shareGallery({gid:currentGallery.gid, shortName:currentGallery.shortName + '.zip'})" v-if="isLion"
+                 size="large">分享</el-button>
+      <el-button @click="changeGalleryCollect(currentGallery.gid, currentGallery.isCollect)" :disabled="currentGallery.download === undefined"
+                 size="large">{{currentGallery.isCollect ? '取消收藏' : '收藏'}}</el-button>
+      <el-button @click="onlineGalleryReader" :disabled="currentGallery.download === undefined"
+                 size="large">在线看</el-button>
+      <el-button @click="editGalleryTag(currentGallery)" :disabled="currentGallery.download === undefined"
+                 size="large">编辑标签</el-button>
+      <el-button @click="updateGallery(currentGallery.link)" :disabled="currentGallery.download === undefined"
+                 size="large">更新本子</el-button>
+    </template>
+  </el-dialog>
+
   <OnlineReader :current-gallery="currentGallery" :isOnlineReading="isOnlineReading" @close="isOnlineReading = false"/>
 </template>
 
@@ -124,6 +162,8 @@ let isEditingPage = ref(false)
 let isEditingTag = ref(false)
 //是否预览本子
 let isOnlineReading = ref(false)
+//是否查看详情
+let isViewing = ref(false)
 
 //临时变量
 let galleryForTag = ref({})
@@ -133,6 +173,13 @@ let galleryNameType = ref("shortName")      // shortName name
 let sortType = ref("shortName")             // shortName name createTime
 let targetPage = ref(1)                     // 当前页数
 
+
+//查询相关
+let type = ref("keyword")
+let param = ref("")
+let paramForTags = ref([]) //tidS
+
+
 let onlineReadingScrollbar = ref(null)
 
 let loadComplete = computed(() => {
@@ -143,9 +190,6 @@ let currentTasks = computed(() => {
   return store.getters.currentTasks ? store.getters.currentTasks: null
 })
 
-let isOpenHistoryPanel = computed(() => {
-  return store.state.isShowHistory
-})
 //标签
 let tags = computed(() => {
   return store.state.tags
@@ -242,12 +286,10 @@ function querySimilarTag(keyWord, cb){
     skip = false
     for(let id of galleryForTag.value.tags)
       if(id === key) {
-        if(!hit && tag.tag === keyWord)       //是否命中标签
+        if (!hit && tag.tag === keyWord)       //是否命中标签
           hit = true
         skip = true
         break
-      }else{
-        console.log("id:", id, key)
       }
     if(skip)
       continue
@@ -275,6 +317,58 @@ function handleTagSelect(data){
   tagInput.value.blur()
 }
 
+function generateQueryTag(keyWord, cb){
+  let result = []
+  let hit = false       //用于检测是否有重复标签
+  let skip              //用于过滤已经有了的标签
+  for(const [key, tag] of store.state.tags){
+    skip = false
+    if(paramForTags.value.length !== 0) {
+      for (let id of paramForTags.value)
+        if (id === key) {
+          if (!hit && tag.tag === keyWord)       //是否命中标签
+            hit = true
+          skip = true
+          break
+        }
+      if(skip)
+        continue
+    }
+    if(tag.tag.includes(keyWord))
+      result.push({value: tag.tag, tag:tag})
+  }
+  cb(result)
+}
+function removeQueryTag(tid){
+  for (let i=0; i<paramForTags.value.length; i++){
+    if(paramForTags.value[i] === tid){
+      paramForTags.value.splice(i, 1)
+      break
+    }
+  }
+  queryLocalTask()
+}
+function removeAllQueryTag(){
+  paramForTags.value.splice(0)
+  queryLocalTask()
+}
+function handleQueryTagSelect(data) {
+  console.log(data)
+  paramForTags.value.push(data.tag.id)
+  param.value = ''
+  queryLocalTask()
+}
+function queryLocalTask(){
+  switch (type.value){
+    case "keyword":
+      store.commit("_searchLocalByKeyword", param.value)
+      break
+    case "tag":
+      store.commit("_searchLocalByTag", paramForTags.value)
+      break
+  }
+}
+
 function mark(gid, tid){
   store.dispatch("mark", {gid, tid})
 }
@@ -293,10 +387,13 @@ function updateGallery(link){
 function deleteGallery(gid){
   store.dispatch("deleteGallery", gid)
 }
-function onlineGalleryReader(gallery){
-  currentGallery.value = gallery
+function onlineGalleryReader(){
   isOnlineReading.value = true;
 }
+function viewInfo(gallery){
+  currentGallery.value = gallery
+  isViewing.value = true;
+}
 function shareGallery(data){
   const {gid, shortName} = data
   let link
@@ -315,29 +412,37 @@ function shareGallery(data){
       ElMessage(res.data.data)
   })
 }
-//显示缩略图
-function showThumbnail(gallery){
-  if(gallery.status === "下载完成") {
-    store.commit("_changeThumbnailGallery", gallery)
-    setTimeout(() => {document.querySelector(".preview > img").click()}, 1)
+
+function adjustGalleryName(name, length) {
+  let truncated = '';
+  let bytesCount = 0;
+
+  for (const char of name) {
+    const charCode = char.charCodeAt(0);
+    const byteLength = charCode < 0x80 ? 1 : charCode < 0x800 ? 2 : 3;
+
+    if (bytesCount + byteLength <= length) {
+      truncated += char;
+      bytesCount += byteLength;
+    } else {
+      truncated += "..."
+      break;
+    }
   }
+  return truncated;
 }
 
-//移动端
-function closeHistoryPanel(){
-  store.commit("_closeHistoryPanel")
+function isDark(){
+  return document.querySelector('html').classList.contains('dark')
 }
 </script>
 
 <style scoped>
-  .side{
-    text-align: center;
-  }
   span{
     display: block;
   }
   .pageChanger{
-    margin-top: 5vh;
+    text-align: center;
   }
   .el-select{
     width: 135px;