feat: 搭建后台管理框架

src/views/Login/components/RegisterForm.vue

@@ -0,0 +1,170 @@
+<script setup lang="tsx">
+import { Form, FormSchema } from '@/components/Form'
+import { reactive, ref } from 'vue'
+import { useI18n } from '@/hooks/web/useI18n'
+import { useForm } from '@/hooks/web/useForm'
+import { ElButton, ElInput, FormRules } from 'element-plus'
+import { useValidator } from '@/hooks/web/useValidator'
+
+const emit = defineEmits(['to-login'])
+
+const { formRegister, formMethods } = useForm()
+const { getElFormExpose } = formMethods
+
+const { t } = useI18n()
+
+const { required } = useValidator()
+
+const schema = reactive<FormSchema[]>([
+  {
+    field: 'title',
+    colProps: {
+      span: 24
+    },
+    formItemProps: {
+      slots: {
+        default: () => {
+          return (
+            <div class="login-heading">
+              <h2>{t('login.register')}</h2>
+              <p>{t('login.message')}</p>
+            </div>
+          )
+        }
+      }
+    }
+  },
+  {
+    field: 'username',
+    label: t('login.username'),
+    value: '',
+    component: 'Input',
+    colProps: {
+      span: 24
+    },
+    componentProps: {
+      placeholder: t('login.usernamePlaceholder')
+    }
+  },
+  {
+    field: 'password',
+    label: t('login.password'),
+    value: '',
+    component: 'InputPassword',
+    colProps: {
+      span: 24
+    },
+    componentProps: {
+      style: {
+        width: '100%'
+      },
+      strength: true,
+      placeholder: t('login.passwordPlaceholder')
+    }
+  },
+  {
+    field: 'check_password',
+    label: t('login.checkPassword'),
+    value: '',
+    component: 'InputPassword',
+    colProps: {
+      span: 24
+    },
+    componentProps: {
+      style: {
+        width: '100%'
+      },
+      strength: true,
+      placeholder: t('login.passwordPlaceholder')
+    }
+  },
+  {
+    field: 'code',
+    label: t('login.code'),
+    colProps: {
+      span: 24
+    },
+    formItemProps: {
+      slots: {
+        default: (formData) => {
+          return (
+            <div class="w-[100%] flex">
+              <ElInput v-model={formData.code} placeholder={t('login.codePlaceholder')} />
+            </div>
+          )
+        }
+      }
+    }
+  },
+  {
+    field: 'register',
+    colProps: {
+      span: 24
+    },
+    formItemProps: {
+      slots: {
+        default: () => {
+          return (
+            <>
+              <div class="w-[100%]">
+                <ElButton
+                  type="primary"
+                  class="w-[100%]"
+                  loading={loading.value}
+                  onClick={loginRegister}
+                >
+                  {t('login.register')}
+                </ElButton>
+              </div>
+              <div class="w-[100%] mt-15px">
+                <ElButton class="w-[100%]" onClick={toLogin}>
+                  {t('login.hasUser')}
+                </ElButton>
+              </div>
+            </>
+          )
+        }
+      }
+    }
+  }
+])
+
+const rules: FormRules = {
+  username: [required()],
+  password: [required()],
+  check_password: [required()],
+  code: [required()]
+}
+
+const toLogin = () => {
+  emit('to-login')
+}
+
+const loading = ref(false)
+
+const loginRegister = async () => {
+  const formRef = await getElFormExpose()
+  formRef?.validate(async (valid) => {
+    if (valid) {
+      try {
+        loading.value = true
+        toLogin()
+      } finally {
+        loading.value = false
+      }
+    }
+  })
+}
+</script>
+
+<template>
+  <Form
+    :schema="schema"
+    :rules="rules"
+    label-position="top"
+    hide-required-asterisk
+    size="large"
+    class="login-form"
+    @register="formRegister"
+  />
+</template>