Merge pull request #106 from MaybeQHL/main

fix: 修复在移动端模式下tags显示的bug  update: 移动端模式下侧边菜单item点击隐藏drawer.

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,

src/layout/components/Menu/index.vue

@@ -15,14 +15,14 @@
 </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({
+export default defineComponent({
   name: 'Menu',
   components: {},
   props: {
@@ -125,6 +125,7 @@
       } else {
         router.push({ name: key });
       }
+      emit("clickMenuItem" as any, key)
     }
 
     //展开菜单
@@ -162,5 +163,5 @@
       menuExpanded,
     };
   },
-  });
+});
 </script>

src/layout/components/TagsView/index.vue

@@ -80,7 +80,7 @@
 </template>
 
 <script lang="ts">
-  import {
+import {
   defineComponent,
   reactive,
   computed,
@@ -91,18 +91,18 @@
   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 {
+} 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,
@@ -110,14 +110,14 @@
   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';
+} 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({
+export default defineComponent({
   name: 'TabsView',
   components: {
     DownOutlined,
@@ -133,7 +133,7 @@
   },
   setup(props) {
     const { getDarkTheme, getAppTheme } = useDesignSetting();
-      const { getNavMode, getHeaderSetting, getMenuSetting, getMultiTabsSetting } =
+    const { getNavMode, getHeaderSetting, getMenuSetting, getMultiTabsSetting, getIsMobile } =
       useProjectSetting();
     const settingStore = useProjectSettingStore();
 
@@ -192,6 +192,13 @@
           : collapsed
             ? `${minMenuWidth}px`
             : `${menuWidth}px`;
+
+      if (getIsMobile.value) {
+        return {
+          left: '0px',
+          width: '100%'
+        };
+      }
       return {
         left: lenNum,
         width: `calc(100% - ${!fixed ? '0px' : lenNum})`,
@@ -520,11 +527,11 @@
       getBaseColor,
     };
   },
-  });
+});
 </script>
 
 <style lang="less" scoped>
-  .tabs-view {
+.tabs-view {
   width: 100%;
   padding: 6px 0;
   display: flex;
@@ -649,24 +656,24 @@
       justify-content: center;
     }
   }
-  }
+}
 
-  .tabs-view-default-background {
+.tabs-view-default-background {
   background: #f5f7f9;
-  }
+}
 
-  .tabs-view-dark-background {
+.tabs-view-dark-background {
   background: #101014;
-  }
+}
 
-  .tabs-view-fix {
+.tabs-view-fix {
   position: fixed;
   z-index: 5;
   padding: 6px 19px 6px 10px;
   left: 200px;
-  }
+}
 
-  .tabs-view-fixed-header {
+.tabs-view-fixed-header {
   top: 0;
-  }
+}
 </style>

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;
   }

src/settings/projectSetting.ts

@@ -3,6 +3,8 @@ const setting = {
   navMode: 'vertical',
   //导航风格 dark 暗色侧边栏 light 白色侧边栏 header-dark 暗色顶栏
   navTheme: 'dark',
+  // 是否处于移动端模式
+  isMobile: false,
   //顶部
   headerSetting: {
     //背景色

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;
+    },
   },
 });