侧边栏添加标签列表

src/components/ShowFile/ShowFile.vue

@@ -2746,6 +2746,7 @@ export default {
           order: this.sortable.order,
           isFolder: this.queryCondition.isFolder,
           isFavorite: this.queryCondition.isFavorite,
+          tagId: this.queryCondition.tagId,
           queryCondition: this.queryCondition,
           pageIndex: this.pagination.pageIndex,
           pageSize: this.pagination.pageSize

src/components/SvgIcon/index.vue

@@ -19,6 +19,10 @@ export default {
     className: {
       type: String,
       default: ''
+    },
+    slot: {
+      type: String,
+      default: ''
     }
   },
   computed: {

src/layout/components/Sidebar/index.vue

@@ -1,31 +1,59 @@
 <template>
   <div :class="{'has-logo':showLogo}">
-    <logo v-if="showLogo" :collapse="isCollapse" />
+    <div class="scrollbar-head">
-    <el-scrollbar wrap-class="scrollbar-wrapper">
+      <logo v-if="showLogo" :collapse="isCollapse" />
-      <el-menu
+      <el-scrollbar wrap-class="scrollbar-wrapper">
-        :default-active="activeMenu"
+        <el-menu
-        :collapse="isCollapse"
+          :default-active="activeMenu"
-        :background-color="variables.menuBg"
+          :collapse="isCollapse"
-        :text-color="variables.menuText"
+          :background-color="variables.menuBg"
-        :unique-opened="false"
+          :text-color="variables.menuText"
-        :active-text-color="variables.menuActiveText"
+          :unique-opened="false"
-        :collapse-transition="false"
+          :active-text-color="variables.menuActiveText"
-        mode="vertical"
+          :collapse-transition="false"
-      >
+          mode="vertical"
-        <sidebar-item v-for="route in routes" :key="route.path" :item="route" :base-path="route.path" />
+        >
-      </el-menu>
+          <sidebar-item v-for="route in routes" :key="route.path" :item="route" :base-path="route.path" />
-    </el-scrollbar>
+        </el-menu>
-    <div class="quota-space">
+      </el-scrollbar>
-      <el-progress v-show="percentage > 0" :class="{'collapse': isCollapse}" :percentage="percentage" :format="progressFormat" :color="customColors"></el-progress>
     </div>
-    <div class="webdav">
+    <div class="scrollbar-tag" :class="{'collapse': isCollapse}">标签</div>
-      <div :class="{'normal': true, 'collapse': isCollapse}" @mousemove="showCopyBtn = true" @mouseleave="showCopyBtn = false">
+    <div class="scroll-decoration-top"></div>
-        <svg-icon class="webdav-icon" icon-class="disk-drive"></svg-icon>
+    <el-scrollbar class="tag-list" wrap-class="scrollbar-wrapper">
-        <div class="wedav-text">WebDAV   </div>
+        <div v-if="isCollapse">
-        <el-tooltip placement="right" v-if="showCopyBtn">
+          <ul class="infinite-list">
-          <div slot="content">点击复制WebDAV地址<br/>{{webdavUrl}}</div>
+            <el-tooltip class="item" effect="dark" :content="tag.name" placement="right" v-for="tag in tagList" :key="tag.tagId">
-          <svg-icon class="copy-btn" icon-class="menu-fuzhi" @click="copyWebDAVLink('.copy-btn')" :data-clipboard-text="webdavUrl"></svg-icon>
+              <li class="infinite-list-item collapse">
-        </el-tooltip>
+                <svg-icon :style="{ color: tag.color, fontSize: '14px' }" icon-class="tag2"></svg-icon>
+              </li>
+            </el-tooltip>
+          </ul>
+        </div>
+        <div v-else>
+          <ul class="infinite-list">
+              <li v-for="tag in tagList" :key="tag.id" class="infinite-list-item">
+                <router-link :to="'/tag?tagId=' + tag.id" @click.native="tagClick(tag)">
+                  <svg-icon :style="{ color: tag.color, fontSize: '14px' }" icon-class="tag2"></svg-icon>
+                  <span>{{ tag.name }}</span>
+                </router-link>
+              </li>
+          </ul>
+        </div>
+    </el-scrollbar>
+    <div class="scroll-decoration-bottom"></div>
+    <div class="scrollbar-footer">
+      <div class="quota-space">
+        <el-progress v-show="percentage > 0" :class="{'collapse': isCollapse}" :percentage="percentage" :format="progressFormat" :color="customColors"></el-progress>
+      </div>
+      <div class="webdav">
+        <div :class="{'normal': true, 'collapse': isCollapse}" @mousemove="showCopyBtn = true" @mouseleave="showCopyBtn = false">
+          <svg-icon class="webdav-icon" icon-class="disk-drive"></svg-icon>
+          <div class="wedav-text">WebDAV   </div>
+          <el-tooltip placement="right" v-if="showCopyBtn">
+            <div slot="content">点击复制WebDAV地址<br/>{{webdavUrl}}</div>
+            <svg-icon class="copy-btn" icon-class="menu-fuzhi" @click="copyWebDAVLink('.copy-btn')" :data-clipboard-text="webdavUrl"></svg-icon>
+          </el-tooltip>
+        </div>
       </div>
     </div>
   </div>
@@ -40,9 +68,11 @@ import variables from '@/styles/variables.scss'
 import {formatSize} from "@/utils/number";
 import fileConfig from "@/utils/file-config";
 import Clipboard from "clipboard";
+import tagApi from '@/api/tag'
+import AppLink from './Link'
 
 export default {
-  components: { SidebarItem, Logo },
+  components: { SidebarItem, Logo, AppLink },
   data() {
     return {
       percentage: 0,
@@ -56,6 +86,7 @@ export default {
       ],
       showCopyBtn: false,
       takeUpSpace: 0,
+      tagList: [],
     }
   },
   computed: {
@@ -87,7 +118,6 @@ export default {
     activeMenu() {
       const route = this.$route
       const { meta, path } = route
-      // if set path, the sidebar will highlight the path you set
       if (meta.activeMenu) {
         return meta.activeMenu
       }
@@ -108,6 +138,10 @@ export default {
     }
   },
   mounted() {
+    tagApi.tagList({userId: this.$store.state.user.userId,}).then(res => {
+      this.tagList = res.data
+      console.log(this.tagList)
+    })
     Bus.$on('msg/file/change', (msg) => this.onmessage(msg))
   },
   methods: {
@@ -133,6 +167,10 @@ export default {
         clipboard.destroy()
       })
     },
+    tagClick(tag) {
+      console.log('tagClick', tag.tagId)
+      Bus.$emit('tagPageChange', tag.tagId)
+    },
     mouseleave() {
     },
     onmousemove() {
@@ -158,8 +196,63 @@ export default {
 </script>
 <style lang="scss" scoped>
 .sidebar-container.has-logo {
-  >>>.el-scrollbar {
+  display: flex;
-    height: calc(100% - 132px) !important;
+  flex-direction: column;
+  height: 100%;
+  .scrollbar-tag {
+    height: 30px;
+    line-height: 30px;
+    padding-left: 20px;
+    font-size: 14px;
+    font-weight: 900;
+    color: #a4a4a4;
+  }
+  .scrollbar-tag.collapse {
+    padding-left: unset;
+    text-align: center;
+  }
+  .tag-list {
+    overflow-y: auto;
+    flex: 1;
+    .infinite-list {
+      padding: 0;
+      margin: 0;
+      list-style: none;
+    }
+    .infinite-list-item {
+      height: 30px;
+      line-height: 30px;
+      padding-left: 10px;
+      font-size: 14px;
+      color: #606266;
+      cursor: pointer;
+      margin: 0 8px 0 8px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      .svg-icon {
+        margin-right: 5px !important;
+      }
+      &:hover {
+        background-color: #d9d9d9 !important;
+        border-radius: 4px;
+      }
+    }
+    .infinite-list-item.collapse {
+      padding-left: unset;
+      text-align: center;
+      .svg-icon {
+        margin-right: unset !important;
+      }
+    }
+  }
+  .scrollbar-footer {
+    margin-top: 15px;
+  }
+}
+.scrollbar-head {
+  .el-scrollbar {
+    padding-bottom: 15px;
   }
 }
 .quota-space {

src/router/index.js

@@ -41,7 +41,6 @@ export const constantRoutes = [
     component: () => import('@/views/login/index'),
     hidden: true
   },
-
   {
     path: '/404',
     component: () => import('@/views/404'),
@@ -85,6 +84,18 @@ export const dynamicRouters = [
         component: () => import('@/views/public/share/shareList'),
       }
     ]
+  },
+  {
+    path: '/tag',
+    component: Layout,
+    children: [
+      {
+        path: '',
+        name: 'tag',
+        component: () => import('@/views/tag/index'),
+        meta: { title: '标签', menuType: 0, keepAlive: false }
+      }
+    ]
   }
 ]
 

src/styles/sidebar.scss

@@ -34,12 +34,12 @@
     }
 
     .el-scrollbar {
-      height: 100%;
+      //height: 100%;
     }
 
     &.has-logo {
       .el-scrollbar {
-        height: calc(100% - 50px);
+       // height: calc(100% - 50px);
       }
     }
 

src/styles/variables.scss

@@ -9,7 +9,7 @@ $menuHover:#d9d9d9;
 $subMenuBg:#f5f5f5;
 $subMenuHover:#d9d9d9;
 
-$sideBarWidth: 210px;
+$sideBarWidth: 150px;
 
 // the :export directive is the magic sauce for webpack
 // https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass

src/views/tag/index.vue

@@ -0,0 +1,46 @@
+<template>
+  <div>
+    <show-file
+      :defaultGrid="true"
+      :sortable="sortable"
+      :orderCustom="true"
+      :defaultSort="sortable"
+      :queryCondition="queryCondition"
+    >
+    </show-file>
+  </div>
+</template>
+
+<script>
+import ShowFile from "@/components/ShowFile/ShowFile";
+import Bus from "@/assets/js/bus";
+
+export default {
+  components: {ShowFile},
+  data() {
+    return {
+      sortable: {
+        prop: 'updateDate', order: 'descending'
+      },
+      queryCondition: {
+        tagId: undefined,
+      }
+    }
+  },
+  mounted() {
+    console.log('tag mounted')
+    if (this.$route.query.tagId) {
+      this.queryCondition.tagId = this.$route.query.tagId
+    }
+    Bus.$on('tagPageChange', (tagId) => {
+      console.log('tagPageChange', tagId)
+      this.queryCondition.tagId = tagId
+    })
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>
+