feat: 登录新增验证码校验

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { reactive, ref } from 'vue';
-import Vcode from 'vue3-puzzle-vcode';
+import type { FormInst } from 'naive-ui';
 import { md5 } from '@/utils/common';
 import { $t } from '@/locales';
 import { useFormRules, useNaiveForm } from '@/hooks/common/form';
@@ -31,6 +31,10 @@ const rules: Record<RuleKey, App.Global.FormRule> = {
   password: defaultRequiredRule
 };
 
+const codeRules: Record<string, App.Global.FormRule> = {
+  code: defaultRequiredRule
+};
+
 async function handleSubmit() {
   const password = md5(model.password);
   await authStore.login(model.userName, password);
@@ -52,7 +56,17 @@ const onClose = () => {
   codeShow.value = false;
 };
 
-const onSuccess = () => {
+const codeForm = ref({ code: '' });
+const codeFormRef = ref<FormInst>();
+
+const onSuccess = async () => {
+  await codeFormRef.value?.validate();
+  const { code } = codeForm.value;
+  const codes: string[] = [];
+  if (!codes.includes(String(code))) {
+    window.$message?.warning('验证码错误');
+    return;
+  }
   handleSubmit();
 };
 
@@ -81,7 +95,7 @@ const codePopoverStytle = {
             {{ $t('page.login.common.login') }}
           </NButton>
         </template>
-        <NCard :title="$t('page.login.common.codeTip')" :header-style="{ padding: '10px 24px' }">
+        <NCard title="仅需 1 步即可完成" content-class="max-w-300px" :header-style="{ padding: '10px 24px' }">
           <template #header-extra>
             <NButton text @click="onClose">
               <template #icon>
@@ -89,7 +103,18 @@ const codePopoverStytle = {
               </template>
             </NButton>
           </template>
-          <Vcode type="inside" show @success="onSuccess" @close="onClose" />
+          <NP>扫码下方二维码，回复【验证码】，即可获得验证码</NP>
+          <img src="/code.png" />
+          <NForm :model="codeFormRef" :rules="codeRules" label-placement="left" require-mark-placement="left">
+            <NGrid>
+              <NFormItemGi class="mr-16px" span="18" path="code" label="验证码">
+                <NInput v-model:value="codeForm.code" placeholder="请输入验证码" />
+              </NFormItemGi>
+              <NGridItem span="6">
+                <NButton type="primary" block @click="onSuccess">确定</NButton>
+              </NGridItem>
+            </NGrid>
+          </NForm>
         </NCard>
       </NPopover>
     </NSpace>