feat: 搭建后台管理框架

src/views/Login/components/LoginForm.vue

@@ -0,0 +1,251 @@
+<script setup lang="tsx">
+import { reactive, ref, watch, onMounted, unref } from 'vue'
+import { Form, FormSchema } from '@/components/Form'
+import { useI18n } from '@/hooks/web/useI18n'
+import { ElCheckbox, ElLink } from 'element-plus'
+import { useForm } from '@/hooks/web/useForm'
+import { loginApi, getTestRoleApi, getAdminRoleApi } from '@/api/login'
+import { useAppStore } from '@/store/modules/app'
+import { usePermissionStore } from '@/store/modules/permission'
+import { useRouter } from 'vue-router'
+import type { RouteLocationNormalizedLoaded, RouteRecordRaw } from 'vue-router'
+import { UserType } from '@/api/login/types'
+import { useValidator } from '@/hooks/web/useValidator'
+import { useUserStore } from '@/store/modules/user'
+import { BaseButton } from '@/components/Button'
+
+const { required } = useValidator()
+
+const emit = defineEmits(['to-register'])
+
+const appStore = useAppStore()
+
+const userStore = useUserStore()
+
+const permissionStore = usePermissionStore()
+
+const { currentRoute, addRoute, push } = useRouter()
+
+const { t } = useI18n()
+
+const rules = {
+  username: [required()],
+  password: [required()]
+}
+
+const schema = reactive<FormSchema[]>([
+  {
+    field: 'title',
+    colProps: {
+      span: 24
+    },
+    formItemProps: {
+      slots: {
+        default: () => {
+          return (
+            <div class="login-heading">
+              <h2>{t('login.login')}</h2>
+              <p>{t('login.hint')}</p>
+            </div>
+          )
+        }
+      }
+    }
+  },
+  {
+    field: 'username',
+    label: t('login.username'),
+    // value: 'admin',
+    component: 'Input',
+    colProps: {
+      span: 24
+    },
+    componentProps: {
+      placeholder: 'admin'
+    }
+  },
+  {
+    field: 'password',
+    label: t('login.password'),
+    // value: 'admin',
+    component: 'InputPassword',
+    colProps: {
+      span: 24
+    },
+    componentProps: {
+      style: {
+        width: '100%'
+      },
+      placeholder: 'admin123'
+    }
+  },
+  {
+    field: 'tool',
+    colProps: {
+      span: 24
+    },
+    formItemProps: {
+      slots: {
+        default: () => {
+          return (
+            <>
+              <div class="flex justify-between items-center w-[100%]">
+                <ElCheckbox v-model={remember.value} label={t('login.remember')} size="small" />
+                <ElLink type="primary" underline={false}>
+                  {t('login.forgetPassword')}
+                </ElLink>
+              </div>
+            </>
+          )
+        }
+      }
+    }
+  },
+  {
+    field: 'login',
+    colProps: {
+      span: 24
+    },
+    formItemProps: {
+      slots: {
+        default: () => {
+          return (
+            <>
+              <div class="w-[100%]">
+                <BaseButton
+                  loading={loading.value}
+                  type="primary"
+                  class="w-[100%]"
+                  onClick={signIn}
+                >
+                  {t('login.login')}
+                </BaseButton>
+              </div>
+              <div class="login-register">
+                <span>{t('login.noAccount')}</span>
+                <button type="button" onClick={toRegister}>
+                  {t('login.register')}
+                </button>
+              </div>
+            </>
+          )
+        }
+      }
+    }
+  }
+])
+
+const remember = ref(userStore.getRememberMe)
+
+const initLoginInfo = () => {
+  const loginInfo = userStore.getLoginInfo
+  if (loginInfo) {
+    const { username, password } = loginInfo
+    setValues({ username, password })
+  }
+}
+onMounted(() => {
+  initLoginInfo()
+})
+
+const { formRegister, formMethods } = useForm()
+const { getFormData, getElFormExpose, setValues } = formMethods
+
+const loading = ref(false)
+
+const redirect = ref<string>('')
+
+watch(
+  () => currentRoute.value,
+  (route: RouteLocationNormalizedLoaded) => {
+    redirect.value = route?.query?.redirect as string
+  },
+  {
+    immediate: true
+  }
+)
+
+// 登录
+const signIn = async () => {
+  const formRef = await getElFormExpose()
+  await formRef?.validate(async (isValid) => {
+    if (isValid) {
+      loading.value = true
+      const formData = await getFormData<UserType>()
+
+      try {
+        const res = await loginApi(formData)
+
+        if (res) {
+          // 是否记住我
+          if (unref(remember)) {
+            userStore.setLoginInfo({
+              username: formData.username,
+              password: formData.password
+            })
+          } else {
+            userStore.setLoginInfo(undefined)
+          }
+          userStore.setRememberMe(unref(remember))
+          userStore.setUserInfo(res.data)
+          // 是否使用动态路由
+          if (appStore.getDynamicRouter) {
+            getRole()
+          } else {
+            await permissionStore.generateRoutes('static').catch(() => {})
+            permissionStore.getAddRouters.forEach((route) => {
+              addRoute(route as RouteRecordRaw) // 动态添加可访问路由表
+            })
+            permissionStore.setIsAddRouters(true)
+            push({ path: redirect.value || permissionStore.addRouters[0].path })
+          }
+        }
+      } finally {
+        loading.value = false
+      }
+    }
+  })
+}
+
+// 获取角色信息
+const getRole = async () => {
+  const formData = await getFormData<UserType>()
+  const params = {
+    roleName: formData.username
+  }
+  const res =
+    appStore.getDynamicRouter && appStore.getServerDynamicRouter
+      ? await getAdminRoleApi(params)
+      : await getTestRoleApi(params)
+  if (res) {
+    const routers = res.data || []
+    userStore.setRoleRouters(routers)
+    appStore.getDynamicRouter && appStore.getServerDynamicRouter
+      ? await permissionStore.generateRoutes('server', routers).catch(() => {})
+      : await permissionStore.generateRoutes('frontEnd', routers).catch(() => {})
+
+    permissionStore.getAddRouters.forEach((route) => {
+      addRoute(route as RouteRecordRaw) // 动态添加可访问路由表
+    })
+    permissionStore.setIsAddRouters(true)
+    push({ path: redirect.value || permissionStore.addRouters[0].path })
+  }
+}
+
+// 去注册页面
+const toRegister = () => {
+  emit('to-register')
+}
+</script>
+
+<template>
+  <Form
+    :schema="schema"
+    :rules="rules"
+    label-position="top"
+    hide-required-asterisk
+    size="large"
+    class="login-form"
+    @register="formRegister"
+  />
+</template>