From 2bd663b4488808814ea07685f527fc2eb51e5bfe Mon Sep 17 00:00:00 2001
From: xyc <jc_xiong@hotmail.com>
Date: 星期五, 28 八月 2026 17:36:13 +0800
Subject: [PATCH] fix: 菜单/布局统一——企业解释重复 components 键导致 app-header 未注册；规则管理/用户管理改为统一上下布局（顶部系统栏+登出），移除菜单内失效的退出登录项

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

diff --git a/traffic-audit-web/src/views/Login.vue b/traffic-audit-web/src/views/Login.vue
index 4993005..f7dc1a7 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>
@@ -9,38 +9,106 @@
         <el-form-item prop="password">
           <el-input v-model="form.password" type="password" placeholder="瀵嗙爜" @keyup.enter.native="login"></el-input>
         </el-form-item>
+        <el-form-item v-if="captchaRequired">
+          <captcha3-d ref="captcha" @verified="onCaptchaVerified" @reset="onCaptchaReset"></captcha3-d>
+        </el-form-item>
+        <el-form-item v-else>
+          <div class="captcha-skip-tip">娴嬭瘯妯″紡锛氳涓洪獙璇佺爜宸茶烦杩囷紝鍙洿鎺ョ偣鍑荤櫥褰曪紙姝ｅ紡鍙戝竷鍚庡皢鍚敤锛�</div>
+        </el-form-item>
         <el-form-item>
-          <el-button type="primary" @click="login" style="width:100%">鐧� 褰�</el-button>
+          <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,
+      captchaRequired: true
     }
   },
+  created() {
+    axios.get('/api/auth/captcha-config', { timeout: 10000 })
+      .then(res => {
+        const d = res.data
+        if (d && d.code === 200) this.captchaRequired = d.data.required !== false
+      })
+      .catch(() => {})
+  },
   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.captchaRequired && !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
+        }, { timeout: 15000 }).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 || '鐢ㄦ埛鍚嶆垨瀵嗙爜閿欒')
+            if (this.$refs.captcha) this.$refs.captcha.load()
+          } else if (d.code === 4001 || d.code === 4002 || d.code === 4003) {
+            this.$message.error(d.message || '楠岃瘉鏈�氳繃锛岃閲嶆柊楠岃瘉')
+            if (this.$refs.captcha) this.$refs.captcha.load()
+          } else {
+            this.$message.error(d.message || '鐧诲綍澶辫触锛岃閲嶈瘯')
+            if (this.$refs.captcha) this.$refs.captcha.load()
+          }
+        }).catch(e => {
+          this.loggingIn = false
+          if (e && e.code === 'ECONNABORTED') { this.$message.error('鐧诲綍璇锋眰瓒呮椂锛岃閲嶈瘯'); return }
+          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; }
+.captcha-skip-tip { font-size: 12px; color: #909399; line-height: 1.6; padding: 8px 10px; background: #F5F7FA; border-radius: 4px; }
 .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