feat(LoginView): 优化二维码绑定流程

- 在二维码弹窗中添加关闭按钮限制，防止误操作关闭
- 更新弹窗内提示文字，明确绑定码输入步骤- 增加绑定码输入框，用户可在弹窗内直接输入绑定码
- 实现确认绑定功能，提交绑定码进行验证
- 优化二维码生成逻辑，增加用户名和密码的非空校验

src/views/LoginView.vue

@@ -35,6 +35,9 @@
         v-model="qrCodeModalVisible"
         width="350"
         center
+        :show-close="false"
+        :close-on-click-modal="false"
+        :close-on-press-escape="false"
     >
         <template #title>
             <div class="text-left">
@@ -58,12 +61,16 @@
             正在加载二维码...
         </div>
         <div class="text-center text-xs">
-            app出现认证码后，点击按钮返回登录页面输入认证码
+            app出现认证码后，在下方输入认证码确认绑定
+        </div>
+        <div style="margin-top: 10px;">
+            <ElInput v-model="model.bindingCode" maxlength="6"
+                     style="width: 260px;margin-left: calc(50% - 130px);"></ElInput>
         </div>
         <div>
             <el-button
                 class="custom-button"
-                @click="qrCodeModalVisible = false"
+                @click="handleConfirmBinding"
             >
                 确认绑定
             </el-button>
@@ -88,7 +95,8 @@ const { user, setUser } = storeToRefs(useUserStore())
 const model = ref({
     username: '',
     password: '',
-    code: ''
+    code: '',
+    bindingCode: ''
 })
 const rules = {
     username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
@@ -119,8 +127,11 @@ const qrCodeModalVisible = ref(false)
 const qrCode = ref(null)
 
 async function openQrCodeModal() {
-
     try {
+        if (model.value.username === '' || model.value.password === '') {
+            ElMessage.error('请先输入用户名与密码')
+            return
+        }
         const url = await http.post('/auth/binding', model.value)
         if (url === 'success') {
             ElMessage.success('您已绑定过谷歌验证器,无需再次绑定.')
@@ -130,7 +141,20 @@ async function openQrCodeModal() {
             qrCode.value = await QRCode.toDataURL(url)
         }
     } catch (e) {
-        ElMessage.error('获取二维码失败')
+        ElMessage.error(e)
+    }
+}
+
+function handleConfirmBinding() {
+    if (model.value.bindingCode !== '') {
+        http.post('/auth/handleConfirmBinding', model.value).then(() => {
+            ElMessage.success('绑定成功,请在登陆页面再次输入认证码')
+            qrCodeModalVisible.value = false
+        }).catch((e) => {
+            ElMessage.error(e)
+        })
+    } else {
+        ElMessage.error('请输入6位认证码')
     }
 }
 </script>
@@ -148,4 +172,10 @@ async function openQrCodeModal() {
 .custom-button:hover {
     background-color: #197ced;
 }
+
+.centered-input {
+    width: 260px;
+    margin: 0 auto;
+    display: block;
+}
 </style>