Merge branch 'development' of https://github.com/SchneeHertz/exhentai…

…-manga-manager into development
a546109781 · Aug 9, 2024 · da15630 · da15630
2 parents 619ab00 + ca33940
commit da15630
Show file tree

Hide file tree

Showing 6 changed files with 246 additions and 50 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -111,48 +111,64 @@
             class="book-card"
             v-if="!book.isCollection && !book.collectionHide && (sortValue === 'hidden' || !book.hiddenBook) && !book.folderHide"
             :tabindex="index + 1"
+            v-lazy:[book.id]="loadBookCardContent"
           >
-            <p class="book-title"
-              @click="openBookDetail(book)"
-              @contextmenu="onMangaTitleContextMenu($event, book)"
-              :title="getDisplayTitle(book)"
-            >{{getDisplayTitle(book)}}</p>
-            <img
-              class="book-cover"
-              :src="book.coverPath"
-              @click="handleClickCover(book)"
-              @contextmenu="onBookContextMenu($event, book)"
-            />
-            <el-tag class="book-card-language" size="small" type="danger" v-show="isChineseTranslatedManga(book)">ZH</el-tag>
-            <el-tag class="book-card-pagecount" size="small" type="danger" v-if="book.pageDiff" @click="searchFromTag('pageDiff')">{{book.pageCount}}|{{book.filecount}}P</el-tag>
-            <el-tag class="book-card-pagecount" size="small" type="info" v-else>{{ book.pageCount }}P</el-tag>
-            <el-icon
-              :size="30"
-              :color="book.mark ? '#E6A23C' : '#666666'"
-              class="book-card-mark" @click="switchMark(book)"
-            ><BookmarkTwotone /></el-icon>
-            <el-button-group class="outer-read-button-group">
-              <el-button type="success" size="small" class="outer-read-button" plain @click="openLocalBook(book)">{{$t('m.re')}}</el-button>
-              <el-button type="success" size="small" class="outer-read-button" plain @click="$refs.InternalViewerRef.viewManga(book)">{{$t('m.ad')}}</el-button>
-            </el-button-group>
-            <el-tag
-              class="book-status-tag"
-              effect="plain"
-              :type="book.status === 'non-tag' ? 'info' : book.status === 'tagged' ? 'success' : 'warning'"
-              @click="searchFromTag(book.status)"
-            >{{book.status}}</el-tag>
-            <el-rate v-model="book.rating" size="small" allow-half @change="saveBook(book)"/>
+            <template v-if="visibilityMap[book.id]">
+              <p class="book-title"
+                @click="openBookDetail(book)"
+                @contextmenu="onMangaTitleContextMenu($event, book)"
+                :title="getDisplayTitle(book)"
+              >{{getDisplayTitle(book)}}</p>
+              <img
+                class="book-cover"
+                :src="book.coverPath"
+                @click="handleClickCover(book)"
+                @contextmenu="onBookContextMenu($event, book)"
+              />
+              <el-tag class="book-card-language" size="small" type="danger" v-show="isChineseTranslatedManga(book)">ZH</el-tag>
+              <el-tag class="book-card-pagecount" size="small" type="danger" v-if="book.pageDiff" @click="searchFromTag('pageDiff')">{{book.pageCount}}|{{book.filecount}}P</el-tag>
+              <el-tag class="book-card-pagecount" size="small" type="info" v-else>{{ book.pageCount }}P</el-tag>
+              <el-icon
+                :size="30"
+                :color="book.mark ? '#E6A23C' : '#666666'"
+                class="book-card-mark" @click="switchMark(book)"
+              ><BookmarkTwotone /></el-icon>
+              <div class="collect-tag">
+                <el-tag
+                  v-for="tag in filterCollectTag(book.tags)" :key="tag.id"
+                  @click="searchFromTag(tag.tag, tag.cat)"
+                  class="book-collect-tag"
+                  :color="tag.color"
+                >{{tag.letter}}:{{resolvedTranslation[tag.tag]?.name || tag.tag}}</el-tag>
+              </div>
+              <div>
+                <el-button-group class="outer-read-button-group">
+                  <el-button type="success" size="small" class="outer-read-button" plain @click="openLocalBook(book)">{{$t('m.re')}}</el-button>
+                  <el-button type="success" size="small" class="outer-read-button" plain @click="$refs.InternalViewerRef.viewManga(book)">{{$t('m.ad')}}</el-button>
+                </el-button-group>
+                <el-tag
+                  class="book-status-tag"
+                  effect="plain"
+                  :type="book.status === 'non-tag' ? 'info' : book.status === 'tagged' ? 'success' : 'warning'"
+                  @click="searchFromTag(book.status)"
+                >{{book.status}}</el-tag>
+                <el-rate v-model="book.rating" size="small" allow-half @change="saveBook(book)"/>
+              </div>
+            </template>
           </div>
           <div
             class="book-card"
             v-if="book.isCollection && !book.folderHide"
             :tabindex="index + 1"
+            v-lazy:[book.id]="loadBookCardContent"
           >
-            <el-tag effect="dark" type="warning" class="book-collection-tag">{{$t('m.collection')}}</el-tag>
-            <p class="book-title" :title="book.title">{{book.title}}</p>
-            <img class="book-cover" :src="book.coverPath" @click="openCollection(book)"/>
-            <el-icon :size="30" :color="book.mark ? '#E6A23C' : '#666666'" class="book-card-mark"><BookmarkTwotone /></el-icon>
-            <el-rate v-model="book.rating" size="small" allow-half disabled/>
+            <template v-if="visibilityMap[book.id]">
+              <el-tag effect="dark" type="warning" class="book-collection-tag">{{$t('m.collection')}}</el-tag>
+              <p class="book-title" :title="book.title">{{book.title}}</p>
+              <img class="book-cover" :src="book.coverPath" @click="openCollection(book)"/>
+              <el-icon :size="30" :color="book.mark ? '#E6A23C' : '#666666'" class="book-card-mark"><BookmarkTwotone /></el-icon>
+              <el-rate v-model="book.rating" size="small" allow-half disabled/>
+            </template>
           </div>
         </div>
       </el-col>
@@ -533,6 +549,8 @@
     <Setting
       ref="SettingRef"
       :search-type-list="searchTypeList"
+      :tag-list-raw="tagListRaw"
+      :resolved-translation="resolvedTranslation"
       @update-setting="updateSetting"
       @handle-language-set="handleLanguageSet"
       @message="printMessage"
@@ -607,6 +625,7 @@ export default defineComponent({
       expandNodes: [],
       progress: 0,
       randomTags: [],
+      visibilityMap: {},
       // collection
       selectCollection: undefined,
       selectCollectionObject: {list:[]},
@@ -724,7 +743,7 @@ export default defineComponent({
         }
       })
     },
-    tagListForSelect () {
+    tagListRaw () {
       let tagArray = _(this.bookList.map(b => {
         return _.map(b.tags, (tags, cat) => {
           return _.map(tags, tag => `${cat}##${tag}`)
@@ -735,18 +754,33 @@ export default defineComponent({
       return uniqedTagArray.map(combinedTag => {
         let tagArray = _.split(combinedTag, '##')
         let letter = this.cat2letter[tagArray[0]] ? this.cat2letter[tagArray[0]] : tagArray[0]
-        let labelHeader = tagArray[0]
-        let labelTail = tagArray[1]
-        if (this.setting.showTranslation) {
-          labelHeader = tagArray[0] === 'group' ? '团队' : this.resolvedTranslation[tagArray[0]]?.name || tagArray[0]
-          labelTail = this.resolvedTranslation[tagArray[1]]?.name || tagArray[1]
-        }
         return {
-          label: `${labelHeader}:${labelTail} || ${letter}:"${tagArray[1]}"$`,
-          value: `${letter}:"${tagArray[1]}"$`
+          id: `${tagArray[0]}:${tagArray[1]}`,
+          letter,
+          cat: tagArray[0],
+          tag: tagArray[1],
         }
       })
     },
+    tagListForSelect () {
+      if (this.setting.showTranslation) {
+        return this.tagListRaw.map(({letter, cat, tag}) => {
+          let labelHeader = cat === 'group' ? '团队' : this.resolvedTranslation[cat]?.name || cat
+          let labelTail = this.resolvedTranslation[tag]?.name || tag
+          return {
+            label: `${labelHeader}:${labelTail} || ${letter}:"${tag}"$`,
+            value: `${letter}:"${tag}"$`
+          }
+        })
+      } else {
+        return this.tagListRaw.map(({letter, cat, tag}) => {
+          return {
+            label: `${cat}:${tag} || ${letter}:"${tag}"$`,
+            value: `${letter}:"${tag}"$`
+          }
+        })
+      }
+    },
     tag2cat () {
       let temp = {}
       let tagArray = _(this.bookList.map(b=>{
@@ -1640,6 +1674,17 @@ export default defineComponent({
     isChineseTranslatedManga (book) {
       return _.includes(book?.tags?.language, 'chinese') ? true : false
     },
+    loadBookCardContent (id) {
+      this.visibilityMap[id] = true
+    },
+    filterCollectTag (tagObject) {
+      if (this.setting.showCollectTag) {
+        const collectTag = this.setting.collectTag || []
+        return collectTag.filter(tag => tagObject[tag.cat] && tagObject[tag.cat].includes(tag.tag))
+      } else {
+        return []
+      }
+    },
     // home page
     chunkList () {
       this.currentPage = 1
@@ -2563,11 +2608,20 @@ body
 .book-card
   display: inline-block
   width: 220px
-  height: 367px
+  min-height: 365px
+  padding-bottom: 4px
   border: solid 1px var(--el-border-color)
   border-radius: 4px
   margin: 6px 6px
   position: relative
+  .collect-tag
+    overflow-x: hidden
+    margin: 0 10px
+    text-align: left
+    .book-collect-tag
+      cursor: pointer
+      margin-right: 4px
+      margin-bottom: 4px
 .book-collection-tag
   position: absolute
   right: 1px

diff --git a/src/components/Setting.vue b/src/components/Setting.vue
@@ -134,6 +134,40 @@
           </el-col>
         </el-row>
       </el-tab-pane>
+      <el-tab-pane :label="$t('m.collectTag')" name="collectTag">
+        <el-row :gutter="8">
+          <el-col :span="24" class="setting-line collect-tag">
+            <el-tag v-for="tag in setting.collectTag" :key="tag.id" :color="tag.color" closable @close="removeTag(tag.id)">
+              {{tag.letter}}:{{resolvedTranslation[tag.tag]?.name || tag.tag}}
+            </el-tag>
+          </el-col>
+          <el-col :span="24" class="setting-line collect-tag">
+            <el-form :inline="true" :model="formTagAdd" :show-message="false">
+              <el-form-item :label="$t('m.tag')">
+                <el-select-v2
+                  v-model="formTagAdd.tag"
+                  filterable clearable :height="340"
+                  style="width: 500px"
+                  :options="tagListForCollect"
+                ></el-select-v2>
+              </el-form-item>
+              <el-form-item :label="$t('m.tagColor')">
+                <el-color-picker v-model="formTagAdd.color" show-alpha :predefine="moderateSoftColors"/>
+              </el-form-item>
+              <el-form-item>
+                <el-button plain @click="addTagToCollect">{{$t('m.addTag')}}</el-button>
+              </el-form-item>
+            </el-form>
+          </el-col>
+          <el-col :span="24" class="setting-switch">
+            <el-switch
+              v-model="setting.showCollectTag"
+              :active-text="$t('m.showCollectTag')"
+              @change="saveSetting"
+            />
+          </el-col>
+        </el-row>
+      </el-tab-pane>
       <el-tab-pane :label="$t('m.advanced')" name="advanced">
         <el-row :gutter="8">
           <el-col :span="24">
@@ -379,7 +413,7 @@
 </template>
 
 <script setup>
-import { ref, onMounted, h } from 'vue'
+import { ref, onMounted, h, computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { ElMessageBox } from 'element-plus'
 
@@ -390,7 +424,7 @@ import NameFormItem from './NameFormItem.vue'
 
 const { t } = useI18n()
 
-const props = defineProps(['searchTypeList'])
+const props = defineProps(['searchTypeList', 'tagListRaw', 'resolvedTranslation'])
 
 const emit = defineEmits([
   'updateSetting',
@@ -580,6 +614,64 @@ const importDatabase = async () => {
   emit('message', 'success', t('c.importMessage'))
 }
 
+const formTagAdd = ref({
+  tag: null,
+  color: '#42A5F5'
+})
+
+const tagListForCollect = computed(() => {
+  if (setting.value.showTranslation) {
+    return props.tagListRaw.map(({letter, cat, tag, id}) => {
+      let labelHeader = cat === 'group' ? '团队' : props.resolvedTranslation[cat]?.name || cat
+      let labelTail = props.resolvedTranslation[tag]?.name || tag
+      return {
+        label: `${labelHeader}:${labelTail} || ${letter}:"${tag}"$`,
+        value: id
+      }
+    })
+  } else {
+    return props.tagListRaw.map(({letter, cat, tag, id}) => {
+      return {
+        label: `${cat}:${tag} || ${letter}:"${tag}"$`,
+        value: id
+      }
+    })
+  }
+})
+
+const moderateSoftColors = [
+  '#FF6F61', // 略微柔和但鲜艳的珊瑚红
+  '#F48FB1', // 鲜明的粉红色
+  '#42A5F5', // 鲜艳的蓝色
+  '#66BB6A', // 鲜艳的绿色
+  '#FFCA28', // 亮黄色
+  '#AB47BC', // 鲜亮的紫色
+  '#26A69A', // 热带青色
+  '#FFA726', // 鲜亮的橙色
+  '#8D6E63', // 保存自然的棕色
+  '#78909C'  // 鲜明的灰蓝色
+]
+
+const addTagToCollect = () => {
+  let tag = props.tagListRaw.find(tag => tag.id === formTagAdd.value.tag)
+  if (!setting.value.collectTag) setting.value.collectTag = []
+  setting.value.collectTag.push({
+    id: tag.id,
+    letter: tag.letter,
+    cat: tag.cat,
+    tag: tag.tag,
+    color: formTagAdd.value.color
+  })
+  setting.value.collectTag = _.uniqBy(setting.value.collectTag, 'id')
+  formTagAdd.value.tag = null
+  saveSetting()
+}
+
+const removeTag = (id) => {
+  setting.value.collectTag = setting.value.collectTag.filter(tag => tag.id !== id)
+  saveSetting()
+}
+
 const dialogVisibleSetting = ref(false)
 const activeSettingPanel = ref('general')
 
@@ -601,6 +693,12 @@ defineExpose({
 .setting-line.regexp
   .el-input__inner
     font-family: 'Consolas', 'Monaco', 'Courier New', monospace
+.setting-line.collect-tag
+  .el-form-item
+    margin-bottom: 0
+  .el-tag
+    margin-right: 8px
+    margin-bottom: 8px
 .setting-switch
   text-align: left
   margin-top: 6px

diff --git a/src/locales/en-US.json b/src/locales/en-US.json
@@ -145,7 +145,10 @@
     "keepReadingProgress": "Keep Reading Progress",
     "reverseLeftRight": "Reverse the left and right page-turning buttons",
     "autoNextManga": "Auto Next Manga",
-    "accelerator": "Accelerator"
+    "accelerator": "Accelerator",
+    "collectTag": "Collect Tag",
+    "showCollectTag": "Show Collect Tag",
+    "tagColor": "Tag Color"
   },
   "c": {
     "selectCollectionList": "Select collectionList.json",

diff --git a/src/locales/zh-CN.json b/src/locales/zh-CN.json
@@ -145,7 +145,10 @@
     "keepReadingProgress": "保持阅读进度",
     "reverseLeftRight": "翻转左右翻页按键",
     "autoNextManga": "自动跳转到下一本",
-    "accelerator": "快捷键"
+    "accelerator": "快捷键",
+    "collectTag": "标签收藏",
+    "showCollectTag": "显示收藏标签",
+    "tagColor": "标签颜色"
   },
   "c": {
     "selectCollectionList": "选择collectionList.json",

diff --git a/src/locales/zh-TW.json b/src/locales/zh-TW.json
@@ -145,7 +145,10 @@
     "keepReadingProgress": "保持閱讀進度",
     "reverseLeftRight": "反轉左右翻頁按鍵",
     "autoNextManga": "自動跳轉到下一本",
-    "accelerator": "快捷鍵"
+    "accelerator": "快捷鍵",
+    "collectTag": "標籤收藏",
+    "showCollectTag": "顯示收藏標籤",
+    "tagColor": "標籤顏色"
   },
   "c": {
     "selectCollectionList": "選擇collectionList.json",