fix: 修改TagsView样式问题

src/layout/components/TagsView/index.vue

@@ -2,8 +2,8 @@
   <div
     class="box-border tabs-view"
     :class="{
-      'tabs-view-fix': state.multiTabsSetting.fixed,
+      'tabs-view-fix': multiTabsSetting.fixed,
-      'tabs-view-fixed-header': state.isMultiHeaderFixed,
+      'tabs-view-fixed-header': isMultiHeaderFixed,
       'tabs-view-default-background': getDarkTheme === false,
       'tabs-view-dark-background': getDarkTheme === true,
     }"
@@ -13,11 +13,11 @@
       <div
         ref="navWrap"
         class="tabs-card"
-        :class="{ 'tabs-card-scrollable': state.scrollable }"
+        :class="{ 'tabs-card-scrollable': scrollable }"
       >
         <span
           class="tabs-card-prev"
-          :class="{ 'tabs-card-prev-hide': !state.scrollable }"
+          :class="{ 'tabs-card-prev-hide': !scrollable }"
           @click="scrollPrev"
         >
           <n-icon size="16" color="#515a6e">
@@ -26,7 +26,7 @@
         </span>
         <span
           class="tabs-card-next"
-          :class="{ 'tabs-card-next-hide': !state.scrollable }"
+          :class="{ 'tabs-card-next-hide': !scrollable }"
           @click="scrollNext"
         >
           <n-icon size="16" color="#515a6e">
@@ -44,7 +44,7 @@
               <div
                 :id="`tag${element.fullPath.split('/').join('\/')}`"
                 class="tabs-card-scroll-item"
-                :class="{ 'active-item': state.activeKey === element.fullPath }"
+                :class="{ 'active-item': activeKey === element.fullPath }"
                 @click.stop="goPage(element)"
                 @contextmenu="handleContextMenu($event, element)"
               >
@@ -76,9 +76,9 @@
         </n-dropdown>
       </div>
       <n-dropdown
-        :show="state.showDropdown"
+        :show="showDropdown"
-        :x="state.dropdownX"
+        :x="dropdownX"
-        :y="state.dropdownY"
+        :y="dropdownY"
         @clickoutside="onClickOutside"
         placement="bottom-start"
         @select="closeHandleSelect"
@@ -88,13 +88,26 @@
   </div>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts">
+import {
+  defineComponent,
+  reactive,
+  computed,
+  ref,
+  toRefs,
+  provide,
+  watch,
+  onMounted,
+  nextTick,
+} from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { storage } from '@/utils';
+import { StorageEnum } from '@/enums/storageEnum';
 import { useTabsViewStore } from '@/store/modules/tabsView';
 import { useAsyncRouteStore } from '@/store/modules/asyncRoute';
 import { RouteItem } from '@/store/modules/tabsView';
 import { useProjectSetting } from '@/hooks/setting/useProjectSetting';
+import { useMessage } from 'naive-ui';
 import Draggable from 'vuedraggable';
 import { PageEnum } from '@/enums/pageEnum';
 import {
@@ -107,22 +120,33 @@ import {
   RightOutlined,
 } from '@vicons/antd';
 import { renderIcon } from '@/utils';
-// import elementResizeDetectorMaker from "element-resize-detector";
+// import elementResizeDetectorMaker from 'element-resize-detector';
 import { useDesignSetting } from '@/hooks/setting/useDesignSetting';
 import { useProjectSettingStore } from '@/store/modules/projectSetting';
 import { useThemeVars } from 'naive-ui';
 import { useGo } from '@/hooks/web/usePage';
-import { StorageEnum } from '@/enums/storageEnum';
+
-const props = defineProps({
+export default defineComponent({
+  name: 'TabsView',
+  components: {
+    DownOutlined,
+    CloseOutlined,
+    LeftOutlined,
+    RightOutlined,
+    Draggable,
+  },
+  props: {
     collapsed: {
       type: Boolean,
     },
-});
+  },
+  setup(props) {
     const { getDarkTheme, getAppTheme } = useDesignSetting();
     const { navMode, headerSetting, menuSetting, multiTabsSetting, isMobile } =
       useProjectSetting();
     const settingStore = useProjectSettingStore();
 
+    const message = useMessage();
     const route = useRoute();
     const router = useRouter();
     const tabsViewStore = useTabsViewStore();
@@ -134,11 +158,11 @@ const go = useGo();
 
     const themeVars = useThemeVars();
 
-const getCardColor = computed(() => {
+    const getcardcolor = computed(() => {
       return themeVars.value.cardColor;
     });
 
-const getBaseColor = computed(() => {
+    const getbasecolor = computed(() => {
       return themeVars.value.textColor1;
     });
 
@@ -304,13 +328,14 @@ window.addEventListener('beforeunload', () => {
     // 关闭当前页面
     const removeTab = (route) => {
       if (tabsList.value.length === 1) {
-    return window['$message'].warning('这已经是最后一页，不能再关闭了！');
+        return message.warning('这已经是最后一页，不能再关闭了！');
       }
       delKeepAliveCompName();
       tabsViewStore.closeCurrentTab(route);
       // 如果关闭的是当前页
       if (state.activeKey === route.fullPath) {
-    const currentRoute = tabsList.value[Math.max(0, tabsList.value.length - 1)];
+        const currentRoute =
+          tabsList.value[Math.max(0, tabsList.value.length - 1)];
         state.activeKey = currentRoute.fullPath;
         router.push(currentRoute);
       }
@@ -478,7 +503,9 @@ function goPage(e) {
     //删除tab
     function closeTabItem(e) {
       const { fullPath } = e;
-  const routeInfo = tabsList.value.find((item) => item.fullPath == fullPath);
+      const routeInfo = tabsList.value.find(
+        (item) => item.fullPath == fullPath
+      );
       removeTab(routeInfo);
     }
 
@@ -491,6 +518,34 @@ onMounted(() => {
     //   observer = elementResizeDetectorMaker();
     //   observer.listenTo(navWrap.value, handleResize);
     // }
+
+    return {
+      ...toRefs(state),
+      navWrap,
+      navScroll,
+      route,
+      tabsList,
+      goPage,
+      closeTabItem,
+      closeLeft,
+      closeRight,
+      closeOther,
+      closeAll,
+      reloadPage,
+      getChangeStyle,
+      TabsMenuOptions,
+      closeHandleSelect,
+      scrollNext,
+      scrollPrev,
+      handleContextMenu,
+      onClickOutside,
+      getDarkTheme,
+      getAppTheme,
+      getcardcolor,
+      getbasecolor,
+    };
+  },
+});
 </script>
 
 <style lang="scss" scoped>