精简代码，抽取公共代码为函数，修复bug（同步更新）

src/components/Side.vue

@@ -2,7 +2,7 @@
   <div class="side" style="width: 100%">
     <span v-show="loadComplete">{{showType === 'gallery' || showType === 'collect' ? '本子' : '视频'}}历史</span>
     <div  v-show="loadComplete" class="load_complete">
-      <el-table :data="galleryTasks" v-show="isShowGalleryHistory">
+      <el-table :data="currentTasks" v-show="showType === 'gallery'" :empty-text="emptyText" :row-key="gallery=>gallery.gid">
 
         <el-table-column type="expand">
           <template #default="props">
@@ -28,7 +28,7 @@
         <el-table-column label="名字" width="300vw">
           <template #default="scoped">
             <span @mouseover="showThumbnail(scoped.row)">
-                {{showNameType === 'shortName' ? scoped.row.shortName: scoped.row.name}}
+                {{galleryNameType === 'shortName' ? scoped.row.shortName: scoped.row.name}}
             </span>
           </template>
         </el-table-column>
@@ -49,7 +49,7 @@
           </template>
         </el-table-column>
       </el-table>
-      <el-table :data="videoTasks" v-show="isShowVideoHistory">
+      <el-table :data="currentTasks" v-show="showType === 'video'" :empty-text="emptyText" :row-key="video=>video.id">
         <el-table-column type="expand">
           <template #default="props">
             名字:{{props.row.name}}     <br>
@@ -94,20 +94,33 @@
 
       <el-row class="pageChanger">
         <el-col>
-          筛选:<el-select v-model="showType" @change="changeShowType" class="el-select">
+          <el-select v-model="showType" @change="changeShowType" class="el-select" style="width: 75px">
             <el-option value="gallery" label="本子"/>
             <el-option value="video" label="视频"/>
-            <el-option value="collect" label="收藏"/>
-         </el-select>
-          排列顺序:<el-select v-model="sortType" @change="changeSortType">
-            <el-option value="name" label="名字"/>
-            <el-option value="shortName" label="简洁名字"/>
-            <el-option value="createTime" label="任务创建时间"/>
-          </el-select>
-          显示:<el-select v-model="showNameType" @change="changeShowNameType">
-            <el-option value="name" label="名字"/>
-            <el-option value="shortName" label="简洁名字"/>
           </el-select>
+          <el-select v-model="category" @change="changeCategory">
+            <template #prefix>
+              分类
+            </template>
+                <el-option value="myCollect" label="我的收藏"/>
+                <el-option value="myDownload" label="我的下载"/>
+                <el-option value="total" label="全部"/>
+              </el-select>
+          <el-select v-model="sortType" @change="changeSortType" style="width: 170px">
+              <template #prefix>
+                排序
+              </template>
+                <el-option value="name" label="名字"/>
+                <el-option value="shortName" label="简洁名字" v-show="showType === 'gallery'"/>
+                <el-option value="createTime" label="任务创建时间"/>
+              </el-select>
+          <el-select v-model="galleryNameType" @change="changeGalleryNameType" v-show="showType === 'gallery'">
+              <template #prefix>
+                显示
+              </template>
+                  <el-option value="name" label="名字"/>
+                  <el-option value="shortName" label="简洁名字"/>
+              </el-select>
         </el-col>
         <el-col>
           <el-button @click="toMin">{{min}}</el-button>
@@ -141,8 +154,8 @@
       </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-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>
@@ -180,10 +193,13 @@ let tempTag = ref("")
 let tempGid = ref("")
 let tempId = ref("")
 
-let showNameType = ref("shortName")     // shortName name
-let showType = ref("gallery")           // gallery video collect
-let sortType = ref("shortName")         // shortName name createTime
-let targetPage = ref(1)                 // 当前页数
+let category = ref("myDownload")            //myDownload myCollect total
+let galleryNameType = ref("shortName")      // shortName name
+let showType = ref("gallery")               // gallery video collect
+let sortType = ref("shortName")             // shortName name createTime
+let targetPage = ref(1)                     // 当前页数
+
+let onlineReadingScrollbar = ref(null)
 
 //防抖计时器
 let debounceTimer = 0
@@ -192,18 +208,8 @@ let loadComplete = computed(() => {
   return store.state.loadComplete
 })
 
-let galleryTasks = computed(() => {
-    return store.getters.galleryTasks ? store.getters.galleryTasks: null
-})
-let videoTasks = computed(() => {
-    return store.getters.videoTasks ? store.getters.videoTasks: null
-})
-
-let isShowVideoHistory = computed(() => {
-  return store.state.showType === "video"
-})
-let isShowGalleryHistory = computed(() => {
-  return store.state.showType === "gallery" || store.state.showType === "collect"
+let currentTasks = computed(() => {
+  return store.getters.currentTasks ? store.getters.currentTasks: null
 })
 let isOnlineReading = computed(() => {
   return store.state.isOnlineReading
@@ -225,6 +231,12 @@ let isLion = computed(() => {
   return store.state.userId === 3
 })
 
+let emptyText = computed(() => {
+  let type = showType.value === 'gallery' ? '本子': '视频'
+  let action = category.value === 'myDownload' ? '下载': '收藏'
+  return '您未' + action + type
+})
+
 //在线预览相关
 let currentLinks = computed(() => {
   return store.state.currentLinks
@@ -270,24 +282,19 @@ function reverseEditMode(){
 }
 
 //改变展示类型
+function changeCategory(){
+  store.commit("_setCategory", category.value)
+}
 function changeShowType(){
+  if(showType.value === 'video')
+    sortType.value = 'name'
   store.commit("_setShowType", showType.value)
 }
-function changeShowNameType(){
-  store.commit("_setShowNameType", showNameType.value)
-
-  if(showNameType.value !== sortType.value){
-    store.commit("_setSortType", showNameType.value)
-    sortType.value = showNameType.value
-  }
+function changeGalleryNameType(){
+  store.commit("_setShowNameType", galleryNameType.value)
 }
 function changeSortType(){
   store.commit("_setSortType", sortType.value)
-
-  if(sortType.value !== showNameType.value && sortType.value !== "createTime") {
-    store.commit("_setShowNameType", sortType.value)
-    showNameType.value = sortType.value
-  }
 }
 
 //收藏,编辑标签,提交编辑
@@ -314,7 +321,7 @@ function editVideoTag(id, tag){
   isEditingTag.value = true
 }
 function submitGalleryTag(){
-  store.dispatch("updateTag", {gid:tempGid.value, tag:tempTag.value})
+  store.dispatch("updateGalleryTag", {gid:tempGid.value, tag:tempTag.value})
   tempTag.value = ''
   tempGid.value = ''
   isEditingTag.value = false
@@ -342,8 +349,9 @@ function deleteVideo(id){
 function onlineGalleryReader(gid){
   store.dispatch("queryOnlineLinks", gid)
 }
-function closeOnlineReader(){
+function closeOnlineReading(){
   store.state.isOnlineReading = false
+  onlineReadingScrollbar.value.setScrollTop(0)
 }
 function shareGallery(data){
   const {gid, shortName} = data
@@ -401,7 +409,7 @@ function showThumbnail(gallery){
     margin-top: 5vh;
   }
   .el-select{
-    width: 125px;
+    width: 135px;
   }
   .page{
     display: inline-block;