renxiaodong/lingji-work-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 更新表单和按钮样式，优化验证码组件逻辑

Browse Source 
- 在 `App.vue` 中添加 `autoInsertSpaceInButton` 属性
- 更新 `login/style.scss` 和 `styles/components/ant-input.scss` 样式文件
- 优化 `verification-code/index.vue` 组件的验证逻辑和样式
- 更新 `styles/components/ant-button.scss` 样式文件
- 优化 `register-form/index.vue` 和 `change-password-modal/index.vue` 组件的密码输入逻辑和样式
This commit is contained in:
rd
2025-09-16 17:59:18 +08:00
parent c357e4a885 730d1ab227
commit 7c85582564
8 changed files with 174 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.vue
View File

@ -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>

49
src/styles/components/ant-button.scss
View File

@ -19,6 +19,7 @@
padding: 0 16px;
height: 28px;
}
}
.ant-btn-default {
&:disabled {
@ -51,6 +52,8 @@
background-color: $color-primary !important;
border-color: transparent !important;
color: #fff !important;
&:disabled {
color: #fff !important;
border-color: transparent !important;
@ -66,7 +69,12 @@
outline: none;
outline-offset: unset;
}
&:active {
background: $color-primary-7 !important;
}
}
&.ant-btn-dangerous {
background-color: $color-error !important;
&:disabled {
@ -76,6 +84,10 @@
&:hover {
background-color: $color-error-5 !important;
}
&:active {
background-color: $color-error-7 !important;
}
}
}
&.ant-btn-background-ghost {
@ -93,6 +105,11 @@
color: $color-primary-5 !important;
background-color: #fff !important;
}
&:active {
border-color: $color-primary-7 !important;
color: $color-primary-7 !important;
}
}
&.ant-btn-dangerous {
border: 1px solid $color-error !important;
@ -107,6 +124,11 @@
border-color: $color-error-5 !important;
color: $color-error-5 !important;
}
&:active {
border-color: $color-error-7 !important;
color: $color-error-7 !important;
}
}
}
}
@ -124,7 +146,13 @@
border-color: $color-primary-5 !important;
color: $color-primary-5 !important;
}
&:active {
border-color: $color-primary-7 !important;
color: $color-primary-7 !important;
}
}
&.ant-btn-dangerous {
border: 1px solid $color-error !important;
color: $color-error !important;
@ -137,6 +165,11 @@
border-color: $color-error-5 !important;
color: $color-error-5 !important;
}
&:active {
border-color: $color-error-7 !important;
color: $color-error-7 !important;
}
}
}
}
@ -154,6 +187,10 @@
color: $color-primary-5 !important;
border-color: transparent !important;
}
&:active {
color: $color-primary-7 !important;
}
}
&.ant-btn-dangerous {
color: $color-error !important;
@ -164,6 +201,10 @@
&:hover {
color: $color-error-5 !important;
}
&:active {
color: $color-error-7 !important;
}
}
}
}
@ -181,6 +222,10 @@
color: $color-primary-5 !important;
border-color: transparent !important;
}
&:active {
color: $color-primary-7 !important;
}
}
&.ant-btn-dangerous {
color: $color-error !important;
@ -191,6 +236,10 @@
&:hover {
color: $color-error-5 !important;
}
&:active {
color: $color-error-7 !important;
}
}
}
}

18
src/styles/components/ant-input.scss
View File

@ -20,6 +20,7 @@
color: var(--Text-4, #939499);
}
&:hover {
background-color: #fff !important;
}
@ -43,6 +44,15 @@
border-color: $color-error !important;
}
}
&:-webkit-autofill,
&:-webkit-autofill:hover,
&:-webkit-autofill:focus,
&:-webkit-autofill:active {
-webkit-transition-delay: 99999s;
-webkit-transition: color 99999s ease-out,
background-color 99999s ease-out;
}
}
input.ant-input {
height: 32px;
@ -64,11 +74,17 @@ textarea.ant-input {
background-color: var(--BG-200, #f2f3f5) !important;
}
&.ant-input-affix-wrapper-status-error {
&:not(.ant-input-affix-wrapper-disabled) {
&.ant-input-affix-wrapper-status-error {
border-color: $color-error !important;
}
&:hover {
border-color: $color-primary !important;
}
}
&:focus,
&-focused {
box-shadow: none !important;

38
src/views/components/management/person/components/change-password-modal/index.vue
View File

@ -14,18 +14,25 @@
<p class="cts mt-36px !color-#211F24 mb-24px">验证成功，请更改密码</p>
<Form ref="formRef" :model="formData" :rules="formRules" auto-label-width class="w-348 form-wrap">
<FormItem name="password" class="password-form-item">
<Input.Password v-model:value="formData.password" placeholder="新密码" size="large" class="!h-48px">
<Input.Password
v-model:value="formData.password"
class="!h-48px"
placeholder="新密码"
size="large"
@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">
<FormItem class="password-form-item !mb-36px" name="confirm_password">
<Input.Password
v-model:value="formData.confirm_password"
placeholder="密码确认"
size="large"
class="!h-48px"
@change="onPasswordChange"
>
<template #iconRender="visible">
<img :src="visible ? icon2 : icon1" width="20" height="20" class="cursor-pointer" />
@ -37,7 +44,7 @@
type="primary"
:disabled="disabledSubmitBtn"
:loading="submitLoading"
class="w-full !h-48px mt-36px !rounded-8px"
class="w-full !h-48px mt-36px !rounded-8px h-22px"
@click="handleSubmit"
>完成更改
</Button>
@ -54,7 +61,9 @@
<p class="cts !text-12px !lh-20px !color-#939499" v-if="countdown > 0">
{{ countdown }} 秒后您可以再次发送验证码
</p>
<Button type="text" class="pl-0" v-if="hasGetCode && countdown === 0" @click="getCaptcha">重新发送</Button>
<Button v-if="hasGetCode && countdown === 0" class="pl-0 h-22px" type="text" @click="getCaptcha"
>重新发送
</Button>
</template>
</div>
@ -79,6 +88,11 @@ import icon2 from '@/assets/img/login/icon-open.png';
const emit = defineEmits(['success', 'cancel']);
const INITIAL_FORM_DATA = {
captcha: '',
password: '',
confirm_password: '',
};
const visible = ref(false);
const phone = ref('');
const isCheckPass = ref(false);
@ -90,11 +104,7 @@ const timer = ref<number | null>(null);
const hasGetCode = ref(false);
const submitLoading = ref(false);
const verificationCodeRef = ref(null);
const formData = ref({
captcha: '',
password: '',
confirm_password: '',
});
const formData = ref(cloneDeep(INITIAL_FORM_DATA));
const formRules = {
password: [
@ -113,7 +123,7 @@ const formRules = {
{
required: true,
validator: (_rule, value) => {
if (value !== formData.value.password) {
if (value && value !== formData.value.password) {
return Promise.reject('确认密码与设置的密码不同');
}
return Promise.resolve();
@ -143,6 +153,12 @@ const onCheckPass = (captcha) => {
formData.value.captcha = captcha;
};
const onPasswordChange = () => {
nextTick(() => {
formRef.value.clearValidate('confirm_password');
});
};
const getCaptcha = async () => {
try {
const { code, message: msg } = await postUpdatePasswordCaptcha();
@ -216,6 +232,8 @@ const onClose = () => {
countdown.value = 0;
hasGetCode.value = false;
submitLoading.value = false;
isCheckPass.value = false;
formData.value = cloneDeep(INITIAL_FORM_DATA);
formRef.value?.resetFields();
formRef.value?.clearValidate();
clearTimer();

4
src/views/components/management/person/components/change-password-modal/style.scss
View File

@ -39,14 +39,10 @@
.ant-form {
.ant-form-item {
&:not(:last-child) {
margin-bottom: 24px !important;
}
.ant-input-affix-wrapper {
border-radius: 8px !important;
}
}
}

63
src/views/components/management/person/components/verification-code/index.vue
View File

@ -7,10 +7,9 @@
ref="inputRef"
:key="index"
:value="item.value"
:class="{ error: item.error, fill: item.value }"
:class="{ error: isError, fill: item.value }"
@input="handleInput(index, $event.target.value)"
@focus="handleFocus(index)"
@blur="handleBlur(index)"
@focus="handleFocus"
:maxlength="1"
placeholder=""
/>
@ -34,11 +33,21 @@ const emits = defineEmits(['success']);
const codeArray = ref([]);
const activeIndex = ref(0); // 当前激活的输入框索引
const errorMessage = ref('');
const isError = ref(false);
const inputRef = ref(null);
const handleFocus = (index) => {
isError.value = false;
errorMessage.value = '';
};
// 处理输入事件
const handleInput = (index, value) => {
if (!value || !/^\d$/.test(value)) return;
if (!value) {
return;
}
isError.value = false;
errorMessage.value = '';
codeArray.value[index].value = value;
@ -48,45 +57,36 @@ const handleInput = (index, value) => {
}
};
const handleFocus = (index) => {
activeIndex.value = index;
};
const handleBlur = (index) => {
const _value = codeArray.value[index].value;
if (!_value || !/^\d$/.test(_value)) {
codeArray.value[index].error = true;
} else {
if (errorMessage.value) {
codeArray.value.forEach((item) => {
item.error = false;
});
}
errorMessage.value = '';
codeArray.value[index].error = false;
}
};
// 验证验证码逻辑
const validateCode = async () => {
return new Promise((resolve, reject) => {
isError.value = codeArray.value.some((_value) => !_value);
isError.value ? reject() : resolve();
});
};
const onSubmit = () => {
validateCode().then(async () => {
const captcha = codeArray.value.map((item) => item.value).join('');
const { code } = await postCheckUpdatePasswordCaptcha({ captcha });
if (code === 200) {
emits('success', captcha);
} else {
inputRef.value?.[activeIndex.value]?.blur?.();
activeIndex.value = 0;
inputRef.value?.[activeIndex.value]?.focus?.();
errorMessage.value = '验证码错误，请检查后重试';
isError.value = true;
codeArray.value.forEach((item) => {
item.error = true;
item.value = '';
});
}
});
};
const init = () => {
activeIndex.value = 0;
errorMessage.value = '';
isError.value = false;
inputRef.value = null;
codeArray.value = new Array(6).fill().map(() => ({ value: '', error: false }));
@ -100,7 +100,7 @@ watch(
() => codeArray.value,
(newVal) => {
if (newVal.every((item) => item.value)) {
validateCode();
onSubmit();
}
},
{ deep: true },
@ -129,17 +129,20 @@ defineExpose({ init });
caret-color: #6d4cfe;
&.error {
border-color: #f64b31 !important;
}
&:hover {
border-color: #6d4cfe !important;
}
&:focus-within {
border-color: #6d4cfe !important;
}
&.fill {
color: #6d4cfe;
}
&.error {
border-color: #f64b31 !important;
}
}
}
}

25
src/views/login/components/register-form/index.vue
View File

@ -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>
@ -48,12 +50,12 @@
</div>
</template>
</Input>
<p class="color-#F64B31 text-12px font-400 lh-20px font-family-regular" v-show="errMsg">
<p class="color-#F64B31 text-12px font-400 lh-20px h-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"
@ -186,7 +188,7 @@ const formRules = {
// if (value.length < 6) {
// return Promise.reject('密码长度不能小于6位');
// }
if (value !== formData.value.password) {
if (value && value !== formData.value.password) {
return Promise.reject('确认密码与设置的密码不同');
}
return Promise.resolve();
@ -229,13 +231,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);
};

25
src/views/login/style.scss
View File

@ -6,11 +6,11 @@
}
.ant-input-affix-wrapper {
height: 48px;
padding: 0 10px;
padding: 10px 16px;
border-radius: 8px !important;
.ant-input {
border-radius: 8px !important;
font-size: 16px;
font-size: 16px !important;
font-style: normal;
font-weight: 400;
line-height: 24px;
@ -44,16 +44,17 @@
}
}
}
:deep(.btn-login) {
&:disabled {
background-color: #c5b7ff !important;
}
&:not(:disabled) {
&:hover {
background-color: $color-primary-3 !important;
}
}
}
//:deep(.btn-login) {
// //&:disabled {
// // background-color: #c5b7ff !important;
// //}
// //&:not(:disabled) {
// // &:hover {
// // background-color: $color-primary-3 !important;
// // }
// //}
//}
.login-bg {
position: fixed;
left: 0;