feat(projects): 登录页面实现

src/hooks/business/index.ts

@@ -0,0 +1,4 @@
+import useCountDown from './useCountDown';
+import useSmsCode from './useSmsCode';
+
+export { useCountDown, useSmsCode };

src/hooks/business/useCountDown.ts

@@ -0,0 +1,46 @@
+import { ref, computed } from 'vue';
+
+/**
+ * 倒计时
+ * @param second - 倒计时的时间(s)
+ */
+export default function useCountDown(second: number) {
+  if (second <= 0 && second % 1 !== 0) {
+    throw Error('倒计时的时间应该为一个正整数！');
+  }
+  const counts = ref(0);
+  const isCounting = computed(() => Boolean(counts.value));
+
+  let intervalId: any;
+
+  /**
+   * 开始计时
+   * @param updateSecond - 更改初时传入的倒计时时间
+   */
+  function start(updateSecond: number = second) {
+    if (!counts.value) {
+      counts.value = updateSecond;
+      intervalId = setInterval(() => {
+        counts.value -= 1;
+        if (counts.value <= 0) {
+          clearInterval(intervalId);
+        }
+      }, 1000);
+    }
+  }
+
+  /**
+   * 停止计时
+   */
+  function stop() {
+    intervalId = clearInterval(intervalId);
+    counts.value = 0;
+  }
+
+  return {
+    counts,
+    isCounting,
+    start,
+    stop
+  };
+}

src/hooks/business/useSmsCode.ts

@@ -0,0 +1,15 @@
+import { computed } from 'vue';
+import useCountDown from './useCountDown';
+
+export default function useSmsCode() {
+  const { counts, start, isCounting } = useCountDown(60);
+  const initLabel = '获取验证码';
+  const countingLabel = (second: number) => `${second}秒后重新获取`;
+  const label = computed(() => (isCounting.value ? countingLabel(counts.value) : initLabel));
+
+  return {
+    label,
+    start,
+    isCounting
+  };
+}

src/hooks/common/index.ts

@@ -0,0 +1,5 @@
+import useAppTitle from './useAppTitle';
+import useCreateContext from './useCreateContext';
+import useRouterChange from './useRouterChange';
+
+export { useAppTitle, useCreateContext, useRouterChange };

src/hooks/common/useAppTitle.ts

@@ -0,0 +1,6 @@
+/** 项目名称 */
+export default function useAppTitle() {
+  const title = import.meta.env.VITE_APP_TITLE as string;
+
+  return title;
+}

src/hooks/common/useCreateContext.ts

@@ -0,0 +1,20 @@
+import { provide, inject } from 'vue';
+import type { InjectionKey } from 'vue';
+
+/** 创建共享上下文状态 */
+export default function useCreateContext<T>(contextName: string = 'context') {
+  const injectKey: InjectionKey<T> = Symbol(contextName);
+
+  function useProvider(shareState: T) {
+    provide(injectKey, shareState);
+  }
+
+  function useContext() {
+    return inject(injectKey);
+  }
+
+  return {
+    useProvider,
+    useContext
+  };
+}

src/hooks/common/useRouterChange.ts

@@ -0,0 +1,42 @@
+import { useRouter } from 'vue-router';
+import { EnumRoutePaths } from '@/enum';
+import { RouteNameMap } from '@/router';
+import type { LoginModuleType } from '@/interface';
+
+export default function useRouterChange() {
+  const router = useRouter();
+
+  /**
+   * 跳转登录页面(通过vue路由)
+   * @param module - 展示的登录模块
+   * @param redirectUrl - 登录后重定向的页面路径
+   */
+  function toLogin(module: LoginModuleType = 'pwd-login', redirectUrl?: string) {
+    router.push({
+      name: RouteNameMap.get('login'),
+      params: {
+        module
+      },
+      query: {
+        redirectUrl
+      }
+    });
+  }
+  /**
+   * 跳转登录页面(通过window.location)
+   * @param module - 展示的登录模块
+   * @param redirectUrl - 登录后重定向的页面路径
+   */
+  function toLoginByLocation(module: LoginModuleType = 'pwd-login', redirectUrl?: string) {
+    let href = `${window.location.origin + EnumRoutePaths.login}/${module}`;
+    if (redirectUrl) {
+      href += redirectUrl;
+    }
+    window.location.href = href;
+  }
+
+  return {
+    toLogin,
+    toLoginByLocation
+  };
+}

src/hooks/index.ts

@@ -0,0 +1,2 @@
+export { useAppTitle, useCreateContext, useRouterChange } from './common';
+export { useCountDown, useSmsCode } from './business';