增加速率限制页面，tag标签可拖拽

src/layout/components/TagsView/index.vue

@@ -1,22 +1,25 @@
 <template>
   <div id="tags-view-container" class="tags-view-container">
     <scroll-pane ref="scrollPaneRef" class="tags-view-wrapper" @scroll="handleScroll">
-      <router-link
-        v-for="tag in visitedViews"
-        :key="tag.path"
-        :data-path="tag.path"
-        :class="{ active: isActive(tag) }"
-        :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
-        class="tags-view-item"
-        :style="activeStyle(tag)"
-        @click.middle="!isAffix(tag) ? closeSelectedTag(tag) : ''"
-        @contextmenu.prevent="openMenu(tag, $event)">
-        <span v-if="tag.meta && tag.meta.titleKey">{{ $t(tag.meta.titleKey) }}</span>
-        <span v-else>{{ tag.title }}</span>
-        <span v-if="!isAffix(tag)" @click.prevent.stop="closeSelectedTag(tag)" style="width: 10px; height: 10px; display: inline-block">
-          <close class="el-icon-close close" style="width: 1em; height: 1em; vertical-align: middle" />
-        </span>
-      </router-link>
+      <TransitionGroup type="transition" name="fade">
+        <router-link
+          v-for="tag in visitedViews"
+          :key="tag.path"
+          :data-path="tag.path"
+          :class="{ active: isActive(tag) }"
+          :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
+          class="tags-view-item"
+          :style="activeStyle(tag)"
+          @click.middle="!isAffix(tag) ? closeSelectedTag(tag) : ''"
+          @contextmenu.prevent="openMenu(tag, $event)">
+          <span v-if="tag.meta && tag.meta.titleKey">{{ $t(tag.meta.titleKey) }}</span>
+          <span v-else>{{ tag.title }}</span>
+          <span v-if="!isAffix(tag)" @click.prevent.stop="closeSelectedTag(tag)" style="width: 10px; height: 10px; display: inline-block">
+            <close class="el-icon-close close" style="width: 1em; height: 1em; vertical-align: middle" />
+          </span>
+        </router-link>
+        <div key="default" />
+      </TransitionGroup>
     </scroll-pane>
     <ul v-show="visible" :style="{ left: left + 'px', top: top + 'px' }" class="contextmenu">
       <li @click="refreshSelectedTag(selectedTag)" v-if="isActive(selectedTag)">
@@ -41,6 +44,7 @@ import useTagsViewStore from '@/store/modules/tagsView'
 // import useSettingsStore from '@/store/modules/settings'
 import usePermissionStore from '@/store/modules/permission'
 import { isHttp } from '@/utils/validate'
+import Sortable from 'sortablejs'
 const visible = ref(false)
 const top = ref(0)
 const left = ref(0)
@@ -56,6 +60,13 @@ const visitedViews = computed(() => useTagsViewStore().visitedViews)
 const routes = computed(() => usePermissionStore().routes)
 // const theme = computed(() => useSettingsStore().theme);
 
+const visitedViewsSort = () => {
+  const routerLinkBody = document.querySelector('.tags-view-wrapper .el-scrollbar__wrap .el-scrollbar__view')
+  Sortable.create(routerLinkBody, {
+    animation: 150
+  })
+}
+
 watch(route, () => {
   addTags()
   moveToCurrentTag()
@@ -70,6 +81,7 @@ watch(visible, (value) => {
 onMounted(() => {
   initTags()
   addTags()
+  visitedViewsSort()
 })
 
 function isActive(r) {
@@ -265,7 +277,7 @@ function handleScroll() {
         margin-right: 15px;
       }
       &:hover {
-        background-color: var(--el-color-primary);
+        background-color: var(--el-color-info-light-5);
         color: #fff;
         .close {
           display: inline-block !important;
@@ -341,4 +353,17 @@ function handleScroll() {
     }
   }
 }
+
+.fade-move,
+.fade-enter-active,
+.fade-leave-active {
+  transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1) 0s;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  pointer-events: none;
+  opacity: 0;
+  transform: scaleY(0.01) translate(30px, 0);
+}
 </style>