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

@@ -125,6 +125,7 @@
       } else {
         router.push({ name: key });
       }
+      emit("clickMenuItem" as any, key)
     }
 
     //展开菜单

src/layout/components/TagsView/index.vue

@@ -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})`,

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