From 348ad2a6adefd740cd6c6bbf987808d4bafa6792 Mon Sep 17 00:00:00 2001 From: rd <1344903914@qq.com> Date: Mon, 15 Sep 2025 17:57:39 +0800 Subject: [PATCH 1/9] =?UTF-8?q?style:=20=E8=B0=83=E6=95=B4=E7=99=BB?= =?UTF-8?q?=E5=BD=95=E8=A1=A8=E5=8D=95=E6=A0=B7=E5=BC=8F=E5=92=8C=E6=8C=89?= =?UTF-8?q?=E9=92=AE=E5=B8=83=E5=B1=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 更新 `login/style.scss` 中的输入框内边距和字体大小 - 在 `ant-input.scss` 中添加自动填充样式 - 修改 `login-form/index.vue` 中忘记密码按钮的显示逻辑 --- src/styles/components/ant-input.scss | 20 +++++++++++++++++-- .../login/components/login-form/index.vue | 20 +++++++++++-------- src/views/login/style.scss | 4 ++-- 3 files changed, 32 insertions(+), 12 deletions(-) diff --git a/src/styles/components/ant-input.scss b/src/styles/components/ant-input.scss index 1f99625..7327837 100644 --- a/src/styles/components/ant-input.scss +++ b/src/styles/components/ant-input.scss @@ -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) { + &: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; diff --git a/src/views/login/components/login-form/index.vue b/src/views/login/components/login-form/index.vue index 3630f5a..bbc29ba 100644 --- a/src/views/login/components/login-form/index.vue +++ b/src/views/login/components/login-form/index.vue @@ -67,14 +67,18 @@ 登录
- +
+ +
+ @@ -54,7 +54,9 @@

{{ countdown }} 秒后您可以再次发送验证码

- +
@@ -79,6 +81,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 +97,7 @@ const timer = ref(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 +116,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(); @@ -216,6 +219,8 @@ const onClose = () => { countdown.value = 0; hasGetCode.value = false; submitLoading.value = false; + isCheckPass.value = false; + formData.valu = cloneDeep(INITIAL_FORM_DATA); formRef.value?.resetFields(); formRef.value?.clearValidate(); clearTimer(); diff --git a/src/views/components/management/person/components/change-password-modal/style.scss b/src/views/components/management/person/components/change-password-modal/style.scss index b1fb1dc..a10f2b8 100644 --- a/src/views/components/management/person/components/change-password-modal/style.scss +++ b/src/views/components/management/person/components/change-password-modal/style.scss @@ -39,14 +39,10 @@ .ant-form { .ant-form-item { - &:not(:last-child) { - margin-bottom: 24px !important; - } + margin-bottom: 24px !important; .ant-input-affix-wrapper { border-radius: 8px !important; - - } } } diff --git a/src/views/components/management/person/components/verification-code/index.vue b/src/views/components/management/person/components/verification-code/index.vue index 0e2b762..2bf3462 100644 --- a/src/views/components/management/person/components/verification-code/index.vue +++ b/src/views/components/management/person/components/verification-code/index.vue @@ -7,10 +7,8 @@ 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)" :maxlength="1" placeholder="" /> @@ -34,11 +32,17 @@ const emits = defineEmits(['success']); const codeArray = ref([]); const activeIndex = ref(0); // 当前激活的输入框索引 const errorMessage = ref(''); +const isError = ref(false); const inputRef = ref(null); // 处理输入事件 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 +52,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 () => { - const captcha = codeArray.value.map((item) => item.value).join(''); - const { code } = await postCheckUpdatePasswordCaptcha({ captcha }); - if (code === 200) { - emits('success', captcha); - } else { - activeIndex.value = 0; - inputRef.value?.[activeIndex.value]?.focus?.(); - errorMessage.value = '验证码错误，请检查后重试'; - codeArray.value.forEach((item) => { - item.error = true; - item.value = ''; - }); - } + 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 { + activeIndex.value = 0; + inputRef.value?.[activeIndex.value]?.focus?.(); + errorMessage.value = '验证码错误，请检查后重试'; + isError.value = true; + codeArray.value.forEach((item) => { + 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 +95,7 @@ watch( () => codeArray.value, (newVal) => { if (newVal.every((item) => item.value)) { - validateCode(); + onSubmit(); } }, { deep: true }, @@ -129,17 +124,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; - } } } } diff --git a/src/views/login/components/register-form/index.vue b/src/views/login/components/register-form/index.vue index b2851db..964b1b8 100644 --- a/src/views/login/components/register-form/index.vue +++ b/src/views/login/components/register-form/index.vue @@ -182,14 +182,13 @@ const formRules = { { required: true, validator: (_rule, value) => { - console.log('validator'); // if (!value) { // return Promise.reject('请输入密码确认'); // } // 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(); From 37e6887e93520cf0451ee7406084e93703982364 Mon Sep 17 00:00:00 2001 From: rd <1344903914@qq.com> Date: Tue, 16 Sep 2025 11:25:04 +0800 Subject: [PATCH 5/9] =?UTF-8?q?perf(change-password-modal):=20=E4=BF=AE?= =?UTF-8?q?=E5=A4=8D=E9=87=8D=E7=BD=AE=E5=AF=86=E7=A0=81=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../person/components/change-password-modal/index.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/views/components/management/person/components/change-password-modal/index.vue b/src/views/components/management/person/components/change-password-modal/index.vue index 3ecc1ae..5c062ae 100644 --- a/src/views/components/management/person/components/change-password-modal/index.vue +++ b/src/views/components/management/person/components/change-password-modal/index.vue @@ -220,7 +220,7 @@ const onClose = () => { hasGetCode.value = false; submitLoading.value = false; isCheckPass.value = false; - formData.valu = cloneDeep(INITIAL_FORM_DATA); + formData.value = cloneDeep(INITIAL_FORM_DATA); formRef.value?.resetFields(); formRef.value?.clearValidate(); clearTimer(); From 473a6e62298e0007ecaf1e0c039337b90d192e5e Mon Sep 17 00:00:00 2001 From: rd <1344903914@qq.com> Date: Tue, 16 Sep 2025 11:27:18 +0800 Subject: [PATCH 6/9] =?UTF-8?q?fix(person):=20=E4=BC=98=E5=8C=96=E9=AA=8C?= =?UTF-8?q?=E8=AF=81=E7=A0=81=E8=BE=93=E5=85=A5=E9=94=99=E8=AF=AF=E5=A4=84?= =?UTF-8?q?=E7=90=86=E9=80=BB=E8=BE=91=E8=AE=BE=E7=BD=AE=E7=84=A6=E7=82=B9?= =?UTF-8?q?=E5=88=B0=E7=AC=AC=E4=B8=80=E4=B8=AA=E8=BE=93=E5=85=A5=E6=A1=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../management/person/components/verification-code/index.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/views/components/management/person/components/verification-code/index.vue b/src/views/components/management/person/components/verification-code/index.vue index 2bf3462..40b0d43 100644 --- a/src/views/components/management/person/components/verification-code/index.vue +++ b/src/views/components/management/person/components/verification-code/index.vue @@ -67,8 +67,8 @@ const onSubmit = () => { 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) => { From b9511149364f6c3885dbe1c0f6f0f0d36cedc119 Mon Sep 17 00:00:00 2001 From: rd <1344903914@qq.com> Date: Tue, 16 Sep 2025 11:55:56 +0800 Subject: [PATCH 7/9] =?UTF-8?q?style(button):=20=E4=BC=98=E5=8C=96?= =?UTF-8?q?=E6=8C=89=E9=92=AE=E6=A0=B7=E5=BC=8F=E5=92=8C=E4=BA=A4=E4=BA=92?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/styles/components/ant-button.scss | 15 ++++++++----- .../login/components/login-form/index.vue | 14 ++++++------- src/views/login/style.scss | 21 ++++++++++--------- 3 files changed, 28 insertions(+), 22 deletions(-) diff --git a/src/styles/components/ant-button.scss b/src/styles/components/ant-button.scss index 6ea1e79..b5b20c6 100644 --- a/src/styles/components/ant-button.scss +++ b/src/styles/components/ant-button.scss @@ -19,6 +19,7 @@ padding: 0 16px; height: 28px; } + } .ant-btn-default { &:disabled { @@ -68,12 +69,12 @@ outline: none; outline-offset: unset; } + + &:active { + background: $color-primary-7 !important; + } } - .ant-wave { - background: $color-primary-7 !important; - --wave-color: $color-primary-7; - } &.ant-btn-dangerous { background-color: $color-error !important; &:disabled { @@ -83,6 +84,10 @@ &:hover { background-color: $color-error-5 !important; } + + &:active { + background: $color-error-5 !important; + } } } &.ant-btn-background-ghost { @@ -132,7 +137,7 @@ color: $color-primary-5 !important; } } - + &.ant-btn-dangerous { border: 1px solid $color-error !important; color: $color-error !important; diff --git a/src/views/login/components/login-form/index.vue b/src/views/login/components/login-form/index.vue index 07c827d..b47ae9a 100644 --- a/src/views/login/components/login-form/index.vue +++ b/src/views/login/components/login-form/index.vue @@ -50,7 +50,7 @@
- + 登录即代表同意 用户协议 和 隐私政策
-

+

{{ errMsg }}

- +
Date: Tue, 16 Sep 2025 17:29:09 +0800 Subject: [PATCH 9/9] =?UTF-8?q?style(button):=20=E4=BC=98=E5=8C=96?= =?UTF-8?q?=E6=8C=89=E9=92=AE=E6=BF=80=E6=B4=BB=E7=8A=B6=E6=80=81=E6=A0=B7?= =?UTF-8?q?=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 修改默认按钮、主要按钮、危险按钮在激活状态下的背景色、边框色和文字颜色 - 增加幽灵按钮、文本按钮和链接按钮在激活状态下的样式 -统一使用 $color-error-7 和 $color-primary-7 作为激活状态的颜色 --- src/styles/components/ant-button.scss | 40 +++++++++++++++++++++++++-- 1 file changed, 38 insertions(+), 2 deletions(-) diff --git a/src/styles/components/ant-button.scss b/src/styles/components/ant-button.scss index b5b20c6..29bc47e 100644 --- a/src/styles/components/ant-button.scss +++ b/src/styles/components/ant-button.scss @@ -19,7 +19,7 @@ padding: 0 16px; height: 28px; } - + } .ant-btn-default { &:disabled { @@ -86,7 +86,7 @@ } &:active { - background: $color-error-5 !important; + background-color: $color-error-7 !important; } } } @@ -105,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; @@ -119,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; + } } } } @@ -136,6 +146,11 @@ 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 { @@ -150,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; + } } } } @@ -167,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; @@ -177,6 +201,10 @@ &:hover { color: $color-error-5 !important; } + + &:active { + color: $color-error-7 !important; + } } } } @@ -194,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; @@ -204,6 +236,10 @@ &:hover { color: $color-error-5 !important; } + + &:active { + color: $color-error-7 !important; + } } } }