refactor: ♻️ 完善 typescript 类型，重构代码

Former-commit-id: 5ac4e273aaab2b068e28da5146f516da80a8852b

src/layout/components/TagsView/index.vue

@@ -79,6 +79,7 @@ const tagsViewStore = useTagsViewStore();
 const appStore = useAppStore();
 
 const { visitedViews } = storeToRefs(tagsViewStore);
+console.log("visitedViews", visitedViews);
 const settingsStore = useSettingsStore();
 const layout = computed(() => settingsStore.layout);
 
@@ -141,11 +142,14 @@ function filterAffixTags(routes: RouteRecordRaw[], basePath = "/") {
   let tags: TagView[] = [];
   routes.forEach(processRoute);
 
+  console.log("filterAffixTags", tags);
+
   return tags;
 }
 
 function initTags() {
   const tags: TagView[] = filterAffixTags(permissionStore.routes);
+  console.log("initTags", tags);
   affixTags.value = tags;
   for (const tag of tags) {
     // Must have tag name
@@ -156,6 +160,7 @@ function initTags() {
 }
 
 function addTags() {
+  console.log("addTags", visitedViews);
   if (route.meta.title) {
     tagsViewStore.addView({
       name: route.name as string,
@@ -169,13 +174,14 @@ function addTags() {
 }
 
 function moveToCurrentTag() {
+  console.log("moveToCurrentTag", visitedViews);
   // 使用 nextTick() 的目的是确保在更新 tagsView 组件之前，scrollPaneRef 对象已经滚动到了正确的位置。
   nextTick(() => {
     for (const tag of visitedViews.value) {
       if (tag.path === route.path) {
         scrollPaneRef.value.moveToTarget(tag);
         // when query is different then update
-        route.query = { ...route.query, ...tag.query };
+        // route.query = { ...route.query, ...tag.query };
         if (tag.fullPath !== route.fullPath) {
           tagsViewStore.updateVisitedView({
             name: route.name as string,

src/layout/index.vue

@@ -80,31 +80,30 @@ function toggleSideBar() {
 
 <template>
   <div :class="classObj" class="app-wrapper">
-    <el-watermark content="vue3-element-admin">
-      <!-- 手机设备侧边栏打开遮罩层 -->
-      <div
-        v-if="classObj.mobile && classObj.openSidebar"
-        class="drawer-bg"
-        @click="handleOutsideClick"
-      ></div>
+    <!-- 手机设备侧边栏打开遮罩层 -->
+    <div
+      v-if="classObj.mobile && classObj.openSidebar"
+      class="drawer__background"
+      @click="handleOutsideClick"
+    ></div>
 
-      <Sidebar class="sidebar-container" />
-      <template v-if="layout === 'mix'">
-        <div class="mix-wrap">
-          <div class="left-wrap">
-            <LeftMenu :menu-list="mixLeftMenu" :base-path="activeTopMenu" />
-            <div class="menu-action">
-              <hamburger
-                :is-active="appStore.sidebar.opened"
-                @toggle-click="toggleSideBar"
-              />
-            </div>
-          </div>
-          <Main />
+    <Sidebar class="sidebar-container" />
+
+    <div v-if="layout === 'mix'" class="mix-wrapper">
+      <div class="mix-wrapper__left">
+        <LeftMenu :menu-list="mixLeftMenu" :base-path="activeTopMenu" />
+        <!-- 展开/收缩侧边栏菜单 -->
+        <div class="toggle-sidebar">
+          <hamburger
+            :is-active="appStore.sidebar.opened"
+            @toggle-click="toggleSideBar"
+          />
         </div>
-      </template>
-      <Main v-else />
-    </el-watermark>
+      </div>
+      <Main />
+    </div>
+
+    <Main v-else />
   </div>
 </template>
 
@@ -126,7 +125,7 @@ function toggleSideBar() {
   }
 }
 
-.drawer-bg {
+.drawer__background {
   position: absolute;
   top: 0;
   z-index: 999;
@@ -177,12 +176,12 @@ function toggleSideBar() {
     margin-left: 0;
   }
 
-  .mix-wrap {
+  .mix-wrapper {
     display: flex;
     height: 100%;
     padding-top: 50px;
 
-    .left-wrap {
+    .mix-wrapper__left {
       position: relative;
       height: 100%;
 
@@ -190,7 +189,7 @@ function toggleSideBar() {
         height: 100%;
       }
 
-      .menu-action {
+      .toggle-sidebar {
         position: absolute;
         bottom: 0;
         display: flex;
@@ -219,8 +218,8 @@ function toggleSideBar() {
 }
 
 .openSidebar {
-  .mix-wrap {
-    .left-wrap {
+  .mix-wrapper {
+    .mix-wrapper__left {
       width: $sideBarWidth;
     }