feat(projects): 添加常用组件、composables函数

src/composables/common/route.ts

@@ -1,4 +1,5 @@
 import { computed, watch } from 'vue';
+import type { WatchOptions } from 'vue';
 import { useRoute } from 'vue-router';
 import { routeName } from '@/router';
 import type { RouteKey } from '@/interface';
@@ -33,7 +34,7 @@ export function useRouteQuery() {
   const route = useRoute();
 
   /** 登录跳转链接 */
-  const loginRedirectUrl = computed(() => {
+  const loginRedirect = computed(() => {
     let url: string | undefined;
     if (route.name === routeName('login')) {
       url = (route.query?.redirect as string) || '';
@@ -42,7 +43,7 @@ export function useRouteQuery() {
   });
 
   return {
-    loginRedirectUrl
+    loginRedirect
   };
 }
 
@@ -50,13 +51,14 @@ export function useRouteQuery() {
  * 路由名称变化后的回调
  * @param callback
  */
-export function routeNameWatcher(callback: (name: RouteKey) => void) {
+export function routeNameWatcher(callback: (name: RouteKey) => void, options?: WatchOptions) {
   const route = useRoute();
   watch(
     () => route.name,
     newValue => {
       callback(newValue as RouteKey);
-    }
+    },
+    options
   );
 }
 
@@ -64,12 +66,29 @@ export function routeNameWatcher(callback: (name: RouteKey) => void) {
  * 路由全路径变化后的回调
  * @param callback
  */
-export function routeFullPathWatcher(callback: (fullPath: string) => void) {
+export function routeFullPathWatcher(callback: (fullPath: string) => void, options?: WatchOptions) {
   const route = useRoute();
   watch(
     () => route.fullPath,
     newValue => {
       callback(newValue);
-    }
+    },
+    options
+  );
+}
+
+/**
+ * 路由路径变化后的回调
+ * @param callback - 回调函数
+ * @param options - 监听配置
+ */
+export function routePathWatcher(callback: (path: string) => void, options?: WatchOptions) {
+  const route = useRoute();
+  watch(
+    () => route.path,
+    newValue => {
+      callback(newValue);
+    },
+    options
   );
 }

src/composables/common/router.ts

@@ -21,9 +21,14 @@ export function useRouterPush(inSetup: boolean = true) {
     if (newTab) {
       const routerData = router.resolve(to);
       window.open(routerData.href, '_blank');
-      return;
+    } else {
+      router.push(to);
     }
-    router.push(to);
+  }
+
+  /** 返回上一级路由 */
+  function routerBack() {
+    router.go(-1);
   }
 
   /**
@@ -46,7 +51,7 @@ export function useRouterPush(inSetup: boolean = true) {
    * @param redirect - 重定向地址(登录成功后跳转的地址)
    * @param newTab - 在新的浏览器标签打开
    */
-  function toLogin(module: LoginModuleType = 'code-login', redirect: LoginRedirect = 'current', newTab = false) {
+  function toLogin(module: LoginModuleType = 'pwd-login', redirect: LoginRedirect = 'current', newTab = false) {
     const routeLocation: RouteLocationRaw = {
       name: routeName('login'),
       params: { module }
@@ -71,10 +76,24 @@ export function useRouterPush(inSetup: boolean = true) {
     routerPush({ name: routeName('login'), params: { module }, query: { ...query } }, newTab);
   }
 
+  /**
+   * 登录成功后跳转重定向的地址
+   * @param redirect - 重定向地址
+   */
+  function toLoginRedirect(redirect?: string) {
+    if (redirect) {
+      routerPush(redirect);
+    } else {
+      toHome();
+    }
+  }
+
   return {
     routerPush,
+    routerBack,
     toHome,
     toLogin,
-    toCurrentLogin
+    toCurrentLogin,
+    toLoginRedirect
   };
 }

src/composables/common/system.ts

@@ -1,8 +1,23 @@
 import { useBreakpoints, breakpointsTailwind } from '@vueuse/core';
 
-/** 项目名称 */
-export function useAppTitle() {
-  return import.meta.env.VITE_APP_TITLE as string;
+interface AppInfo {
+  /** 项目名称 */
+  name: string;
+  /** 项目标题 */
+  title: string;
+  /** 项目描述 */
+  desc: string;
+}
+
+/** 项目信息 */
+export function useAppInfo(): AppInfo {
+  const { VITE_APP_NAME: name, VITE_APP_TITLE: title, VITE_APP_DESC: desc } = import.meta.env;
+
+  return {
+    name,
+    title,
+    desc
+  };
 }
 
 /** 是否是移动端 */

src/composables/common/theme.ts

@@ -57,3 +57,30 @@ export function useDarkMode() {
     naiveTheme
   };
 }
+
+/** 更改html样式 */
+export function useHtmlStyle() {
+  const HIDE_SCROLL_CLASS = 'overflow-hidden';
+
+  function getHtmlElement() {
+    return document.querySelector('html');
+  }
+
+  function handleHideScroll() {
+    const html = getHtmlElement();
+    if (html) {
+      html.classList.add(HIDE_SCROLL_CLASS);
+    }
+  }
+  function handleAutoScroll() {
+    const html = getHtmlElement();
+    if (html) {
+      html.classList.remove(HIDE_SCROLL_CLASS);
+    }
+  }
+
+  return {
+    handleHideScroll,
+    handleAutoScroll
+  };
+}