feat(mock): Add mock

src/config/axios.ts

@@ -0,0 +1,46 @@
+const config: {
+  base_url: {
+    base: string
+    dev: string
+    pro: string
+    test: string
+  }
+  result_code: number | string
+  default_headers: AxiosHeadersType
+  request_timeout: number
+} = {
+  /**
+   * api请求基础路径
+   */
+  base_url: {
+    // 开发环境接口前缀
+    base: '',
+
+    // 打包开发环境接口前缀
+    dev: '',
+
+    // 打包生产环境接口前缀
+    pro: '',
+
+    // 打包测试环境接口前缀
+    test: ''
+  },
+
+  /**
+   * 接口成功返回状态码
+   */
+  result_code: '0000',
+
+  /**
+   * 接口请求超时时间
+   */
+  request_timeout: 60000,
+
+  /**
+   * 默认接口请求类型
+   * 可选值：application/x-www-form-urlencoded multipart/form-data
+   */
+  default_headers: 'application/json'
+}
+
+export { config }

src/hooks/web/useAxios.ts

@@ -0,0 +1,37 @@
+import { service } from '@/plugins/axios'
+
+import { AxiosPromise } from 'axios'
+
+import { useAppStoreWithOut } from '@/store/modules/app'
+
+import { config } from '@/config/axios'
+
+const appStore = useAppStoreWithOut()
+
+const { default_headers } = config
+
+export function useAxios() {
+  function request({
+    url,
+    method,
+    params,
+    data,
+    headersType,
+    responseType
+  }: AxiosConfig): AxiosPromise {
+    return service({
+      url: url,
+      method,
+      params: appStore.getRequestTime ? { time: new Date().getTime(), ...(params || {}) } : params,
+      data,
+      responseType: responseType,
+      headers: {
+        'Content-Type': headersType || default_headers
+      }
+    })
+  }
+
+  return {
+    request
+  }
+}

src/plugins/axios/index.ts

@@ -0,0 +1,77 @@
+import axios, {
+  AxiosInstance,
+  AxiosRequestConfig,
+  AxiosRequestHeaders,
+  AxiosResponse,
+  AxiosError
+} from 'axios'
+
+import { ElMessage } from 'element-plus'
+
+import qs from 'qs'
+
+import { config } from '@/config/axios'
+
+const { result_code, base_url } = config
+
+export const PATH_URL = base_url[import.meta.env.VITE_API_BASEPATH as string]
+
+// 创建axios实例
+const service: AxiosInstance = axios.create({
+  baseURL: PATH_URL, // api 的 base_url
+  timeout: config.request_timeout // 请求超时时间
+})
+
+// request拦截器
+service.interceptors.request.use(
+  (config: AxiosRequestConfig) => {
+    console.log('我进来了吗')
+    if (
+      config.method === 'post' &&
+      (config.headers as AxiosRequestHeaders)['Content-Type'] ===
+        'application/x-www-form-urlencoded'
+    ) {
+      config.data = qs.stringify(config.data)
+    }
+    // get参数编码
+    if (config.method === 'get' && config.params) {
+      let url = config.url as string
+      url += '?'
+      const keys = Object.keys(config.params)
+      for (const key of keys) {
+        if (config.params[key] !== void 0 && config.params[key] !== null) {
+          url += `${key}=${encodeURIComponent(config.params[key])}&`
+        }
+      }
+      url = url.substring(0, url.length - 1)
+      config.params = {}
+      config.url = url
+    }
+    return config
+  },
+  (error: AxiosError) => {
+    // Do something with request error
+    console.log(error) // for debug
+    Promise.reject(error)
+  }
+)
+
+// response 拦截器
+service.interceptors.response.use(
+  (response: AxiosResponse<Recordable>) => {
+    console.log(response)
+    if (response.data.code === result_code) {
+      return response.data
+    } else {
+      ElMessage.error(response.data.message)
+    }
+  },
+  (error: AxiosError) => {
+    console.log(error)
+    console.log('err' + error) // for debug
+    ElMessage.error(error.message)
+    return Promise.reject(error)
+  }
+)
+
+export { service }

src/types/componentType/configGlobal.d.ts

@@ -1,3 +0,0 @@
-declare interface ConfigGlobalTypes {
-  size?: ElememtPlusSzie
-}

src/types/componentType/form.d.ts

@@ -1,97 +0,0 @@
-import type { CSSProperties } from 'vue'
-
-declare global {
-  declare type ComponentName =
-    | 'Radio'
-    | 'RadioButton'
-    | 'Checkbox'
-    | 'CheckboxButton'
-    | 'Input'
-    | 'Autocomplete'
-    | 'InputNumber'
-    | 'Select'
-    | 'Cascader'
-    | 'Switch'
-    | 'Slider'
-    | 'TimePicker'
-    | 'DatePicker'
-    | 'Rate'
-    | 'ColorPicker'
-    | 'Transfer'
-    | 'Divider'
-    | 'TimeSelect'
-    | 'SelectV2'
-    | 'InputPassword'
-
-  declare type ColProps = {
-    span?: number
-    xs?: number
-    sm?: number
-    md?: number
-    lg?: number
-    xl?: number
-    tag?: string
-  }
-
-  declare type FormValueType = string | number | string[] | number[] | boolean | undefined | null
-
-  declare type FormItemProps = {
-    labelWidth?: string | number
-    required?: boolean
-    rules?: Recordable
-    error?: string
-    showMessage?: boolean
-    inlineMessage?: boolean
-    style?: CSSProperties
-  }
-
-  declare type ComponentOptions = {
-    label?: string
-    value?: FormValueType
-    disabled?: boolean
-    key?: string | number
-    children?: ComponentOptions[]
-    options?: ComponentOptions[]
-  } & Recordable
-
-  declare type ComponentOptionsAlias = {
-    labelField?: string
-    valueField?: string
-  }
-
-  declare type ComponentProps = {
-    optionsAlias?: ComponentOptionsAlias
-    options?: ComponentOptions[]
-    optionsSlot?: boolean
-  } & Recordable
-
-  declare type FormSchema = {
-    // 唯一值
-    field: string
-    // 标题
-    label?: string
-    // col组件属性
-    colProps?: ColProps
-    // 表单组件属性，slots对应的是表单组件的插槽，规则：${field}-xxx，具体可以查看element-plus文档
-    componentProps?: { slots?: Recordable } & ComponentProps
-    // formItem组件属性
-    formItemProps?: FormItemProps
-    // 渲染的组件
-    component?: ComponentName
-    // 初始值
-    value?: FormValueType
-    // 是否隐藏
-    hidden?: boolean
-  }
-
-  declare type FormSetValuesType = {
-    field: string
-    value: FormValueType
-  }
-
-  declare type FormSetPropsType = {
-    field: string
-    path: string
-    value: any
-  }
-}

src/types/componentType/icon.d.ts

@@ -1,5 +0,0 @@
-declare interface IconTypes {
-  size?: number
-  color?: string
-  icon: string
-}

src/types/componentType/localeDropdown.d.ts

@@ -1,10 +0,0 @@
-declare interface Language {
-  el: Recordable
-  name: string
-}
-
-declare interface LocaleDropdownType {
-  lang: LocaleType
-  name?: string
-  elLocale?: Language
-}

src/types/components.d.ts

@@ -1,7 +0,0 @@
-declare module 'vue' {
-  export interface GlobalComponents {
-    Icon: typeof import('../components/Icon/src/Icon.vue')['default']
-  }
-}
-
-export {}

src/types/env.d.ts

@@ -1,14 +0,0 @@
-/// <reference types="vite/client" />
-
-declare module '*.vue' {
-  import { DefineComponent } from 'vue'
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
-  const component: DefineComponent<{}, {}, any>
-  export default component
-}
-
-declare global {
-  interface ImportMeta {
-    env: Record<string, unknown>
-  }
-}

src/types/global.d.ts

@@ -1,17 +0,0 @@
-declare interface Fn<T = any> {
-  (...arg: T[]): T
-}
-
-declare type Nullable<T> = T | null
-
-declare type ElRef<T extends HTMLElement = HTMLDivElement> = Nullable<T>
-
-declare type ElememtPlusSzie = 'default' | 'small' | 'large'
-
-declare type ElementPlusInfoType = 'success' | 'info' | 'warning' | 'danger'
-
-declare type Recordable<T = any, K = string> = Record<K extends null | undefined ? string : K, T>
-
-declare type ComponentRef<T> = InstanceType<T>
-
-declare type LocaleType = 'zh-CN' | 'en'

src/types/router.d.ts

@@ -1,69 +0,0 @@
-import type { RouteRecordRaw } from 'vue-router'
-import { defineComponent } from 'vue'
-
-/**
-* redirect: noredirect        当设置 noredirect 的时候该路由在面包屑导航中不可被点击
-* name:'router-name'          设定路由的名字，一定要填写不然使用<keep-alive>时会出现各种问题
-* meta : {
-    hidden: true              当设置 true 的时候该路由不会再侧边栏出现 如404，login等页面(默认 false)
-
-    alwaysShow: true          当你一个路由下面的 children 声明的路由大于1个时，自动会变成嵌套的模式，
-                              只有一个时，会将那个子路由当做根路由显示在侧边栏，
-                              若你想不管路由下面的 children 声明的个数都显示你的根路由，
-                              你可以设置 alwaysShow: true，这样它就会忽略之前定义的规则，
-                              一直显示根路由(默认 false)
-
-    title: 'title'            设置该路由在侧边栏和面包屑中展示的名字
-
-    icon: 'svg-name'          设置该路由的图标
-
-    noCache: true             如果设置为true，则不会被 <keep-alive> 缓存(默认 false)
-
-    breadcrumb: false         如果设置为false，则不会在breadcrumb面包屑中显示(默认 true)
-
-    affix: true               如果设置为true，则会一直固定在tag项中(默认 false)
-
-    noTagsView: true          如果设置为true，则不会出现在tag中(默认 false)
-
-    activeMenu: '/dashboard'  显示高亮的路由路径
-
-    followAuth: '/dashboard'  跟随哪个路由进行权限过滤
-
-    canTo: true               设置为true即使hidden为true，也依然可以进行路由跳转(默认 false)
-
-    followRoute: '/dashboard' 为路由设置跟随其他路由的权限
-  }
-**/
-declare module 'vue-router' {
-  interface RouteMeta extends Record<string | number | symbol, unknown> {
-    hidden?: boolean
-    alwaysShow?: boolean
-    title?: string
-    icon?: string
-    noCache?: boolean
-    breadcrumb?: boolean
-    affix?: boolean
-    activeMenu?: string
-    noTagsView?: boolean
-    followAuth?: string
-    canTo?: boolean
-    followRoute?: string
-  }
-}
-
-type Component<T = any> =
-  | ReturnType<typeof defineComponent>
-  | (() => Promise<typeof import('*.vue')>)
-  | (() => Promise<T>)
-
-declare global {
-  declare interface AppRouteRecordRaw extends Omit<RouteRecordRaw, 'meta'> {
-    name: string
-    meta: RouteMeta
-    component?: Component | string
-    components?: Component
-    children?: AppRouteRecordRaw[]
-    props?: Recordable
-    fullPath?: string
-  }
-}

src/views/Login/Login.vue

@@ -44,7 +44,7 @@ const prefixCls = getPrefixCls('login')
           </TransitionGroup>
         </div>
       </div>
-      <div class="flex-1 @2xl:p-30px @xl:p-30px @md:p-30px <md:pt-30px dark:bg-v-dark relative">
+      <div class="flex-1 p-30px <sm:p-10px dark:bg-v-dark relative">
         <div class="flex justify-between items-center text-white @2xl:justify-end @xl:justify-end">
           <div class="flex items-center @2xl:hidden @xl:hidden">
             <img src="@/assets/imgs/logo.png" alt="" class="w-48px h-48px mr-10px" />

src/views/Login/api.ts

@@ -0,0 +1,7 @@
+import { useAxios } from '@/hooks/web/useAxios'
+
+const { request } = useAxios()
+
+export const loginApi = ({ data }: AxiosConfig) => {
+  return request({ url: '/user/login', method: 'post', data })
+}

src/views/Login/components/LoginForm.vue

@@ -5,6 +5,7 @@ import { useI18n } from '@/hooks/web/useI18n'
 import { ElButton, ElCheckbox, ElLink } from 'element-plus'
 import { required } from '@/utils/formRules'
 import { useForm } from '@/hooks/web/useForm'
+import { loginApi } from '../api'
 
 const { t } = useI18n()
 
@@ -87,7 +88,10 @@ async function signIn() {
     loading.value = true
     const { getFormData } = methods
     const formData = await getFormData()
-    console.log(formData)
+    const res = await loginApi({
+      data: formData
+    })
+    console.log(res)
     loading.value = false
   }
 }