perf(login): 优化登录注册页面的用户体验

- 在 ConfigProvider 中添加 autoInsertSpaceInButton属性以禁用自动插入空格
- 优化登录表单的样式和布局
- 改进注册表单的交互逻辑，增加密码验证和错误提示功能
- 调整注册表单的样式和结构，提高可读性和易用性

src/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <ConfigProvider :locale="zhCN" :theme="redTheme">
+  <ConfigProvider :autoInsertSpaceInButton="false" :locale="zhCN" :theme="redTheme">
     <router-view v-if="$route.meta.withoutLayout" />
     <LayoutBasic v-else />
   </ConfigProvider>

src/views/login/components/login-form/index.vue

@@ -43,12 +43,12 @@
               <img :src="visible ? icon2 : icon1" width="20" height="20" class="cursor-pointer" />
             </template>
           </Input.Password>
-          <p class="color-#F64B31 text-12px font-400 lh-20px font-family-regular" v-show="errMsg">
+          <p v-show="errMsg" class="color-#F64B31 h-20px text-12px font-400 lh-20px font-family-regular">
             {{ errMsg }}
           </p>
         </FormItem>
 
-        <FormItem class="mt-52px">
+        <FormItem class="mt-32px">
           <div class="text-12px flex justify-center items-center mb-16px">
             <Checkbox v-model:checked="hasCheck" class="mr-8px"></Checkbox>
             <span class="text-12px color-#737478 font-400 lh-20px font-family-regular"
@@ -222,6 +222,9 @@ const disabledSubmitBtn = computed(() => {
 });
 
 const validateField = (field: string) => {
+  if (field === 'mobile') {
+    errMsg.value = '';
+  }
   formRef.value.validateFields(field);
 };
 

src/views/login/components/register-form/index.vue

@@ -2,12 +2,14 @@
 <template>
   <div class="flex items-center w-400 h-100%">
     <div class="w-full bg-#fff rounded-16px px-40px py-32px flex flex-col items-center">
-      <div class="flex items-center mb-24px w-full cursor-pointer" @click="onBack">
-        <icon-left size="24" class="mr-4px color-#000" />
+      <div class="flex items-center mb-24px w-full">
+        <div class="flex items-center cursor-pointer" @click="onBack">
+          <icon-left class="mr-4px color-#000" size="24" />
           <span class="color-#000 text-20px font-500 lh-28px font-family-medium">{{
             isResetPassword ? '重置密码' : '手机注册'
           }}</span>
         </div>
+      </div>
       <Form ref="formRef" :model="formData" :rules="formRules" auto-label-width class="w-320 form-wrap">
         <FormItem name="mobile">
           <Input
@@ -19,14 +21,14 @@
           />
         </FormItem>
         <FormItem name="password" class="password-form-item">
-          <Input.Password v-model:value="formData.password" placeholder="新密码" @change="clearErrorMsg">
+          <Input.Password v-model:value="formData.password" placeholder="新密码" @change="onPasswordChange">
             <template #iconRender="visible">
               <img :src="visible ? icon2 : icon1" width="20" height="20" class="cursor-pointer" />
             </template>
           </Input.Password>
         </FormItem>
         <FormItem name="confirm_password" class="password-form-item">
-          <Input.Password v-model:value="formData.confirm_password" placeholder="密码确认" @change="clearErrorMsg">
+          <Input.Password v-model:value="formData.confirm_password" placeholder="密码确认" @change="onPasswordChange">
             <template #iconRender="visible">
               <img :src="visible ? icon2 : icon1" width="20" height="20" class="cursor-pointer" />
             </template>
@@ -180,6 +182,7 @@ const formRules = {
     {
       required: true,
       validator: (_rule, value) => {
+        console.log('validator');
         // if (!value) {
         //   return Promise.reject('请输入密码确认');
         // }
@@ -229,13 +232,20 @@ const canGetCaptcha = computed(() => {
 });
 
 const disabledSubmitBtn = computed(() => {
-  return !isPassPassword.value || !hasCheck.value || !isLegalMobile.value || !formData.value.password.trim();
+  return !isPassPassword.value || !hasCheck.value || !isLegalMobile.value || !formData.value.password.trim() || !formData.value.captcha;
 });
 
 const clearErrorMsg = () => {
   errMsg.value = '';
 };
 
+const onPasswordChange = () => {
+  clearErrorMsg();
+  nextTick(() => {
+    formRef.value.clearValidate('confirm_password');
+  });
+};
+
 const validateField = (field) => {
   formRef.value.validateFields(field);
 };