From 7bf1e1265a5a9fef91e4a3acff0c94160b18718a Mon Sep 17 00:00:00 2001
From: Maybe_QHL <1013480204@qq.com>
Date: Mon, 7 Mar 2022 17:40:17 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E5=9C=A8=E7=A7=BB?=
 =?UTF-8?q?=E5=8A=A8=E7=AB=AF=E6=A8=A1=E5=BC=8F=E4=B8=8Btags=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA=E7=9A=84bug=20=20update:=20=E7=A7=BB=E5=8A=A8?=
 =?UTF-8?q?=E7=AB=AF=E6=A8=A1=E5=BC=8F=E4=B8=8B=E4=BE=A7=E8=BE=B9=E8=8F=9C?=
 =?UTF-8?q?=E5=8D=95item=E7=82=B9=E5=87=BB=E9=9A=90=E8=97=8Fdrawer.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hooks/setting/useProjectSetting.ts   |    3 +
 src/layout/components/Menu/index.vue     |  273 +++---
 src/layout/components/TagsView/index.vue | 1085 +++++++++++-----------
 src/layout/index.vue                     |    8 +-
 src/settings/projectSetting.ts           |    2 +
 src/store/modules/projectSetting.ts      |    9 +
 6 files changed, 702 insertions(+), 678 deletions(-)

diff --git a/src/hooks/setting/useProjectSetting.ts b/src/hooks/setting/useProjectSetting.ts
index 7b7bec3..1a08980 100644
--- a/src/hooks/setting/useProjectSetting.ts
+++ b/src/hooks/setting/useProjectSetting.ts
@@ -8,6 +8,8 @@ export function useProjectSetting() {
 
   const getNavTheme = computed(() => projectStore.navTheme);
 
+  const getIsMobile = computed(() => projectStore.isMobile);
+
   const getHeaderSetting = computed(() => projectStore.headerSetting);
 
   const getMultiTabsSetting = computed(() => projectStore.multiTabsSetting);
@@ -27,6 +29,7 @@ export function useProjectSetting() {
   return {
     getNavMode,
     getNavTheme,
+    getIsMobile,
     getHeaderSetting,
     getMultiTabsSetting,
     getMenuSetting,
diff --git a/src/layout/components/Menu/index.vue b/src/layout/components/Menu/index.vue
index 70515a8..3036c19 100644
--- a/src/layout/components/Menu/index.vue
+++ b/src/layout/components/Menu/index.vue
@@ -15,152 +15,153 @@
 </template>
 
 <script lang="ts">
-  import { defineComponent, ref, onMounted, reactive, computed, watch, toRefs, unref } from 'vue';
-  import { useRoute, useRouter } from 'vue-router';
-  import { useAsyncRouteStore } from '@/store/modules/asyncRoute';
-  import { generatorMenu, generatorMenuMix } from '@/utils';
-  import { useProjectSettingStore } from '@/store/modules/projectSetting';
-  import { useProjectSetting } from '@/hooks/setting/useProjectSetting';
+import { defineComponent, ref, onMounted, reactive, computed, watch, toRefs, unref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { useAsyncRouteStore } from '@/store/modules/asyncRoute';
+import { generatorMenu, generatorMenuMix } from '@/utils';
+import { useProjectSettingStore } from '@/store/modules/projectSetting';
+import { useProjectSetting } from '@/hooks/setting/useProjectSetting';
 
-  export default defineComponent({
-    name: 'Menu',
-    components: {},
-    props: {
-      mode: {
-        // 菜单模式
-        type: String,
-        default: 'vertical',
-      },
-      collapsed: {
-        // 侧边栏菜单是否收起
-        type: Boolean,
-      },
-      //位置
-      location: {
-        type: String,
-        default: 'left',
-      },
+export default defineComponent({
+  name: 'Menu',
+  components: {},
+  props: {
+    mode: {
+      // 菜单模式
+      type: String,
+      default: 'vertical',
     },
-    emits: ['update:collapsed'],
-    setup(props, { emit }) {
-      // 当前路由
-      const currentRoute = useRoute();
-      const router = useRouter();
-      const asyncRouteStore = useAsyncRouteStore();
-      const settingStore = useProjectSettingStore();
-      const menus = ref<any[]>([]);
-      const selectedKeys = ref<string>(currentRoute.name as string);
-      const headerMenuSelectKey = ref<string>('');
+    collapsed: {
+      // 侧边栏菜单是否收起
+      type: Boolean,
+    },
+    //位置
+    location: {
+      type: String,
+      default: 'left',
+    },
+  },
+  emits: ['update:collapsed'],
+  setup(props, { emit }) {
+    // 当前路由
+    const currentRoute = useRoute();
+    const router = useRouter();
+    const asyncRouteStore = useAsyncRouteStore();
+    const settingStore = useProjectSettingStore();
+    const menus = ref<any[]>([]);
+    const selectedKeys = ref<string>(currentRoute.name as string);
+    const headerMenuSelectKey = ref<string>('');
 
-      const { getNavMode } = useProjectSetting();
+    const { getNavMode } = useProjectSetting();
 
-      const navMode = getNavMode;
+    const navMode = getNavMode;
 
-      // 获取当前打开的子菜单
-      const matched = currentRoute.matched;
+    // 获取当前打开的子菜单
+    const matched = currentRoute.matched;
 
-      const getOpenKeys = matched && matched.length ? matched.map((item) => item.name) : [];
+    const getOpenKeys = matched && matched.length ? matched.map((item) => item.name) : [];
 
-      const state = reactive({
-        openKeys: getOpenKeys,
-      });
+    const state = reactive({
+      openKeys: getOpenKeys,
+    });
 
-      const inverted = computed(() => {
-        return ['dark', 'header-dark'].includes(settingStore.navTheme);
-      });
+    const inverted = computed(() => {
+      return ['dark', 'header-dark'].includes(settingStore.navTheme);
+    });
 
-      const getSelectedKeys = computed(() => {
-        let location = props.location;
-        return location === 'left' || (location === 'header' && unref(navMode) === 'horizontal')
-          ? unref(selectedKeys)
-          : unref(headerMenuSelectKey);
-      });
+    const getSelectedKeys = computed(() => {
+      let location = props.location;
+      return location === 'left' || (location === 'header' && unref(navMode) === 'horizontal')
+        ? unref(selectedKeys)
+        : unref(headerMenuSelectKey);
+    });
 
-      // 监听分割菜单
-      watch(
-        () => settingStore.menuSetting.mixMenu,
-        () => {
-          updateMenu();
-          if (props.collapsed) {
-            emit('update:collapsed', !props.collapsed);
-          }
-        }
-      );
-
-      // 监听菜单收缩状态
-      // watch(
-      //   () => props.collapsed,
-      //   (newVal) => {
-      //   }
-      // );
-
-      // 跟随页面路由变化，切换菜单选中状态
-      watch(
-        () => currentRoute.fullPath,
-        () => {
-          updateMenu();
-          const matched = currentRoute.matched;
-          state.openKeys = matched.map((item) => item.name);
-          const activeMenu: string = (currentRoute.meta?.activeMenu as string) || '';
-          selectedKeys.value = activeMenu ? (activeMenu as string) : (currentRoute.name as string);
-        }
-      );
-
-      function updateMenu() {
-        if (!settingStore.menuSetting.mixMenu) {
-          menus.value = generatorMenu(asyncRouteStore.getMenus);
-        } else {
-          //混合菜单
-          const firstRouteName: string = (currentRoute.matched[0].name as string) || '';
-          menus.value = generatorMenuMix(asyncRouteStore.getMenus, firstRouteName, props.location);
-          const activeMenu: string = currentRoute?.matched[0].meta?.activeMenu as string;
-          headerMenuSelectKey.value = (activeMenu ? activeMenu : firstRouteName) || '';
-        }
-      }
-
-      // 点击菜单
-      function clickMenuItem(key: string) {
-        if (/http(s)?:/.test(key)) {
-          window.open(key);
-        } else {
-          router.push({ name: key });
-        }
-      }
-
-      //展开菜单
-      function menuExpanded(openKeys: string[]) {
-        if (!openKeys) return;
-        const latestOpenKey = openKeys.find((key) => state.openKeys.indexOf(key) === -1);
-        const isExistChildren = findChildrenLen(latestOpenKey as string);
-        state.openKeys = isExistChildren ? (latestOpenKey ? [latestOpenKey] : []) : openKeys;
-      }
-
-      //查找是否存在子路由
-      function findChildrenLen(key: string) {
-        if (!key) return false;
-        const subRouteChildren: string[] = [];
-        for (const { children, key } of unref(menus)) {
-          if (children && children.length) {
-            subRouteChildren.push(key as string);
-          }
-        }
-        return subRouteChildren.includes(key);
-      }
-
-      onMounted(() => {
+    // 监听分割菜单
+    watch(
+      () => settingStore.menuSetting.mixMenu,
+      () => {
         updateMenu();
-      });
+        if (props.collapsed) {
+          emit('update:collapsed', !props.collapsed);
+        }
+      }
+    );
 
-      return {
-        ...toRefs(state),
-        inverted,
-        menus,
-        selectedKeys,
-        headerMenuSelectKey,
-        getSelectedKeys,
-        clickMenuItem,
-        menuExpanded,
-      };
-    },
-  });
+    // 监听菜单收缩状态
+    // watch(
+    //   () => props.collapsed,
+    //   (newVal) => {
+    //   }
+    // );
+
+    // 跟随页面路由变化，切换菜单选中状态
+    watch(
+      () => currentRoute.fullPath,
+      () => {
+        updateMenu();
+        const matched = currentRoute.matched;
+        state.openKeys = matched.map((item) => item.name);
+        const activeMenu: string = (currentRoute.meta?.activeMenu as string) || '';
+        selectedKeys.value = activeMenu ? (activeMenu as string) : (currentRoute.name as string);
+      }
+    );
+
+    function updateMenu() {
+      if (!settingStore.menuSetting.mixMenu) {
+        menus.value = generatorMenu(asyncRouteStore.getMenus);
+      } else {
+        //混合菜单
+        const firstRouteName: string = (currentRoute.matched[0].name as string) || '';
+        menus.value = generatorMenuMix(asyncRouteStore.getMenus, firstRouteName, props.location);
+        const activeMenu: string = currentRoute?.matched[0].meta?.activeMenu as string;
+        headerMenuSelectKey.value = (activeMenu ? activeMenu : firstRouteName) || '';
+      }
+    }
+
+    // 点击菜单
+    function clickMenuItem(key: string) {
+      if (/http(s)?:/.test(key)) {
+        window.open(key);
+      } else {
+        router.push({ name: key });
+      }
+      emit("clickMenuItem" as any, key)
+    }
+
+    //展开菜单
+    function menuExpanded(openKeys: string[]) {
+      if (!openKeys) return;
+      const latestOpenKey = openKeys.find((key) => state.openKeys.indexOf(key) === -1);
+      const isExistChildren = findChildrenLen(latestOpenKey as string);
+      state.openKeys = isExistChildren ? (latestOpenKey ? [latestOpenKey] : []) : openKeys;
+    }
+
+    //查找是否存在子路由
+    function findChildrenLen(key: string) {
+      if (!key) return false;
+      const subRouteChildren: string[] = [];
+      for (const { children, key } of unref(menus)) {
+        if (children && children.length) {
+          subRouteChildren.push(key as string);
+        }
+      }
+      return subRouteChildren.includes(key);
+    }
+
+    onMounted(() => {
+      updateMenu();
+    });
+
+    return {
+      ...toRefs(state),
+      inverted,
+      menus,
+      selectedKeys,
+      headerMenuSelectKey,
+      getSelectedKeys,
+      clickMenuItem,
+      menuExpanded,
+    };
+  },
+});
 </script>
diff --git a/src/layout/components/TagsView/index.vue b/src/layout/components/TagsView/index.vue
index d85b435..8fd8513 100644
--- a/src/layout/components/TagsView/index.vue
+++ b/src/layout/components/TagsView/index.vue
@@ -80,593 +80,600 @@
 </template>
 
 <script lang="ts">
-  import {
-    defineComponent,
-    reactive,
-    computed,
-    ref,
-    toRefs,
-    unref,
-    provide,
-    watch,
-    onMounted,
-    nextTick,
-  } from 'vue';
-  import { useRoute, useRouter } from 'vue-router';
-  import { storage } from '@/utils/Storage';
-  import { TABS_ROUTES } from '@/store/mutation-types';
-  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 {
+import {
+  defineComponent,
+  reactive,
+  computed,
+  ref,
+  toRefs,
+  unref,
+  provide,
+  watch,
+  onMounted,
+  nextTick,
+} from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { storage } from '@/utils/Storage';
+import { TABS_ROUTES } from '@/store/mutation-types';
+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 {
+  DownOutlined,
+  ReloadOutlined,
+  CloseOutlined,
+  ColumnWidthOutlined,
+  MinusOutlined,
+  LeftOutlined,
+  RightOutlined,
+} from '@vicons/antd';
+import { renderIcon } from '@/utils';
+import elementResizeDetectorMaker from 'element-resize-detector';
+import { useDesignSetting } from '@/hooks/setting/useDesignSetting';
+import { useProjectSettingStore } from '@/store/modules/projectSetting';
+import { useThemeVars } from 'naive-ui';
+
+export default defineComponent({
+  name: 'TabsView',
+  components: {
     DownOutlined,
-    ReloadOutlined,
     CloseOutlined,
-    ColumnWidthOutlined,
-    MinusOutlined,
     LeftOutlined,
     RightOutlined,
-  } from '@vicons/antd';
-  import { renderIcon } from '@/utils';
-  import elementResizeDetectorMaker from 'element-resize-detector';
-  import { useDesignSetting } from '@/hooks/setting/useDesignSetting';
-  import { useProjectSettingStore } from '@/store/modules/projectSetting';
-  import { useThemeVars } from 'naive-ui';
-
-  export default defineComponent({
-    name: 'TabsView',
-    components: {
-      DownOutlined,
-      CloseOutlined,
-      LeftOutlined,
-      RightOutlined,
-      Draggable,
+    Draggable,
+  },
+  props: {
+    collapsed: {
+      type: Boolean,
     },
-    props: {
-      collapsed: {
-        type: Boolean,
-      },
-    },
-    setup(props) {
-      const { getDarkTheme, getAppTheme } = useDesignSetting();
-      const { getNavMode, getHeaderSetting, getMenuSetting, getMultiTabsSetting } =
-        useProjectSetting();
-      const settingStore = useProjectSettingStore();
+  },
+  setup(props) {
+    const { getDarkTheme, getAppTheme } = useDesignSetting();
+    const { getNavMode, getHeaderSetting, getMenuSetting, getMultiTabsSetting, getIsMobile } =
+      useProjectSetting();
+    const settingStore = useProjectSettingStore();
 
-      const message = useMessage();
-      const route = useRoute();
-      const router = useRouter();
-      const tabsViewStore = useTabsViewStore();
-      const asyncRouteStore = useAsyncRouteStore();
-      const navScroll: any = ref(null);
-      const navWrap: any = ref(null);
-      const isCurrent = ref(false);
+    const message = useMessage();
+    const route = useRoute();
+    const router = useRouter();
+    const tabsViewStore = useTabsViewStore();
+    const asyncRouteStore = useAsyncRouteStore();
+    const navScroll: any = ref(null);
+    const navWrap: any = ref(null);
+    const isCurrent = ref(false);
 
-      const themeVars = useThemeVars();
+    const themeVars = useThemeVars();
 
-      const getCardColor = computed(() => {
-        return themeVars.value.cardColor;
-      });
+    const getCardColor = computed(() => {
+      return themeVars.value.cardColor;
+    });
 
-      const getBaseColor = computed(() => {
-        return themeVars.value.textColor1;
-      });
+    const getBaseColor = computed(() => {
+      return themeVars.value.textColor1;
+    });
 
-      const state = reactive({
-        activeKey: route.fullPath,
-        scrollable: false,
-        dropdownX: 0,
-        dropdownY: 0,
-        showDropdown: false,
-        isMultiHeaderFixed: false,
-        multiTabsSetting: getMultiTabsSetting,
-      });
+    const state = reactive({
+      activeKey: route.fullPath,
+      scrollable: false,
+      dropdownX: 0,
+      dropdownY: 0,
+      showDropdown: false,
+      isMultiHeaderFixed: false,
+      multiTabsSetting: getMultiTabsSetting,
+    });
 
-      // 获取简易的路由对象
-      const getSimpleRoute = (route): RouteItem => {
-        const { fullPath, hash, meta, name, params, path, query } = route;
-        return { fullPath, hash, meta, name, params, path, query };
-      };
+    // 获取简易的路由对象
+    const getSimpleRoute = (route): RouteItem => {
+      const { fullPath, hash, meta, name, params, path, query } = route;
+      return { fullPath, hash, meta, name, params, path, query };
+    };
 
-      const isMixMenuNoneSub = computed(() => {
-        const mixMenu = settingStore.menuSetting.mixMenu;
-        const currentRoute = useRoute();
-        const navMode = unref(getNavMode);
-        if (unref(navMode) != 'horizontal-mix') return true;
-        return !(unref(navMode) === 'horizontal-mix' && mixMenu && currentRoute.meta.isRoot);
-      });
+    const isMixMenuNoneSub = computed(() => {
+      const mixMenu = settingStore.menuSetting.mixMenu;
+      const currentRoute = useRoute();
+      const navMode = unref(getNavMode);
+      if (unref(navMode) != 'horizontal-mix') return true;
+      return !(unref(navMode) === 'horizontal-mix' && mixMenu && currentRoute.meta.isRoot);
+    });
 
-      //动态组装样式 菜单缩进
-      const getChangeStyle = computed(() => {
-        const { collapsed } = props;
-        const navMode = unref(getNavMode);
-        const { minMenuWidth, menuWidth }: any = unref(getMenuSetting);
-        const { fixed }: any = unref(getMultiTabsSetting);
-        let lenNum =
-          navMode === 'horizontal' || !isMixMenuNoneSub.value
-            ? '0px'
-            : collapsed
+    //动态组装样式 菜单缩进
+    const getChangeStyle = computed(() => {
+      const { collapsed } = props;
+      const navMode = unref(getNavMode);
+      const { minMenuWidth, menuWidth }: any = unref(getMenuSetting);
+      const { fixed }: any = unref(getMultiTabsSetting);
+      let lenNum =
+        navMode === 'horizontal' || !isMixMenuNoneSub.value
+          ? '0px'
+          : collapsed
             ? `${minMenuWidth}px`
             : `${menuWidth}px`;
+
+      if (getIsMobile.value) {
         return {
-          left: lenNum,
-          width: `calc(100% - ${!fixed ? '0px' : lenNum})`,
+          left: '0px',
+          width: '100%'
         };
-      });
-
-      //tags 右侧下拉菜单
-      const TabsMenuOptions = computed(() => {
-        const isDisabled = unref(tabsList).length <= 1;
-        return [
-          {
-            label: '刷新当前',
-            key: '1',
-            icon: renderIcon(ReloadOutlined),
-          },
-          {
-            label: `关闭当前`,
-            key: '2',
-            disabled: unref(isCurrent) || isDisabled,
-            icon: renderIcon(CloseOutlined),
-          },
-          {
-            label: '关闭其他',
-            key: '3',
-            disabled: isDisabled,
-            icon: renderIcon(ColumnWidthOutlined),
-          },
-          {
-            label: '关闭全部',
-            key: '4',
-            disabled: isDisabled,
-            icon: renderIcon(MinusOutlined),
-          },
-        ];
-      });
-
-      let cacheRoutes: RouteItem[] = [];
-      const simpleRoute = getSimpleRoute(route);
-      try {
-        const routesStr = storage.get(TABS_ROUTES) as string | null | undefined;
-        cacheRoutes = routesStr ? JSON.parse(routesStr) : [simpleRoute];
-      } catch (e) {
-        cacheRoutes = [simpleRoute];
       }
-
-      // 将最新的路由信息同步到 localStorage 中
-      const routes = router.getRoutes();
-      cacheRoutes.forEach((cacheRoute) => {
-        const route = routes.find((route) => route.path === cacheRoute.path);
-        if (route) {
-          cacheRoute.meta = route.meta || cacheRoute.meta;
-          cacheRoute.name = (route.name || cacheRoute.name) as string;
-        }
-      });
-
-      // 初始化标签页
-      tabsViewStore.initTabs(cacheRoutes);
-
-      //监听滚动条
-      function onScroll(e) {
-        let scrollTop =
-          e.target.scrollTop ||
-          document.documentElement.scrollTop ||
-          window.pageYOffset ||
-          document.body.scrollTop; // 滚动条偏移量
-        state.isMultiHeaderFixed = !!(
-          !getHeaderSetting.value.fixed &&
-          getMultiTabsSetting.value.fixed &&
-          scrollTop >= 64
-        );
-      }
-
-      window.addEventListener('scroll', onScroll, true);
-
-      // 移除缓存组件名称
-      const delKeepAliveCompName = () => {
-        if (route.meta.keepAlive) {
-          const name = router.currentRoute.value.matched.find((item) => item.name == route.name)
-            ?.components?.default.name;
-          if (name) {
-            asyncRouteStore.keepAliveComponents = asyncRouteStore.keepAliveComponents.filter(
-              (item) => item != name
-            );
-          }
-        }
-      };
-
-      // 标签页列表
-      const tabsList: any = computed(() => tabsViewStore.tabsList);
-      const whiteList: string[] = [
-        PageEnum.BASE_LOGIN_NAME,
-        PageEnum.REDIRECT_NAME,
-        PageEnum.ERROR_PAGE_NAME,
-      ];
-
-      watch(
-        () => route.fullPath,
-        (to) => {
-          if (whiteList.includes(route.name as string)) return;
-          state.activeKey = to;
-          tabsViewStore.addTabs(getSimpleRoute(route));
-          updateNavScroll(true);
-        },
-        { immediate: true }
-      );
-
-      // 在页面关闭或刷新之前，保存数据
-      window.addEventListener('beforeunload', () => {
-        storage.set(TABS_ROUTES, JSON.stringify(tabsList.value));
-      });
-
-      // 关闭当前页面
-      const removeTab = (route) => {
-        if (tabsList.value.length === 1) {
-          return message.warning('这已经是最后一页，不能再关闭了！');
-        }
-        delKeepAliveCompName();
-        tabsViewStore.closeCurrentTab(route);
-        // 如果关闭的是当前页
-        if (state.activeKey === route.fullPath) {
-          const currentRoute = tabsList.value[Math.max(0, tabsList.value.length - 1)];
-          state.activeKey = currentRoute.fullPath;
-          router.push(currentRoute);
-        }
-        updateNavScroll();
-      };
-
-      // 刷新页面
-      const reloadPage = () => {
-        delKeepAliveCompName();
-        router.push({
-          path: '/redirect' + unref(route).fullPath,
-        });
-      };
-
-      // 注入刷新页面方法
-      provide('reloadPage', reloadPage);
-
-      // 关闭左侧
-      const closeLeft = (route) => {
-        tabsViewStore.closeLeftTabs(route);
-        state.activeKey = route.fullPath;
-        router.replace(route.fullPath);
-        updateNavScroll();
-      };
-
-      // 关闭右侧
-      const closeRight = (route) => {
-        tabsViewStore.closeRightTabs(route);
-        state.activeKey = route.fullPath;
-        router.replace(route.fullPath);
-        updateNavScroll();
-      };
-
-      // 关闭其他
-      const closeOther = (route) => {
-        tabsViewStore.closeOtherTabs(route);
-        state.activeKey = route.fullPath;
-        router.replace(route.fullPath);
-        updateNavScroll();
-      };
-
-      // 关闭全部
-      const closeAll = () => {
-        localStorage.removeItem('routes');
-        tabsViewStore.closeAllTabs();
-        router.replace(PageEnum.BASE_HOME);
-        updateNavScroll();
-      };
-
-      //tab 操作
-      const closeHandleSelect = (key) => {
-        switch (key) {
-          //刷新
-          case '1':
-            reloadPage();
-            break;
-          //关闭
-          case '2':
-            removeTab(route);
-            break;
-          //关闭其他
-          case '3':
-            closeOther(route);
-            break;
-          //关闭所有
-          case '4':
-            closeAll();
-            break;
-        }
-        updateNavScroll();
-        state.showDropdown = false;
-      };
-
-      /**
-       * @param value 要滚动到的位置
-       * @param amplitude 每次滚动的长度
-       */
-      function scrollTo(value: number, amplitude: number) {
-        const currentScroll = navScroll.value.scrollLeft;
-        const scrollWidth =
-          (amplitude > 0 && currentScroll + amplitude >= value) ||
-          (amplitude < 0 && currentScroll + amplitude <= value)
-            ? value
-            : currentScroll + amplitude;
-        navScroll.value && navScroll.value.scrollTo(scrollWidth, 0);
-        if (scrollWidth === value) return;
-        return window.requestAnimationFrame(() => scrollTo(value, amplitude));
-      }
-
-      function scrollPrev() {
-        const containerWidth = navScroll.value.offsetWidth;
-        const currentScroll = navScroll.value.scrollLeft;
-
-        if (!currentScroll) return;
-        const scrollLeft = currentScroll > containerWidth ? currentScroll - containerWidth : 0;
-        scrollTo(scrollLeft, (scrollLeft - currentScroll) / 20);
-      }
-
-      function scrollNext() {
-        const containerWidth = navScroll.value.offsetWidth;
-        const navWidth = navScroll.value.scrollWidth;
-        const currentScroll = navScroll.value.scrollLeft;
-
-        if (navWidth - currentScroll <= containerWidth) return;
-        const scrollLeft =
-          navWidth - currentScroll > containerWidth * 2
-            ? currentScroll + containerWidth
-            : navWidth - containerWidth;
-        scrollTo(scrollLeft, (scrollLeft - currentScroll) / 20);
-      }
-
-      /**
-       * @param autoScroll 是否开启自动滚动功能
-       */
-      async function updateNavScroll(autoScroll?: boolean) {
-        await nextTick();
-        if (!navScroll.value) return;
-        const containerWidth = navScroll.value.offsetWidth;
-        const navWidth = navScroll.value.scrollWidth;
-
-        if (containerWidth < navWidth) {
-          state.scrollable = true;
-          if (autoScroll) {
-            let tagList = navScroll.value.querySelectorAll('.tabs-card-scroll-item') || [];
-            [...tagList].forEach((tag: HTMLElement) => {
-              // fix SyntaxError
-              if (tag.id === `tag${state.activeKey.split('/').join('\/')}`) {
-                tag.scrollIntoView && tag.scrollIntoView();
-              }
-            });
-          }
-        } else {
-          state.scrollable = false;
-        }
-      }
-
-      function handleResize() {
-        updateNavScroll(true);
-      }
-
-      function handleContextMenu(e, item) {
-        e.preventDefault();
-        isCurrent.value = PageEnum.BASE_HOME_REDIRECT === item.path;
-        state.showDropdown = false;
-        nextTick().then(() => {
-          state.showDropdown = true;
-          state.dropdownX = e.clientX;
-          state.dropdownY = e.clientY;
-        });
-      }
-
-      function onClickOutside() {
-        state.showDropdown = false;
-      }
-
-      //tags 跳转页面
-      function goPage(e) {
-        const { fullPath } = e;
-        if (fullPath === route.fullPath) return;
-        state.activeKey = fullPath;
-        router.push({ path: fullPath });
-      }
-
-      //删除tab
-      function closeTabItem(e) {
-        const { fullPath } = e;
-        const routeInfo = tabsList.value.find((item) => item.fullPath == fullPath);
-        removeTab(routeInfo);
-      }
-
-      onMounted(() => {
-        onElementResize();
-      });
-
-      function onElementResize() {
-        let observer;
-        observer = elementResizeDetectorMaker();
-        observer.listenTo(navWrap.value, handleResize);
-      }
-
       return {
-        ...toRefs(state),
-        navWrap,
-        navScroll,
-        route,
-        tabsList,
-        baseHome: PageEnum.BASE_HOME_REDIRECT,
-        goPage,
-        closeTabItem,
-        closeLeft,
-        closeRight,
-        closeOther,
-        closeAll,
-        reloadPage,
-        getChangeStyle,
-        TabsMenuOptions,
-        closeHandleSelect,
-        scrollNext,
-        scrollPrev,
-        handleContextMenu,
-        onClickOutside,
-        getDarkTheme,
-        getAppTheme,
-        getCardColor,
-        getBaseColor,
+        left: lenNum,
+        width: `calc(100% - ${!fixed ? '0px' : lenNum})`,
       };
-    },
-  });
+    });
+
+    //tags 右侧下拉菜单
+    const TabsMenuOptions = computed(() => {
+      const isDisabled = unref(tabsList).length <= 1;
+      return [
+        {
+          label: '刷新当前',
+          key: '1',
+          icon: renderIcon(ReloadOutlined),
+        },
+        {
+          label: `关闭当前`,
+          key: '2',
+          disabled: unref(isCurrent) || isDisabled,
+          icon: renderIcon(CloseOutlined),
+        },
+        {
+          label: '关闭其他',
+          key: '3',
+          disabled: isDisabled,
+          icon: renderIcon(ColumnWidthOutlined),
+        },
+        {
+          label: '关闭全部',
+          key: '4',
+          disabled: isDisabled,
+          icon: renderIcon(MinusOutlined),
+        },
+      ];
+    });
+
+    let cacheRoutes: RouteItem[] = [];
+    const simpleRoute = getSimpleRoute(route);
+    try {
+      const routesStr = storage.get(TABS_ROUTES) as string | null | undefined;
+      cacheRoutes = routesStr ? JSON.parse(routesStr) : [simpleRoute];
+    } catch (e) {
+      cacheRoutes = [simpleRoute];
+    }
+
+    // 将最新的路由信息同步到 localStorage 中
+    const routes = router.getRoutes();
+    cacheRoutes.forEach((cacheRoute) => {
+      const route = routes.find((route) => route.path === cacheRoute.path);
+      if (route) {
+        cacheRoute.meta = route.meta || cacheRoute.meta;
+        cacheRoute.name = (route.name || cacheRoute.name) as string;
+      }
+    });
+
+    // 初始化标签页
+    tabsViewStore.initTabs(cacheRoutes);
+
+    //监听滚动条
+    function onScroll(e) {
+      let scrollTop =
+        e.target.scrollTop ||
+        document.documentElement.scrollTop ||
+        window.pageYOffset ||
+        document.body.scrollTop; // 滚动条偏移量
+      state.isMultiHeaderFixed = !!(
+        !getHeaderSetting.value.fixed &&
+        getMultiTabsSetting.value.fixed &&
+        scrollTop >= 64
+      );
+    }
+
+    window.addEventListener('scroll', onScroll, true);
+
+    // 移除缓存组件名称
+    const delKeepAliveCompName = () => {
+      if (route.meta.keepAlive) {
+        const name = router.currentRoute.value.matched.find((item) => item.name == route.name)
+          ?.components?.default.name;
+        if (name) {
+          asyncRouteStore.keepAliveComponents = asyncRouteStore.keepAliveComponents.filter(
+            (item) => item != name
+          );
+        }
+      }
+    };
+
+    // 标签页列表
+    const tabsList: any = computed(() => tabsViewStore.tabsList);
+    const whiteList: string[] = [
+      PageEnum.BASE_LOGIN_NAME,
+      PageEnum.REDIRECT_NAME,
+      PageEnum.ERROR_PAGE_NAME,
+    ];
+
+    watch(
+      () => route.fullPath,
+      (to) => {
+        if (whiteList.includes(route.name as string)) return;
+        state.activeKey = to;
+        tabsViewStore.addTabs(getSimpleRoute(route));
+        updateNavScroll(true);
+      },
+      { immediate: true }
+    );
+
+    // 在页面关闭或刷新之前，保存数据
+    window.addEventListener('beforeunload', () => {
+      storage.set(TABS_ROUTES, JSON.stringify(tabsList.value));
+    });
+
+    // 关闭当前页面
+    const removeTab = (route) => {
+      if (tabsList.value.length === 1) {
+        return message.warning('这已经是最后一页，不能再关闭了！');
+      }
+      delKeepAliveCompName();
+      tabsViewStore.closeCurrentTab(route);
+      // 如果关闭的是当前页
+      if (state.activeKey === route.fullPath) {
+        const currentRoute = tabsList.value[Math.max(0, tabsList.value.length - 1)];
+        state.activeKey = currentRoute.fullPath;
+        router.push(currentRoute);
+      }
+      updateNavScroll();
+    };
+
+    // 刷新页面
+    const reloadPage = () => {
+      delKeepAliveCompName();
+      router.push({
+        path: '/redirect' + unref(route).fullPath,
+      });
+    };
+
+    // 注入刷新页面方法
+    provide('reloadPage', reloadPage);
+
+    // 关闭左侧
+    const closeLeft = (route) => {
+      tabsViewStore.closeLeftTabs(route);
+      state.activeKey = route.fullPath;
+      router.replace(route.fullPath);
+      updateNavScroll();
+    };
+
+    // 关闭右侧
+    const closeRight = (route) => {
+      tabsViewStore.closeRightTabs(route);
+      state.activeKey = route.fullPath;
+      router.replace(route.fullPath);
+      updateNavScroll();
+    };
+
+    // 关闭其他
+    const closeOther = (route) => {
+      tabsViewStore.closeOtherTabs(route);
+      state.activeKey = route.fullPath;
+      router.replace(route.fullPath);
+      updateNavScroll();
+    };
+
+    // 关闭全部
+    const closeAll = () => {
+      localStorage.removeItem('routes');
+      tabsViewStore.closeAllTabs();
+      router.replace(PageEnum.BASE_HOME);
+      updateNavScroll();
+    };
+
+    //tab 操作
+    const closeHandleSelect = (key) => {
+      switch (key) {
+        //刷新
+        case '1':
+          reloadPage();
+          break;
+        //关闭
+        case '2':
+          removeTab(route);
+          break;
+        //关闭其他
+        case '3':
+          closeOther(route);
+          break;
+        //关闭所有
+        case '4':
+          closeAll();
+          break;
+      }
+      updateNavScroll();
+      state.showDropdown = false;
+    };
+
+    /**
+     * @param value 要滚动到的位置
+     * @param amplitude 每次滚动的长度
+     */
+    function scrollTo(value: number, amplitude: number) {
+      const currentScroll = navScroll.value.scrollLeft;
+      const scrollWidth =
+        (amplitude > 0 && currentScroll + amplitude >= value) ||
+          (amplitude < 0 && currentScroll + amplitude <= value)
+          ? value
+          : currentScroll + amplitude;
+      navScroll.value && navScroll.value.scrollTo(scrollWidth, 0);
+      if (scrollWidth === value) return;
+      return window.requestAnimationFrame(() => scrollTo(value, amplitude));
+    }
+
+    function scrollPrev() {
+      const containerWidth = navScroll.value.offsetWidth;
+      const currentScroll = navScroll.value.scrollLeft;
+
+      if (!currentScroll) return;
+      const scrollLeft = currentScroll > containerWidth ? currentScroll - containerWidth : 0;
+      scrollTo(scrollLeft, (scrollLeft - currentScroll) / 20);
+    }
+
+    function scrollNext() {
+      const containerWidth = navScroll.value.offsetWidth;
+      const navWidth = navScroll.value.scrollWidth;
+      const currentScroll = navScroll.value.scrollLeft;
+
+      if (navWidth - currentScroll <= containerWidth) return;
+      const scrollLeft =
+        navWidth - currentScroll > containerWidth * 2
+          ? currentScroll + containerWidth
+          : navWidth - containerWidth;
+      scrollTo(scrollLeft, (scrollLeft - currentScroll) / 20);
+    }
+
+    /**
+     * @param autoScroll 是否开启自动滚动功能
+     */
+    async function updateNavScroll(autoScroll?: boolean) {
+      await nextTick();
+      if (!navScroll.value) return;
+      const containerWidth = navScroll.value.offsetWidth;
+      const navWidth = navScroll.value.scrollWidth;
+
+      if (containerWidth < navWidth) {
+        state.scrollable = true;
+        if (autoScroll) {
+          let tagList = navScroll.value.querySelectorAll('.tabs-card-scroll-item') || [];
+          [...tagList].forEach((tag: HTMLElement) => {
+            // fix SyntaxError
+            if (tag.id === `tag${state.activeKey.split('/').join('\/')}`) {
+              tag.scrollIntoView && tag.scrollIntoView();
+            }
+          });
+        }
+      } else {
+        state.scrollable = false;
+      }
+    }
+
+    function handleResize() {
+      updateNavScroll(true);
+    }
+
+    function handleContextMenu(e, item) {
+      e.preventDefault();
+      isCurrent.value = PageEnum.BASE_HOME_REDIRECT === item.path;
+      state.showDropdown = false;
+      nextTick().then(() => {
+        state.showDropdown = true;
+        state.dropdownX = e.clientX;
+        state.dropdownY = e.clientY;
+      });
+    }
+
+    function onClickOutside() {
+      state.showDropdown = false;
+    }
+
+    //tags 跳转页面
+    function goPage(e) {
+      const { fullPath } = e;
+      if (fullPath === route.fullPath) return;
+      state.activeKey = fullPath;
+      router.push({ path: fullPath });
+    }
+
+    //删除tab
+    function closeTabItem(e) {
+      const { fullPath } = e;
+      const routeInfo = tabsList.value.find((item) => item.fullPath == fullPath);
+      removeTab(routeInfo);
+    }
+
+    onMounted(() => {
+      onElementResize();
+    });
+
+    function onElementResize() {
+      let observer;
+      observer = elementResizeDetectorMaker();
+      observer.listenTo(navWrap.value, handleResize);
+    }
+
+    return {
+      ...toRefs(state),
+      navWrap,
+      navScroll,
+      route,
+      tabsList,
+      baseHome: PageEnum.BASE_HOME_REDIRECT,
+      goPage,
+      closeTabItem,
+      closeLeft,
+      closeRight,
+      closeOther,
+      closeAll,
+      reloadPage,
+      getChangeStyle,
+      TabsMenuOptions,
+      closeHandleSelect,
+      scrollNext,
+      scrollPrev,
+      handleContextMenu,
+      onClickOutside,
+      getDarkTheme,
+      getAppTheme,
+      getCardColor,
+      getBaseColor,
+    };
+  },
+});
 </script>
 
 <style lang="less" scoped>
-  .tabs-view {
-    width: 100%;
-    padding: 6px 0;
+.tabs-view {
+  width: 100%;
+  padding: 6px 0;
+  display: flex;
+  transition: all 0.2s ease-in-out;
+
+  &-main {
+    height: 32px;
     display: flex;
-    transition: all 0.2s ease-in-out;
+    max-width: 100%;
+    min-width: 100%;
 
-    &-main {
-      height: 32px;
-      display: flex;
-      max-width: 100%;
-      min-width: 100%;
+    .tabs-card {
+      -webkit-box-flex: 1;
+      flex-grow: 1;
+      flex-shrink: 1;
+      overflow: hidden;
+      position: relative;
 
-      .tabs-card {
-        -webkit-box-flex: 1;
-        flex-grow: 1;
-        flex-shrink: 1;
-        overflow: hidden;
-        position: relative;
+      .tabs-card-prev,
+      .tabs-card-next {
+        width: 32px;
+        text-align: center;
+        position: absolute;
+        line-height: 32px;
+        cursor: pointer;
 
-        .tabs-card-prev,
-        .tabs-card-next {
+        .n-icon {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          height: 32px;
           width: 32px;
-          text-align: center;
-          position: absolute;
-          line-height: 32px;
+        }
+      }
+
+      .tabs-card-prev {
+        left: 0;
+      }
+
+      .tabs-card-next {
+        right: 0;
+      }
+
+      .tabs-card-next-hide,
+      .tabs-card-prev-hide {
+        display: none;
+      }
+
+      &-scroll {
+        white-space: nowrap;
+        overflow: hidden;
+
+        &-item {
+          background: v-bind(getCardColor);
+          color: v-bind(getBaseColor);
+          height: 32px;
+          padding: 6px 16px 4px;
+          border-radius: 3px;
+          margin-right: 6px;
           cursor: pointer;
+          display: inline-block;
+          position: relative;
+          flex: 0 0 auto;
+
+          span {
+            float: left;
+            vertical-align: middle;
+          }
+
+          &:hover {
+            color: #515a6e;
+          }
 
           .n-icon {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            height: 32px;
-            width: 32px;
-          }
-        }
-
-        .tabs-card-prev {
-          left: 0;
-        }
-
-        .tabs-card-next {
-          right: 0;
-        }
-
-        .tabs-card-next-hide,
-        .tabs-card-prev-hide {
-          display: none;
-        }
-
-        &-scroll {
-          white-space: nowrap;
-          overflow: hidden;
-
-          &-item {
-            background: v-bind(getCardColor);
-            color: v-bind(getBaseColor);
-            height: 32px;
-            padding: 6px 16px 4px;
-            border-radius: 3px;
-            margin-right: 6px;
-            cursor: pointer;
-            display: inline-block;
+            height: 22px;
+            width: 21px;
+            margin-right: -6px;
             position: relative;
-            flex: 0 0 auto;
-
-            span {
-              float: left;
-              vertical-align: middle;
-            }
+            vertical-align: middle;
+            text-align: center;
+            color: #808695;
 
             &:hover {
-              color: #515a6e;
+              color: #515a6e !important;
             }
 
-            .n-icon {
-              height: 22px;
-              width: 21px;
-              margin-right: -6px;
-              position: relative;
-              vertical-align: middle;
-              text-align: center;
-              color: #808695;
-
-              &:hover {
-                color: #515a6e !important;
-              }
-
-              svg {
-                height: 21px;
-                display: inline-block;
-              }
+            svg {
+              height: 21px;
+              display: inline-block;
             }
           }
-
-          .active-item {
-            color: v-bind(getAppTheme);
-          }
         }
-      }
 
-      .tabs-card-scrollable {
-        padding: 0 32px;
-        overflow: hidden;
+        .active-item {
+          color: v-bind(getAppTheme);
+        }
       }
     }
 
-    .tabs-close {
-      min-width: 32px;
-      width: 32px;
-      height: 32px;
-      line-height: 32px;
-      text-align: center;
-      background: var(--color);
-      border-radius: 2px;
-      cursor: pointer;
-      //margin-right: 10px;
-
-      &-btn {
-        color: var(--color);
-        height: 100%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-      }
+    .tabs-card-scrollable {
+      padding: 0 32px;
+      overflow: hidden;
     }
   }
 
-  .tabs-view-default-background {
-    background: #f5f7f9;
-  }
+  .tabs-close {
+    min-width: 32px;
+    width: 32px;
+    height: 32px;
+    line-height: 32px;
+    text-align: center;
+    background: var(--color);
+    border-radius: 2px;
+    cursor: pointer;
+    //margin-right: 10px;
 
-  .tabs-view-dark-background {
-    background: #101014;
+    &-btn {
+      color: var(--color);
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
   }
+}
 
-  .tabs-view-fix {
-    position: fixed;
-    z-index: 5;
-    padding: 6px 19px 6px 10px;
-    left: 200px;
-  }
+.tabs-view-default-background {
+  background: #f5f7f9;
+}
 
-  .tabs-view-fixed-header {
-    top: 0;
-  }
+.tabs-view-dark-background {
+  background: #101014;
+}
+
+.tabs-view-fix {
+  position: fixed;
+  z-index: 5;
+  padding: 6px 19px 6px 10px;
+  left: 200px;
+}
+
+.tabs-view-fixed-header {
+  top: 0;
+}
 </style>
diff --git a/src/layout/index.vue b/src/layout/index.vue
index 66a8b93..665c1fc 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -25,7 +25,7 @@
       class="layout-side-drawer"
     >
       <Logo :collapsed="collapsed" />
-      <AsideMenu />
+      <AsideMenu @clickMenuItem="collapsed = false" />
     </n-drawer>
 
     <n-layout :inverted="inverted">
@@ -97,7 +97,10 @@ const collapsed = ref<boolean>(false);
 
 const { mobileWidth, menuWidth } = unref(getMenuSetting);
 
-const isMobile = ref<boolean>(false);
+const isMobile = computed<boolean>({
+  get: () => settingStore.getIsMobile,
+  set: (val) => settingStore.setIsMobile(val)
+});
 
 const fixedHeader = computed(() => {
   const { fixed } = unref(getHeaderSetting);
@@ -162,7 +165,6 @@ const showSideDrawder = computed({
 const checkMobileMode = () => {
   if (document.body.clientWidth <= mobileWidth) {
     isMobile.value = true;
-
   } else {
     isMobile.value = false;
   }
diff --git a/src/settings/projectSetting.ts b/src/settings/projectSetting.ts
index 5abea51..8612fa4 100644
--- a/src/settings/projectSetting.ts
+++ b/src/settings/projectSetting.ts
@@ -3,6 +3,8 @@ const setting = {
   navMode: 'vertical',
   //导航风格 dark 暗色侧边栏 light 白色侧边栏 header-dark 暗色顶栏
   navTheme: 'dark',
+  // 是否处于移动端模式
+  isMobile: false,
   //顶部
   headerSetting: {
     //背景色
diff --git a/src/store/modules/projectSetting.ts b/src/store/modules/projectSetting.ts
index 49a78ae..9c2c3cd 100644
--- a/src/store/modules/projectSetting.ts
+++ b/src/store/modules/projectSetting.ts
@@ -6,6 +6,7 @@ import type { IheaderSetting, ImenuSetting, ImultiTabsSetting, IcrumbsSetting }
 const {
   navMode,
   navTheme,
+  isMobile,
   headerSetting,
   showFooter,
   menuSetting,
@@ -27,6 +28,7 @@ interface ProjectSettingState {
   permissionMode: string; //权限模式
   isPageAnimate: boolean; //是否开启路由动画
   pageAnimateType: string; //路由动画类型
+  isMobile: boolean; // 是否处于移动端模式
 }
 
 export const useProjectSettingStore = defineStore({
@@ -34,6 +36,7 @@ export const useProjectSettingStore = defineStore({
   state: (): ProjectSettingState => ({
     navMode: navMode,
     navTheme,
+    isMobile,
     headerSetting,
     showFooter,
     menuSetting,
@@ -50,6 +53,9 @@ export const useProjectSettingStore = defineStore({
     getNavTheme(): string {
       return this.navTheme;
     },
+    getIsMobile(): boolean {
+      return this.isMobile;
+    },
     getHeaderSetting(): object {
       return this.headerSetting;
     },
@@ -79,6 +85,9 @@ export const useProjectSettingStore = defineStore({
     setNavTheme(value: string): void {
       this.navTheme = value;
     },
+    setIsMobile(value: boolean): void {
+      this.isMobile = value;
+    },
   },
 });