fix(projects): hide some content when is mobile layout

src/layouts/modules/global-header/index.vue

@@ -19,10 +19,10 @@ defineOptions({
   <DarkModeContainer class="flex-y-center h-full shadow-header">
     <div class="flex-1-hidden flex-y-center h-full">
       <MenuToggler :collapsed="appStore.siderCollapse" @click="appStore.toggleSiderCollapse" />
-      <GlobalBreadcrumb />
+      <GlobalBreadcrumb v-if="!appStore.isMobile" />
     </div>
     <div class="flex-y-center justify-end h-full">
-      <FullScreen :full="isFullscreen" @click="toggle" />
+      <FullScreen v-if="!appStore.isMobile" :full="isFullscreen" @click="toggle" />
       <LangSwitch :lang="appStore.locale" :lang-options="appStore.localeOptions" @change-lang="appStore.changeLocale" />
       <ColorSchemaSwitch
         :color-schema="themeStore.colorScheme"

src/router/guard/permission.ts

@@ -93,14 +93,14 @@ async function createAuthRouteGuard(
   }
 
   // 2. If the auth route is initialized but is not the "not-found" route, then it is allowed to access.
-  const route = useRouteStore();
-  if (route.isInitAuthRoute && !isNotFoundRoute) {
+  const routeStore = useRouteStore();
+  if (routeStore.isInitAuthRoute && !isNotFoundRoute) {
     return true;
   }
 
   // 3. If the route is initialized, check whether the route exists.
-  if (route.isInitAuthRoute && isNotFoundRoute) {
-    const exist = await route.getIsAuthRouteExist(to.path as RoutePath);
+  if (routeStore.isInitAuthRoute && isNotFoundRoute) {
+    const exist = await routeStore.getIsAuthRouteExist(to.path as RoutePath);
 
     if (exist) {
       const noPermissionRoute: RouteKey = '403';
@@ -125,7 +125,7 @@ async function createAuthRouteGuard(
   }
 
   // 5. init auth route
-  await route.initAuthRoute();
+  await routeStore.initAuthRoute();
 
   // 6. the route is caught by the "not-found" route because the auto route is not initialized. after the auto route is initialized, redirect to the original route.
   if (isNotFoundRoute) {

src/store/modules/app/index.ts

@@ -13,11 +13,17 @@ export const useAppStore = defineStore(SetupStoreId.App, () => {
   const routeStore = useRouteStore();
   const tabStore = useTabStore();
   const scope = effectScope();
+  const breakpoints = useBreakpoints(breakpointsTailwind);
   const { bool: themeDrawerVisible, setTrue: openThemeDrawer, setFalse: closeThemeDrawer } = useBoolean();
   const { bool: reloadFlag, setBool: setReloadFlag } = useBoolean(true);
   const { bool: fullContent, toggle: toggleFullContent } = useBoolean();
   const { bool: siderCollapse, setBool: setSiderCollapse, toggle: toggleSiderCollapse } = useBoolean();
 
+  /**
+   * is mobile layout
+   */
+  const isMobile = breakpoints.smaller('sm');
+
   /**
    * reload page
    * @param duration duration time
@@ -53,10 +59,6 @@ export const useAppStore = defineStore(SetupStoreId.App, () => {
     localStg.set('lang', lang);
   }
 
-  const breakpoints = useBreakpoints(breakpointsTailwind);
-
-  const isMobile = breakpoints.smaller('sm');
-
   /**
    * update document title by locale
    */