From ec9b25a0799f3b39b4dea2d2ca8ea8491dddbaf4 Mon Sep 17 00:00:00 2001
From: xyc <jc_xiong@hotmail.com>
Date: 星期四, 27 八月 2026 15:01:00 +0800
Subject: [PATCH] Merge partner-work: 合并双方开发结果（我方验证码/登出/布局 + 对方业务模块）

---
 traffic-audit-web/src/views/Login.vue |   68 ++++++++++++++++++++++++++++++---
 1 files changed, 61 insertions(+), 7 deletions(-)

diff --git a/traffic-audit-web/src/views/Login.vue b/traffic-audit-web/src/views/Login.vue
index 4993005..5dda4c7 100644
--- a/traffic-audit-web/src/views/Login.vue
+++ b/traffic-audit-web/src/views/Login.vue
@@ -1,4 +1,4 @@
-锘�<template>
+<template>
   <div class="login-container">
     <el-card class="login-card">
       <h2>浜ら�氱粺璁℃姤琛ㄥ鏍哥郴缁�</h2>
@@ -10,37 +10,91 @@
           <el-input v-model="form.password" type="password" placeholder="瀵嗙爜" @keyup.enter.native="login"></el-input>
         </el-form-item>
         <el-form-item>
-          <el-button type="primary" @click="login" style="width:100%">鐧� 褰�</el-button>
+          <captcha3-d ref="captcha" @verified="onCaptchaVerified" @reset="onCaptchaReset"></captcha3-d>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" :loading="loggingIn" @click="login" style="width:100%">鐧� 褰�</el-button>
         </el-form-item>
       </el-form>
     </el-card>
   </div>
 </template>
 <script>
+import axios from 'axios'
+import Captcha3D from '@/components/Captcha3D.vue'
+
 export default {
   name: 'Login',
+  components: { Captcha3D },
   data() {
     return {
       form: { username: '', password: '' },
       rules: {
         username: [{ required: true, message: '璇疯緭鍏ョ敤鎴峰悕', trigger: 'blur' }],
         password: [{ required: true, message: '璇疯緭鍏ュ瘑鐮�', trigger: 'blur' }]
-      }
+      },
+      captchaVerified: false,
+      captchaId: '',
+      clickIds: [],
+      loggingIn: false
     }
   },
   methods: {
+    onCaptchaVerified(payload) {
+      this.captchaVerified = true
+      this.captchaId = payload.captchaId
+      this.clickIds = payload.clickIds
+    },
+    onCaptchaReset() {
+      this.captchaVerified = false
+      this.captchaId = ''
+      this.clickIds = []
+    },
     login() {
       this.$refs.form.validate(valid => {
-        if (valid) {
-          this.$router.push('/dashboard')
+        if (!valid) return
+        if (!this.captchaVerified) {
+          this.$message.warning('璇峰厛瀹屾垚琛屼负楠岃瘉')
+          return
         }
+        this.loggingIn = true
+        axios.post('/api/auth/login', {
+          username: this.form.username,
+          password: this.form.password,
+          captchaId: this.captchaId,
+          captchaClickIds: this.clickIds
+        }).then(res => {
+          this.loggingIn = false
+          const d = res.data
+          if (d.code === 200) {
+            localStorage.setItem('token', d.data.token)
+            localStorage.setItem('username', d.data.username)
+            localStorage.setItem('realName', d.data.realName || '')
+            localStorage.setItem('modules', d.data.modules || '')
+            this.$message.success('鐧诲綍鎴愬姛')
+            this.$router.push('/dashboard')
+          } else if (d.code === 401) {
+            this.$message.error(d.message || '鐢ㄦ埛鍚嶆垨瀵嗙爜閿欒')
+            this.$refs.captcha.load()
+          } else if (d.code === 4001 || d.code === 4002 || d.code === 4003) {
+            this.$message.error(d.message || '楠岃瘉鏈�氳繃锛岃閲嶆柊楠岃瘉')
+            this.$refs.captcha.load()
+          } else {
+            this.$message.error(d.message || '鐧诲綍澶辫触锛岃閲嶈瘯')
+            this.$refs.captcha.load()
+          }
+        }).catch(() => {
+          this.loggingIn = false
+          this.$message.error('缃戠粶閿欒锛岀櫥褰曞け璐�')
+        })
       })
     }
   }
 }
 </script>
 <style scoped>
-.login-container { display: flex; justify-content: center; align-items: center; height: 100vh; background: #f0f2f5; }
+.login-container { display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: 20px 0; box-sizing: border-box; background: #f0f2f5; }
 .login-card { width: 400px; }
-.login-card h2 { text-align: center; margin-bottom: 30px; }
+.login-card h2 { text-align: center; margin-bottom: 18px; }
+.login-card .el-form-item { margin-bottom: 16px; }
 </style>

--
Gitblit v1.9.1