refactor(projects): 路由声明重构，添加composables，BaseLayout进行中，文件夹规范

src/composables/common/index.ts

@@ -0,0 +1,4 @@
+export * from './route';
+export * from './router';
+export * from './system';
+export * from './layout';

src/composables/common/layout.ts

@@ -0,0 +1,49 @@
+import { computed } from 'vue';
+import { useThemeStore, useAppStore } from '@/store';
+
+export function useLayoutConfig() {
+  const theme = useThemeStore();
+  const app = useAppStore();
+
+  /** 反转sider */
+  const siderInverted = computed(() => theme.navStyle.theme !== 'light');
+
+  /** 侧边菜单宽度 */
+  const siderMenuWidth = computed(() => {
+    const { collapsed } = app.menu;
+    const { collapsedWidth, width } = theme.menuStyle;
+    return collapsed ? collapsedWidth : width;
+  });
+
+  /** 反转header */
+  const headerInverted = computed(() => (theme.navStyle.theme !== 'dark' ? siderInverted.value : !siderInverted.value));
+
+  /** 头部定位 */
+  const headerPosition = computed(() => (theme.fixedHeaderAndTab ? 'absolute' : 'static'));
+
+  /** 全局头部的高度(px) */
+  const headerHeight = computed(() => `${theme.headerStyle.height}px`);
+
+  /** 多页签Tab的高度(px) */
+  const multiTabHeight = computed(() => `${theme.multiTabStyle.height}px`);
+
+  /** 全局头部和多页签的总高度 */
+  const headerAndMultiTabHeight = computed(() => {
+    const {
+      multiTabStyle: { visible, height: tH },
+      headerStyle: { height: hH }
+    } = theme;
+    const height = visible ? tH + hH : hH;
+    return `${height}px`;
+  });
+
+  return {
+    siderInverted,
+    siderMenuWidth,
+    headerInverted,
+    headerPosition,
+    headerHeight,
+    multiTabHeight,
+    headerAndMultiTabHeight
+  };
+}

src/composables/common/route.ts

@@ -0,0 +1,63 @@
+import { computed, watch } from 'vue';
+import { useRoute } from 'vue-router';
+import { routeName } from '@/router';
+import type { RouteKey } from '@/interface';
+
+/**
+ * 路由属性
+ * @description - 必须要在setup里面调用
+ */
+export function useRouteProps() {
+  const route = useRoute();
+  const props = computed(() => {
+    /** 路由名称 */
+    const name = route.name as string;
+    /** 缓存页面 */
+    const keepAlive = Boolean(route.meta?.keepAlive);
+    /** 视高100% */
+    const fullPage = Boolean(route.meta?.fullPage);
+
+    return {
+      name,
+      keepAlive,
+      fullPage
+    };
+  });
+
+  return props;
+}
+
+/**
+ * 路由查询参数
+ * @description - 必须要在setup里面调用
+ */
+export function useRouteQuery() {
+  const route = useRoute();
+
+  /** 登录跳转链接 */
+  const loginRedirectUrl = computed(() => {
+    let url: string | undefined;
+    if (route.name === routeName('login')) {
+      url = (route.query?.redirectUrl as string) || '';
+    }
+    return url;
+  });
+
+  return {
+    loginRedirectUrl
+  };
+}
+
+/**
+ * 路由名称变化后的回调
+ * @param callback
+ */
+export function routeNameWatcher(callback: (name: RouteKey) => void) {
+  const route = useRoute();
+  watch(
+    () => route.name,
+    newValue => {
+      callback(newValue as RouteKey);
+    }
+  );
+}

src/composables/common/router.ts

@@ -0,0 +1,67 @@
+import { useRouter, useRoute } from 'vue-router';
+import type { RouteLocationRaw } from 'vue-router';
+import { router as globalRouter, routePath } from '@/router';
+import type { LoginModuleType } from '@/interface';
+
+/**
+ * 路由跳转
+ * @param inSetup - 是否在vue页面/组件的setup里面调用
+ */
+export function useRouterPush(inSetup: boolean = true) {
+  const router = inSetup ? useRouter() : globalRouter;
+  const route = inSetup ? useRoute() : null;
+
+  /** 跳转首页 */
+  function toHome() {
+    router.push('/');
+  }
+
+  /**
+   * 重定向地址
+   * - current: 取当前的path作为重定向地址
+   */
+  type LoginRedirect = 'current' | string;
+  /**
+   * 跳转登录页面(通过vue路由)
+   * @param module - 展示的登录模块
+   * @param redirectUrl - 重定向地址
+   */
+  function toLogin(module: LoginModuleType = 'pwd-login', redirectUrl: LoginRedirect = 'current') {
+    const routeLocation: RouteLocationRaw = {
+      path: routePath('login'),
+      query: { module }
+    };
+    if (redirectUrl) {
+      let url = redirectUrl;
+      if (redirectUrl === 'current') {
+        url = router.currentRoute.value.fullPath;
+      }
+      routeLocation.query!.redirectUrl = url;
+    }
+    router.push(routeLocation);
+  }
+
+  /**
+   * 登陆页跳转登陆页
+   * @param module - 展示的登录模块
+   * @param query - 查询参数
+   */
+  function toCurrentLogin(module: LoginModuleType) {
+    if (route) {
+      const { query } = route;
+      router.push({ path: routePath('login'), query: { ...query, module } });
+    }
+  }
+
+  /** 登录后跳转重定向的地址 */
+  function toLoginRedirectUrl(path: string) {
+    router.push(path);
+  }
+
+  return {
+    toHome,
+    toLogin,
+    toCurrentLogin,
+    toLoginRedirectUrl
+  };
+}

src/composables/common/system.ts

@@ -0,0 +1,13 @@
+import { useBreakpoints, breakpointsTailwind } from '@vueuse/core';
+
+/** 项目名称 */
+export function useAppTitle() {
+  return import.meta.env.VITE_APP_TITLE as string;
+}
+
+/** 是否是移动端 */
+export function useIsMobile() {
+  const breakpoints = useBreakpoints(breakpointsTailwind);
+  const isMobile = breakpoints.smaller('lg');
+  return isMobile;
+}

src/composables/index.ts

@@ -0,0 +1 @@
+export * from './common';