import { useI18n } from '@eciol/locale'; import type { FormInstance, ValidationRule } from 'ant-design-vue/lib/form/Form'; import type { NamePath, RuleObject } from 'ant-design-vue/lib/form/interface'; import { computed, Ref, ref, unref } from 'vue'; export enum LoginStateEnum { LOGIN, REGISTER, RESET_PASSWORD, MOBILE, QR_CODE, } const currentState = ref(LoginStateEnum.LOGIN); // 这里也可以优化 // import { createGlobalState } from '@vueuse/core' export function useLoginState() { function setLoginState(state: LoginStateEnum) { currentState.value = state; } const getLoginState = computed(() => currentState.value); function handleBackLogin() { setLoginState(LoginStateEnum.LOGIN); } return { setLoginState, getLoginState, handleBackLogin }; } export function useFormValid(formRef: Ref) { const validate = computed(() => { const form = unref(formRef); return form?.validate ?? ((_nameList?: NamePath) => Promise.resolve()); }); async function validForm() { const form = unref(formRef); if (!form) return; const data = await form.validate(); return data as T; } return { validate, validForm }; } export function useFormRules(formData?: Recordable) { const { t } = useI18n(); const getAccountFormRule = computed(() => [ ...createRule(t('sys.login.accountPlaceholder')), { pattern: /[\w @]{6,18}/, message: t('sys.login.alertWrongLoginName'), }, ]); const getPasswordFormRule = computed(() => [ ...createRule(t('sys.login.passwordPlaceholder')), // { // // eslint-disable-next-line regexp/no-super-linear-backtracking // pattern: /^\S*(?=\S{6})(?=\S*\d)(?=\S*[A-Z])(?=\S*[a-z])(?=\S*[!@#$%^&*? ])\S*$/, // message: t('sys.login.alertWrongPassword'), // }, ]); const getSmsFormRule = computed(() => createRule(t('sys.login.smsPlaceholder'))); const getMobileFormRule = computed(() => createRule(t('sys.login.mobilePlaceholder'))); const getEmailFormRule = computed(() => [...createRule(t('sys.login.registeredEmail'))]); const validatePolicy = async (_: RuleObject, value: boolean) => { return !value ? Promise.reject(t('sys.login.policyPlaceholder')) : Promise.resolve(); }; const validateConfirmPassword = (password: string) => { return async (_: RuleObject, value: string) => { if (!value) { return Promise.reject(t('sys.login.passwordPlaceholder')); } if (value !== password) { return Promise.reject(t('sys.login.diffPwd')); } return Promise.resolve(); }; }; const getFormRules = computed((): { [k: string]: ValidationRule | ValidationRule[] } => { const accountFormRule = unref(getAccountFormRule); const passwordFormRule = unref(getPasswordFormRule); const smsFormRule = unref(getSmsFormRule); const mobileFormRule = unref(getMobileFormRule); const emailFormRule = unref(getEmailFormRule); const mobileRule = { sms: smsFormRule, mobile: mobileFormRule, }; switch (unref(currentState)) { // register form rules case LoginStateEnum.REGISTER: return { account: accountFormRule, password: passwordFormRule, confirmPassword: [ { validator: validateConfirmPassword(formData?.password), trigger: 'change' }, ], policy: [{ validator: validatePolicy, trigger: 'change' }], ...mobileRule, }; // reset password form rules case LoginStateEnum.RESET_PASSWORD: return { account: accountFormRule, email: emailFormRule, }; // mobile form rules case LoginStateEnum.MOBILE: return mobileRule; // login form rules default: return { account: accountFormRule, password: passwordFormRule, }; } }); return { getFormRules }; } function createRule(message: string) { return [ { required: true, message, trigger: 'change', }, ]; }