feat: add VbenForm component (#4352)

* feat: add form component

* fix: build error

* feat: add form adapter

* feat: add some component

* feat: add some component

* feat: add example

* feat: suppoer custom action button

* chore: update

* feat: add example

* feat: add formModel,formDrawer demo

* fix: build error

* fix: typo

* fix: ci error

---------

Co-authored-by: jinmao <jinmao88@qq.com>
Co-authored-by: likui628 <90845831+likui628@users.noreply.github.com>

packages/effects/common-ui/src/ui/authentication/code-login.vue

@@ -1,15 +1,19 @@
 <script setup lang="ts">
+import type { VbenFormSchema } from '@vben-core/form-ui';
+
 import type { LoginCodeEmits } from './types';
 
-import { computed, onBeforeUnmount, reactive, ref } from 'vue';
+import { computed, reactive } from 'vue';
 import { useRouter } from 'vue-router';
 
 import { $t } from '@vben/locales';
-import { VbenButton, VbenInput, VbenPinInput } from '@vben-core/shadcn-ui';
+import { useVbenForm } from '@vben-core/form-ui';
+import { VbenButton } from '@vben-core/shadcn-ui';
 
 import Title from './auth-title.vue';
 
 interface Props {
+  formSchema: VbenFormSchema[];
   /**
    * @zh_CN 是否处于加载处理状态
    */
@@ -35,82 +39,31 @@ const emit = defineEmits<{
 
 const router = useRouter();
 
-const formState = reactive({
-  code: '',
-  phoneNumber: '',
-  requirePhoneNumber: false,
-  submitted: false,
-});
+const [Form, { validate }] = useVbenForm(
+  reactive({
+    commonConfig: {
+      hideLabel: true,
+      hideRequiredMark: true,
+    },
+    schema: computed(() => props.formSchema),
+    showDefaultActions: false,
+  }),
+);
 
-const countdown = ref(0);
-const timer = ref<ReturnType<typeof setTimeout>>();
+async function handleSubmit() {
+  const { valid, values } = await validate();
 
-const isValidPhoneNumber = computed(() => {
-  return /^1[3-9]\d{9}$/.test(formState.phoneNumber);
-});
-
-const btnText = computed(() => {
-  return countdown.value > 0
-    ? $t('authentication.sendText', [countdown.value])
-    : $t('authentication.sendCode');
-});
-const btnLoading = computed(() => {
-  return countdown.value > 0;
-});
-
-const phoneNumberStatus = computed(() => {
-  return (formState.submitted || formState.requirePhoneNumber) &&
-    !isValidPhoneNumber.value
-    ? 'error'
-    : 'default';
-});
-
-const codeStatus = computed(() => {
-  return formState.submitted && !formState.code ? 'error' : 'default';
-});
-
-function handleSubmit() {
-  formState.submitted = true;
-  if (phoneNumberStatus.value !== 'default' || codeStatus.value !== 'default') {
-    return;
+  if (valid) {
+    emit('submit', {
+      code: values?.code,
+      phoneNumber: values?.phoneNumber,
+    });
   }
-
-  emit('submit', {
-    code: formState.code,
-    phoneNumber: formState.phoneNumber,
-  });
 }
 
 function goToLogin() {
   router.push(props.loginPath);
 }
-
-async function handleSendCode() {
-  if (btnLoading.value) {
-    return;
-  }
-  if (!isValidPhoneNumber.value) {
-    formState.requirePhoneNumber = true;
-    return;
-  }
-  countdown.value = 60;
-  // TODO: 调用发送验证码接口
-  startCountdown();
-}
-
-function startCountdown() {
-  if (countdown.value > 0) {
-    timer.value = setTimeout(() => {
-      countdown.value--;
-      startCountdown();
-    }, 1000);
-  }
-}
-
-onBeforeUnmount(() => {
-  countdown.value = 0;
-  clearTimeout(timer.value);
-});
 </script>
 
 <template>
@@ -123,31 +76,8 @@ onBeforeUnmount(() => {
         </span>
       </template>
     </Title>
-    <VbenInput
-      v-model="formState.phoneNumber"
-      :autofocus="true"
-      :error-tip="$t('authentication.mobile-tip')"
-      :label="$t('authentication.mobile')"
-      :placeholder="$t('authentication.mobile')"
-      :status="phoneNumberStatus"
-      name="phoneNumber"
-      type="number"
-      @keyup.enter="handleSubmit"
-    />
-    <VbenPinInput
-      v-model="formState.code"
-      :btn-loading="btnLoading"
-      :btn-text="btnText"
-      :code-length="4"
-      :error-tip="$t('authentication.codeTip')"
-      :handle-send-code="handleSendCode"
-      :label="$t('authentication.code')"
-      :placeholder="$t('authentication.code')"
-      :status="codeStatus"
-      name="password"
-      @keyup.enter="handleSubmit"
-    />
-    <VbenButton :loading="loading" class="mt-2 w-full" @click="handleSubmit">
+    <Form />
+    <VbenButton :loading="loading" class="w-full" @click="handleSubmit">
       {{ $t('common.login') }}
     </VbenButton>
     <VbenButton class="mt-4 w-full" variant="outline" @click="goToLogin()">