feat(projects): login, antdv useApp, form

src/App.vue

@@ -11,7 +11,9 @@ const theme = useThemeStore();
 
 <template>
   <ConfigProvider :theme="theme.antdTheme">
-    <RouterView />
+    <AppProvider>
+      <RouterView />
+    </AppProvider>
   </ConfigProvider>
 </template>
 

src/components/common/app-provider.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { App } from 'ant-design-vue';
+import { defineComponent, createTextVNode } from 'vue';
+
+defineOptions({
+  name: 'AppProvider'
+});
+
+const ContextHolder = defineComponent({
+  name: 'ContextHolder',
+  setup() {
+    const { message, modal, notification } = App.useApp();
+
+    function register() {
+      window.$message = message;
+      window.$modal = modal;
+      window.$notification = notification;
+    }
+
+    register();
+  },
+  render() {
+    return createTextVNode();
+  }
+});
+</script>
+
+<template>
+  <App class="h-full">
+    <ContextHolder />
+    <slot></slot>
+  </App>
+</template>
+
+<style scoped></style>

src/constants/reg.ts

@@ -0,0 +1,34 @@
+export const REG_USER_NAME = /^[\u4e00-\u9fa5a-zA-Z0-9_-]{4,16}$/;
+
+/**
+ * phone reg
+ */
+export const REG_PHONE =
+  /^[1](([3][0-9])|([4][01456789])|([5][012356789])|([6][2567])|([7][0-8])|([8][0-9])|([9][012356789]))[0-9]{8}$/;
+
+/**
+ * password reg
+ * @description 6-18 characters, including letters, numbers, and underscores
+ */
+export const REG_PWD = /^\w{6,18}$/;
+
+/**
+ * email reg
+ */
+export const REG_EMAIL = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
+
+/**
+ * six digit code reg
+ */
+export const REG_CODE_SIX = /^\d{6}$/;
+
+/**
+ * four digit code reg
+ */
+export const REG_CODE_FOUR = /^\d{4}$/;
+
+/**
+ * url reg
+ */
+export const REG_URL =
+  /(((^https?:(?:\/\/)?)(?:[-;:&=+$,\w]+@)?[A-Za-z0-9.-]+(?::\d+)?|(?:www.|[-;:&=+$,\w]+@)[A-Za-z0-9.-]+)((?:\/[+~%/.\w-_]*)?\??(?:[-+=&;%@.\w_]*)#?(?:[\w]*))?)$/;

src/hooks/common/form.ts

@@ -0,0 +1,74 @@
+import { ref } from 'vue';
+import type { FormInstance } from 'ant-design-vue';
+import { REG_USER_NAME, REG_PHONE, REG_PWD, REG_CODE_SIX, REG_EMAIL } from '@/constants/reg';
+import { $t } from '@/locales';
+
+export function useFormRules() {
+  const constantRules = {
+    userName: [
+      createRequiredRule($t('form.userName.required')),
+      {
+        pattern: REG_USER_NAME,
+        message: $t('form.userName.invalid'),
+        trigger: 'change'
+      }
+    ],
+    phone: [
+      createRequiredRule($t('form.phone.required')),
+      {
+        pattern: REG_PHONE,
+        message: $t('form.phone.invalid'),
+        trigger: 'change'
+      }
+    ],
+    pwd: [
+      createRequiredRule($t('form.pwd.required')),
+      {
+        pattern: REG_PWD,
+        message: $t('form.pwd.invalid'),
+        trigger: 'change'
+      }
+    ],
+    code: [
+      createRequiredRule($t('form.code.required')),
+      {
+        pattern: REG_CODE_SIX,
+        message: $t('form.code.invalid'),
+        trigger: 'change'
+      }
+    ],
+    email: [
+      createRequiredRule($t('form.email.required')),
+      {
+        pattern: REG_EMAIL,
+        message: $t('form.email.invalid'),
+        trigger: 'change'
+      }
+    ]
+  } satisfies Record<string, App.Global.FormRule[]>;
+
+  function createRequiredRule(message: string) {
+    return {
+      required: true,
+      message
+    };
+  }
+
+  return {
+    constantRules,
+    createRequiredRule
+  };
+}
+
+export function useAntdForm() {
+  const formRef = ref<FormInstance | null>(null);
+
+  async function validate() {
+    await formRef.value?.validate();
+  }
+
+  return {
+    formRef,
+    validate
+  };
+}

src/hooks/common/router.ts

@@ -40,6 +40,10 @@ export function useRouterPush(inSetup = true) {
     return routerPush(routeLocation);
   }
 
+  async function toHome() {
+    return routerPushByKey('root');
+  }
+
   /**
    * navigate to login page
    * @param loginModule the login module
@@ -73,13 +77,27 @@ export function useRouterPush(inSetup = true) {
     return routerPushByKey('login', { query, params: { module } });
   }
 
+  /**
+   * redirect from login
+   */
+  async function redirectFromLogin() {
+    const redirect = route.value.query?.redirect as string;
+
+    if (redirect) {
+      routerPush(redirect);
+    } else {
+      toHome();
+    }
+  }
+
   return {
     route,
     routerPush,
     routerBack,
     routerPushByKey,
     toLogin,
-    toggleLoginModule
+    toggleLoginModule,
+    redirectFromLogin
   };
 }
 

src/locales/lang/en.ts

@@ -50,8 +50,8 @@ const local: App.I18n.Schema = {
         confirm: 'Confirm',
         back: 'Back',
         validateSuccess: 'Verification passed',
-        loginSuccess: 'Login success',
-        welcomeBack: 'Welcome back, {userName}!'
+        loginSuccess: 'Login successfully',
+        welcomeBack: 'Welcome back, {userName} !'
       },
       pwdLogin: {
         title: 'Password Login',
@@ -82,6 +82,28 @@ const local: App.I18n.Schema = {
         title: 'Bind WeChat'
       }
     }
+  },
+  form: {
+    userName: {
+      required: 'Please enter user name',
+      invalid: 'User name format is incorrect'
+    },
+    phone: {
+      required: 'Please enter phone number',
+      invalid: 'Phone number format is incorrect'
+    },
+    pwd: {
+      required: 'Please enter password',
+      invalid: 'Password format is incorrect'
+    },
+    code: {
+      required: 'Please enter verification code',
+      invalid: 'Verification code format is incorrect'
+    },
+    email: {
+      required: 'Please enter email',
+      invalid: 'Email format is incorrect'
+    }
   }
 };
 

src/locales/lang/zh-CN.ts

@@ -51,7 +51,7 @@ const local: App.I18n.Schema = {
         back: '返回',
         validateSuccess: '验证成功',
         loginSuccess: '登录成功',
-        welcomeBack: '欢迎回来，{userName}!'
+        welcomeBack: '欢迎回来，{userName} ！'
       },
       pwdLogin: {
         title: '密码登录',
@@ -82,6 +82,28 @@ const local: App.I18n.Schema = {
         title: '绑定微信'
       }
     }
+  },
+  form: {
+    userName: {
+      required: '请输入用户名',
+      invalid: '用户名格式不正确'
+    },
+    phone: {
+      required: '请输入手机号',
+      invalid: '手机号格式不正确'
+    },
+    pwd: {
+      required: '请输入密码',
+      invalid: '密码格式不正确'
+    },
+    code: {
+      required: '请输入验证码',
+      invalid: '验证码格式不正确'
+    },
+    email: {
+      required: '请输入邮箱',
+      invalid: '邮箱格式不正确'
+    }
   }
 };
 

src/service/api/auth.ts

@@ -6,12 +6,31 @@ import { request } from '../request';
  * @param password password
  */
 export function fetchLogin(userName: string, password: string) {
-  return request<App.Service.Response<Api.Auth.LoginToken>>({
-    url: '/auth/login',
+  return request<App.Service.Response<Api.Auth.LoginToken>>('/auth/login', {
     method: 'post',
-    data: {
+    body: {
       userName,
       password
     }
   });
 }
+
+/**
+ * get user info
+ */
+export function fetchGetUserInfo() {
+  return request<App.Service.Response<Api.Auth.UserInfo>>('/auth/getUserInfo');
+}
+
+/**
+ * refresh token
+ * @param refreshToken refresh token
+ */
+export function fetchRefreshToken(refreshToken: string) {
+  return request<App.Service.Response<Api.Auth.LoginToken>>('/auth/refreshToken', {
+    method: 'post',
+    body: {
+      refreshToken
+    }
+  });
+}

src/service/api/index.ts

@@ -1,2 +1,2 @@
 export * from './auth';
-// export * from './route';
+export * from './route';

src/service/api/route.ts

@@ -0,0 +1,18 @@
+import { request } from '../request';
+
+/**
+ * get user routes
+ * @param example whether to use example data, default: 0
+ */
+export function fetchGetUserRoutes(example: '0' | '1' = '0') {
+  return request<App.Service.Response<Api.Route.UserRoute>>('/route/getUserRoute', { params: { example } });
+}
+
+/**
+ * whether the route is exist
+ * @param routeName route name
+ * @param example whether to use example data, default: 0
+ */
+export function fetchIsRouteExist(routeName: string, example: '0' | '1' = '0') {
+  return request<App.Service.Response<boolean>>('/route/isRouteExist', { params: { routeName, example } });
+}

src/service/request/index.ts

@@ -1,15 +1,25 @@
-import { createAxios } from '@sa/request';
+import { localStg } from '@/utils/storage';
+import { createOfetch as createRequest } from '@sa/request';
 import { createServiceConfig, createProxyPattern } from '~/env.config';
 
 const { baseURL, otherBaseURL } = createServiceConfig(import.meta.env);
 
 const isHttpProxy = import.meta.env.VITE_HTTP_PROXY === 'Y';
 
-export const request = createAxios({
+export const request = createRequest({
   baseURL: isHttpProxy ? createProxyPattern() : baseURL,
   headers: {
     apifoxToken: 'XL299LiMEDZ0H5h3A29PxwQXdMJqWyY2'
+  },
+  onRequest({ options }) {
+    if (options.headers) {
+      const token = localStg.get('token');
+
+      const Authorization = token ? `Bearer ${token}` : '';
+
+      Object.assign(options.headers, { Authorization });
+    }
   }
 });
 
-export const demoRequest = createAxios({ baseURL: isHttpProxy ? createProxyPattern('demo') : otherBaseURL.demo });
+export const demoRequest = createRequest({ baseURL: isHttpProxy ? createProxyPattern('demo') : otherBaseURL.demo });