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

src/composables/business/index.ts

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

src/composables/business/login.ts

@@ -0,0 +1,57 @@
+import { useAuthStore } from '@/store';
+import { useLoading } from '@/hooks';
+import { setToken, setRefreshToken, setUserInfo, log } from '@/utils';
+import type { LoginToken, UserInfo } from '@/interface';
+import { useRouterPush, useRouteQuery } from '../common';
+
+export function useLogin() {
+  const auth = useAuthStore();
+  const { setAuthState } = useAuthStore();
+  const { toLoginRedirect } = useRouterPush();
+  const { loginRedirect } = useRouteQuery();
+  const { loading, startLoading, endLoading } = useLoading();
+
+  /**
+   * 登录注册
+   * @param param - 请求参数
+   * - phone: 手机号
+   * - pwdOrCode: 密码或验证码
+   * - type: 登录方式: pwd - 密码登录; sms - 验证码登录
+   * @returns 是否登录成功
+   */
+  async function login(param: { phone: string; pwdOrCode: string; type: 'pwd' | 'sms' }) {
+    log(param); // 打印参数(接入接口后去除)
+
+    startLoading();
+    // 1.这里调用登录接口获取token和refreshToken
+    const loginToken: LoginToken = {
+      token: 'temp-token',
+      refreshToken: 'temp-refresh-token'
+    };
+    const { token, refreshToken } = loginToken;
+    setToken(token);
+    setRefreshToken(refreshToken);
+    // 2.这里调用获取用户信息的接口
+    const userInfo: UserInfo = {
+      userId: 'temp-user-id',
+      userName: 'Soybean',
+      userPhone: '15170283876'
+    };
+    setUserInfo(userInfo);
+    setAuthState({ token, userInfo });
+
+    // 3.登录成功后跳转重定向地址
+    toLoginRedirect(loginRedirect.value);
+    window.$notification?.success({
+      title: '登录成功！',
+      content: `欢迎回来，${auth.userInfo.userName}!`,
+      duration: 3000
+    });
+    endLoading();
+  }
+
+  return {
+    loading,
+    login
+  };
+}

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

src/composables/events/auth.ts

@@ -0,0 +1,31 @@
+import { onMounted, onUnmounted } from 'vue';
+import { useAuthStore } from '@/store';
+
+/** 添加用户权益变更的全局点击事件监听 */
+export function useAuthChangeEvent() {
+  const { getIsAuthChange } = useAuthStore();
+
+  function eventHandler(event: MouseEvent) {
+    const change = getIsAuthChange();
+    if (change) {
+      event.stopPropagation();
+      window.location.reload();
+    }
+  }
+
+  function addAuthChangeListener() {
+    document.addEventListener('click', eventHandler, { capture: true });
+  }
+
+  function removeAuthChangeListener() {
+    document.removeEventListener('click', eventHandler);
+  }
+
+  onMounted(() => {
+    addAuthChangeListener();
+  });
+
+  onUnmounted(() => {
+    removeAuthChangeListener();
+  });
+}

src/composables/events/global.ts

@@ -0,0 +1,12 @@
+import { useAuthChangeEvent } from './auth';
+
+export function useGlobalEvent() {
+  /** 初始化全局监听事件 */
+  function initGlobalListener() {
+    useAuthChangeEvent();
+  }
+
+  return {
+    initGlobalListener
+  };
+}

src/composables/events/index.ts

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

src/composables/index.ts

@@ -1 +1,3 @@
 export * from './common';
+export * from './business';
+export * from './events';