refactor: 系统管理页面重构和ts类型声明优化

Former-commit-id: 40263bbb072596ada41ef33d9170841e7e66cd01

src/layout/components/TagsView/ScrollPane.vue

@@ -15,9 +15,9 @@ import {
   computed,
   onMounted,
   onBeforeUnmount,
-  getCurrentInstance
+  getCurrentInstance,
 } from 'vue';
-import { TagView } from '@/types';
+import { TagView } from '@/types/store/tagsview';
 import useStore from '@/store';
 
 const tagAndTagSpacing = ref(4);
@@ -25,8 +25,8 @@ const { proxy } = getCurrentInstance() as any;
 
 const emits = defineEmits(['scroll']);
 const emitScroll = () => {
-  emits('scroll')
-}
+  emits('scroll');
+};
 
 const { tagsView } = useStore();
 
@@ -35,12 +35,11 @@ const visitedViews = computed(() => tagsView.visitedViews);
 const scrollWrapper = computed(() => proxy?.$refs.scrollContainer.$refs.wrap$);
 
 onMounted(() => {
-  scrollWrapper.value.addEventListener('scroll', emitScroll, {passive:true})
-})
+  scrollWrapper.value.addEventListener('scroll', emitScroll, true);
+});
 onBeforeUnmount(() => {
-  scrollWrapper.value.removeEventListener('scroll', emitScroll)
-})
-
+  scrollWrapper.value.removeEventListener('scroll', emitScroll);
+});
 
 function handleScroll(e: WheelEvent) {
   const eventDelta = (e as any).wheelDelta || -e.deltaY * 40;
@@ -69,7 +68,7 @@ function moveToTarget(currentTag: TagView) {
   } else {
     const tagListDom = document.getElementsByClassName('tags-view__item');
     const currentIndex = visitedViews.value.findIndex(
-      item => item === currentTag
+      (item) => item === currentTag
     );
     let prevTag = null;
     let nextTag = null;
@@ -81,7 +80,8 @@ function moveToTarget(currentTag: TagView) {
         ) {
           prevTag = tagListDom[k];
         }
-        if ((tagListDom[k] as any).dataset.path ===
+        if (
+          (tagListDom[k] as any).dataset.path ===
           visitedViews.value[currentIndex + 1].path
         ) {
           nextTag = tagListDom[k];
@@ -107,7 +107,7 @@ function moveToTarget(currentTag: TagView) {
 }
 
 defineExpose({
-  moveToTarget
+  moveToTarget,
 });
 </script>
 

src/layout/components/TagsView/index.vue

@@ -65,13 +65,14 @@ import {
   nextTick,
   ref,
   watch,
-  onMounted
+  onMounted,
+  ComponentInternalInstance,
 } from 'vue';
 
 import path from 'path-browserify';
 
 import { RouteRecordRaw, useRoute, useRouter } from 'vue-router';
-import { TagView } from '@/types';
+import { TagView } from '@/types/store/tagsview';
 
 import ScrollPane from './ScrollPane.vue';
 import SvgIcon from '@/components/SvgIcon/index.vue';
@@ -80,7 +81,7 @@ import useStore from '@/store';
 
 const { tagsView, permission } = useStore();
 
-const { proxy } = getCurrentInstance() as any;
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const router = useRouter();
 const route = useRoute();
 
@@ -102,13 +103,13 @@ watch(
   },
   {
     //初始化立即执行
-    immediate: true
+    immediate: true,
   }
 );
 
-watch(visible, value => {
+watch(visible, (value) => {
   if (value) {
-    document.body.addEventListener('click', closeMenu, {passive:true});
+    document.body.addEventListener('click', closeMenu);
   } else {
     document.body.removeEventListener('click', closeMenu);
   }
@@ -117,14 +118,14 @@ watch(visible, value => {
 function filterAffixTags(routes: RouteRecordRaw[], basePath = '/') {
   let tags: TagView[] = [];
 
-  routes.forEach(route => {
+  routes.forEach((route) => {
     if (route.meta && route.meta.affix) {
       const tagPath = path.resolve(basePath, route.path);
       tags.push({
         fullPath: tagPath,
         path: tagPath,
         name: route.name,
-        meta: { ...route.meta }
+        meta: { ...route.meta },
       });
     }
 
@@ -166,7 +167,7 @@ function moveToCurrentTag() {
         }
       }
     }
-  })
+  });
 }
 
 function isActive(tag: TagView) {
@@ -204,7 +205,7 @@ function refreshSelectedTag(view: TagView) {
   tagsView.delCachedView(view);
   const { fullPath } = view;
   nextTick(() => {
-    router.replace({ path: '/redirect' + fullPath }).catch(err => {
+    router.replace({ path: '/redirect' + fullPath }).catch((err) => {
       console.warn(err);
     });
   });
@@ -254,7 +255,7 @@ function closeRightTags() {
 }
 
 function closeOtherTags() {
-  router.push(selectedTag.value)
+  router.push(selectedTag.value);
   tagsView.delOtherViews(selectedTag.value).then(() => {
     moveToCurrentTag();
   });
@@ -333,8 +334,19 @@ onMounted(() => {
       }
 
       &.active {
-        background-color: var(--el-color-primary-light-9);
-        color: var(--el-color-primary);
+        background-color: var(--el-color-primary);
+        color: var(--el-color-primary-light-9);
+        border-color: var(--el-color-primary);
+        &::before {
+          content: '';
+          background: #fff;
+          display: inline-block;
+          width: 8px;
+          height: 8px;
+          border-radius: 50%;
+          position: relative;
+          margin-right: 5px;
+        }
       }
 
       .icon-close {