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({ -
+