From 1383f6336102b5898138661f075e9154e98abfec Mon Sep 17 00:00:00 2001 From: dap <15891557205@163.com> Date: Thu, 8 Jan 2026 11:47:37 +0800 Subject: [PATCH] =?UTF-8?q?refactor:=20=E4=BD=BF=E7=94=A8antd=E7=BB=84?= =?UTF-8?q?=E4=BB=B6=E6=9B=BF=E6=8D=A2=E5=AF=86=E7=A0=81=E7=99=BB=E5=BD=95?= =?UTF-8?q?=E8=A1=A8=E5=8D=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 废弃原有的shadcn-ui验证码组件，改用antd实现 - 更新登录表单中的验证码输入组件为新的antd实现 - 调整表单布局和样式 --- CHANGELOG.md | 4 + .../_core/authentication/input-captcha.vue | 87 +++++++++++++++++++ .../src/views/_core/authentication/login.vue | 30 ++++--- .../src/components/input-captcha/index.ts | 3 + .../common-ui/src/ui/authentication/login.vue | 2 +- .../layouts/src/authentication/form.vue | 2 +- 6 files changed, 115 insertions(+), 13 deletions(-) create mode 100644 apps/web-antd/src/views/_core/authentication/input-captcha.vue diff --git a/CHANGELOG.md b/CHANGELOG.md index 5d8b74e3..621a4324 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,10 @@ dev中 未发布 +**REFACTOR** + +- 使用antd组件替换密码登录表单 + **FEATURES** - 合并官方更新 将Radix(v1)替换为Reka UI(v2) diff --git a/apps/web-antd/src/views/_core/authentication/input-captcha.vue b/apps/web-antd/src/views/_core/authentication/input-captcha.vue new file mode 100644 index 00000000..45e03a9d --- /dev/null +++ b/apps/web-antd/src/views/_core/authentication/input-captcha.vue @@ -0,0 +1,87 @@ + + + + + + diff --git a/apps/web-antd/src/views/_core/authentication/login.vue b/apps/web-antd/src/views/_core/authentication/login.vue index 2d6325be..6ac6246f 100644 --- a/apps/web-antd/src/views/_core/authentication/login.vue +++ b/apps/web-antd/src/views/_core/authentication/login.vue @@ -4,12 +4,13 @@ import type { LoginAndRegisterParams, VbenFormSchema } from '@vben/common-ui'; import type { TenantResp } from '#/api'; import type { CaptchaResponse } from '#/api/core/captcha'; -import { computed, onMounted, ref, useTemplateRef } from 'vue'; +import { computed, markRaw, onMounted, ref, useTemplateRef } from 'vue'; import { AuthenticationLogin, z } from '@vben/common-ui'; import { DEFAULT_TENANT_ID } from '@vben/constants'; import { $t } from '@vben/locales'; +import { Input, Select } from 'ant-design-vue'; import { omit } from 'lodash-es'; import { tenantList } from '#/api'; @@ -17,6 +18,7 @@ import { captchaImage } from '#/api/core/captcha'; import { useAuthStore } from '#/store'; import { useLoginTenantId } from '../oauth-common'; +import InputCaptcha from './input-captcha.vue'; import OAuthLogin from './oauth-login.vue'; defineOptions({ name: 'Login' }); @@ -73,15 +75,18 @@ const { loginTenantId } = useLoginTenantId(); const formSchema = computed((): VbenFormSchema[] => { return [ { - component: 'VbenSelect', + component: markRaw(Select), + modelPropName: 'value', componentProps: { - class: 'bg-background h-[40px] focus:border-primary', - contentClass: 'max-h-[256px] overflow-y-auto', + class: 'w-full', + size: 'large', + showSearch: true, + optionFilterProp: 'label', options: tenantInfo.value.voList?.map((item) => ({ label: item.companyName, value: item.tenantId, })), - placeholder: $t('authentication.selectAccount'), + placeholder: $t('ui.formRules.selectRequired'), }, defaultValue: DEFAULT_TENANT_ID, dependencies: { @@ -98,10 +103,12 @@ const formSchema = computed((): VbenFormSchema[] => { rules: z.string().min(1, { message: $t('authentication.selectAccount') }), }, { - component: 'VbenInput', + component: markRaw(Input), + modelPropName: 'value', componentProps: { - class: 'focus:border-primary', + size: 'large', placeholder: $t('authentication.usernameTip'), + allowClear: true, }, defaultValue: 'admin', fieldName: 'username', @@ -109,10 +116,11 @@ const formSchema = computed((): VbenFormSchema[] => { rules: z.string().min(1, { message: $t('authentication.usernameTip') }), }, { - component: 'VbenInputPassword', + component: markRaw(Input.Password), + modelPropName: 'value', componentProps: { - class: 'focus:border-primary', - placeholder: $t('authentication.password'), + size: 'large', + placeholder: $t('authentication.passwordTip'), }, defaultValue: 'admin123', fieldName: 'password', @@ -120,7 +128,7 @@ const formSchema = computed((): VbenFormSchema[] => { rules: z.string().min(5, { message: $t('authentication.passwordTip') }), }, { - component: 'VbenInputCaptcha', + component: markRaw(InputCaptcha), componentProps: { captcha: captchaInfo.value.img, class: 'focus:border-primary', diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/input-captcha/index.ts b/packages/@core/ui-kit/shadcn-ui/src/components/input-captcha/index.ts index 49ec05f4..4f07284f 100644 --- a/packages/@core/ui-kit/shadcn-ui/src/components/input-captcha/index.ts +++ b/packages/@core/ui-kit/shadcn-ui/src/components/input-captcha/index.ts @@ -1 +1,4 @@ +/** + * @deprecated 使用antd组件实现来代替 + */ export { default as VbenInputCaptcha } from './input-captcha.vue'; diff --git a/packages/effects/common-ui/src/ui/authentication/login.vue b/packages/effects/common-ui/src/ui/authentication/login.vue index 42bb4935..9fbe73b8 100644 --- a/packages/effects/common-ui/src/ui/authentication/login.vue +++ b/packages/effects/common-ui/src/ui/authentication/login.vue @@ -109,7 +109,7 @@ defineExpose({ -
+