feat(projects): login page: code-login

src/views/_builtin/login/modules/code-login.vue

@@ -1,24 +1,58 @@
 <script setup lang="ts">
+import { computed, reactive } from 'vue';
 import { $t } from '@/locales';
 import { useRouterPush } from '@/hooks/common/router';
+import { useFormRules, useNaiveForm } from '@/hooks/common/form';
+import { useCaptcha } from '@/hooks/business/captcha';
 
 defineOptions({
   name: 'CodeLogin'
 });
 
 const { toggleLoginModule } = useRouterPush();
+const { formRef, validate } = useNaiveForm();
+const { label, isCounting, loading, getCaptcha } = useCaptcha();
+
+interface FormModel {
+  phone: string;
+  code: string;
+}
+
+const model: FormModel = reactive({
+  phone: '',
+  code: ''
+});
+
+const rules = computed<Record<keyof FormModel, App.Global.FormRule[]>>(() => {
+  const { formRules } = useFormRules();
+
+  return {
+    phone: formRules.phone,
+    code: formRules.code
+  };
+});
+
+async function handleSubmit() {
+  await validate();
+  window.$message?.success($t('page.login.common.validateSuccess'));
+}
 </script>
 
 <template>
-  <NForm size="large" :show-label="false">
-    <NFormItem>
-      <NInput :placeholder="$t('page.login.common.phonePlaceholder')" />
+  <NForm ref="formRef" :model="model" :rules="rules" size="large" :show-label="false">
+    <NFormItem path="phone">
+      <NInput v-model:value="model.phone" :placeholder="$t('page.login.common.phonePlaceholder')" />
     </NFormItem>
-    <NFormItem>
-      <NInput :placeholder="$t('page.login.common.codePlaceholder')" />
+    <NFormItem path="code">
+      <div class="w-full flex-y-center gap-16px">
+        <NInput v-model:value="model.code" :placeholder="$t('page.login.common.codePlaceholder')" />
+        <NButton size="large" :disabled="isCounting" :loading="loading" @click="getCaptcha(model.phone)">
+          {{ label }}
+        </NButton>
+      </div>
     </NFormItem>
     <NSpace vertical :size="18" class="w-full">
-      <NButton type="primary" size="large" round block>
+      <NButton type="primary" size="large" round block @click="handleSubmit">
         {{ $t('common.confirm') }}
       </NButton>
       <NButton size="large" round block @click="toggleLoginModule('pwd-login')">

src/views/_builtin/login/modules/pwd-login.vue

@@ -49,7 +49,7 @@ async function handleSubmit() {
       <NInput
         v-model:value="model.password"
         type="password"
-        show-password-on="mousedown"
+        show-password-on="click"
         :placeholder="$t('page.login.common.passwordPlaceholder')"
       />
     </NFormItem>