wip: coding

src/views/Login/Login.vue

@@ -30,7 +30,7 @@ const toLogin = () => {
 <template>
   <div
     :class="prefixCls"
-    class="h-[100%] relative overflow-hidden <xl:bg-v-dark <sm:px-10px <xl:px-10px <md:px-10px"
+    class="h-[100%] relative <xl:bg-v-dark <sm:px-10px <xl:px-10px <md:px-10px"
   >
     <div class="relative h-full flex mx-auto">
       <div

src/views/Login/components/RegisterForm.vue

@@ -1,17 +1,23 @@
 <script setup lang="ts">
 import { Form } from '@/components/Form'
-import { reactive } from 'vue'
+import { reactive, ref, unref } from 'vue'
 import { useI18n } from '@/hooks/web/useI18n'
-import { required } from '@/utils/formRules'
 import { useForm } from '@/hooks/web/useForm'
-import { ElButton } from 'element-plus'
+import { ElButton, ElInput, FormRules, ElMessage } from 'element-plus'
+import { getCodeApi, registerApi } from '@/api/register'
+import { useValidator } from '@/hooks/web/useValidator'
+import { IUserModel } from '@/api-types/user'
 
 const emit = defineEmits(['to-login'])
 
-const { register } = useForm()
+const { register, methods, elFormRef } = useForm()
+
+const { getFormData } = methods
 
 const { t } = useI18n()
 
+const { required, lengthRange, notSpace, notSpecialCharacters, isEqual } = useValidator()
+
 const schema = reactive<FormSchema[]>([
   {
     field: 'title',
@@ -34,7 +40,7 @@ const schema = reactive<FormSchema[]>([
   {
     field: 'password',
     label: t('login.password'),
-    value: 'admin',
+    value: '',
     component: 'InputPassword',
     colProps: {
       span: 24
@@ -43,13 +49,14 @@ const schema = reactive<FormSchema[]>([
       style: {
         width: '100%'
       },
+      strength: true,
       placeholder: t('login.passwordPlaceholder')
     }
   },
   {
     field: 'check_password',
     label: t('login.checkPassword'),
-    value: 'admin',
+    value: '',
     component: 'InputPassword',
     colProps: {
       span: 24
@@ -58,9 +65,17 @@ const schema = reactive<FormSchema[]>([
       style: {
         width: '100%'
       },
+      strength: true,
       placeholder: t('login.passwordPlaceholder')
     }
   },
+  {
+    field: 'code',
+    label: t('login.code'),
+    colProps: {
+      span: 24
+    }
+  },
   {
     field: 'register',
     colProps: {
@@ -69,14 +84,78 @@ const schema = reactive<FormSchema[]>([
   }
 ])
 
-const rules = {
-  username: [required],
-  password: [required]
+const rules: FormRules = {
+  user_name: [
+    required('用户名不能为空'),
+    {
+      validator: (_, value, callback) =>
+        lengthRange(value, callback, { min: 2, max: 10, message: '用户名长度必须在2-10之间' })
+    },
+    {
+      validator: (_, value, callback) => notSpace(value, callback, '用户名不能有空格')
+    }
+  ],
+  password: [
+    required('密码不能为空'),
+    {
+      validator: (_, value, callback) =>
+        lengthRange(value, callback, { min: 6, max: 20, message: '密码长度必须在6-20之间' })
+    },
+    {
+      validator: (_, value, callback) => notSpecialCharacters(value, callback, '密码不能是特殊字符')
+    }
+  ],
+  check_password: [
+    required('确认密码不能为空'),
+    {
+      validator: (_, value, callback) =>
+        lengthRange(value, callback, { min: 6, max: 20, message: '确认密码长度必须在6-20之间' })
+    },
+    {
+      validator: (_, value, callback) =>
+        notSpecialCharacters(value, callback, '确认密码不能是特殊字符')
+    },
+    {
+      validator: async (_, value, callback) => {
+        const formData = await getFormData<Omit<IUserModel, 'is_admin'>>()
+        return isEqual(value, formData.password, callback, '两次密码不一致')
+      }
+    }
+  ],
+  code: [required('验证码不能为空')]
 }
 
 const toLogin = () => {
   emit('to-login')
 }
+
+const codeUrl = ref('')
+const getCode = async () => {
+  const { data } = await getCodeApi()
+  codeUrl.value = data.result
+}
+getCode()
+
+const loading = ref(false)
+
+const loginRegister = async () => {
+  const formRef = unref(elFormRef)
+  formRef?.validate(async (valid) => {
+    if (valid) {
+      try {
+        loading.value = true
+        const formData = await getFormData<Omit<IUserModel, 'is_admin'>>()
+        const { data } = await registerApi(formData)
+        if (data) {
+          ElMessage.success('注册成功')
+          toLogin()
+        }
+      } finally {
+        loading.value = false
+      }
+    }
+  })
+}
 </script>
 
 <template>
@@ -93,9 +172,16 @@ const toLogin = () => {
       <h2 class="text-2xl font-bold text-center w-[100%]">{{ t('login.register') }}</h2>
     </template>
 
+    <template #code="form">
+      <div class="w-[100%] flex">
+        <ElInput v-model="form['code']" :placeholder="t('login.codePlaceholder')" class="flex-2" />
+        <div v-html="codeUrl" class="h-38px flex-1 cursor-pointer" @click="getCode"></div>
+      </div>
+    </template>
+
     <template #register>
       <div class="w-[100%]">
-        <ElButton type="primary" class="w-[100%]">
+        <ElButton type="primary" class="w-[100%]" :loading="loading" @click="loginRegister">
           {{ t('login.register') }}
         </ElButton>
       </div>