diff --git a/index.html b/index.html index 67f5f9d..4c51e0d 100644 --- a/index.html +++ b/index.html @@ -5,7 +5,6 @@ - 红色警戒3数据分析中心 diff --git a/src/api/login.js b/src/api/login.js index c346993..b7fe887 100644 --- a/src/api/login.js +++ b/src/api/login.js @@ -50,39 +50,45 @@ import { loginSuccess } from '../utils/jwt'; // } // ) -export const userLogin = async (username, password, server, token) => { +// 获取验证码 +export const getCaptcha = async () => { + try { + const response = await axiosInstance.get('/captcha'); + return response.data; + } catch (error) { + throw error; + } +}; + +// 用户登录 +export const userLogin = async (username, password, token, captcha) => { try { - // console.log('登录请求参数:', { username, password, server, token }); // 保留此调试日志以备将来使用，或按需移除 const response = await axiosInstance.post('/user/login', { username, password, - server, - token + token, + captcha }); if (response.data.access_token) { - loginSuccess(response.data.access_token, username); // 使用 username 作为 userId + loginSuccess(response.data.access_token); } return response.data; } catch (error) { - // 错误将由响应拦截器统一处理和记录，这里可以直接抛出 throw error; } }; -export const userRegister = async (qq_code, password, server, token) => { +// 用户注册 +export const userRegister = async (qq_code, password, token, captcha) => { try { - const requestData = { + const response = await axiosInstance.post('/user/register', { qq_code, password, - server, - token - }; - // console.log('注册请求参数:', requestData); // 保留此调试日志以备将来使用，或按需移除 - - const response = await axiosInstance.post('/user/register', requestData); - // console.log('注册响应数据:', response.data); // 保留此调试日志以备将来使用，或按需移除 + token, + captcha + }); return response.data; } catch (error) { throw error; diff --git a/src/components/login_module.vue b/src/components/login_module.vue index 91a2a81..5548dfc 100644 --- a/src/components/login_module.vue +++ b/src/components/login_module.vue @@ -1,7 +1,7 @@ @@ -351,5 +320,98 @@ const validateForm = () => { .input-container input.error { border-color: #f56c6c; } + +.captcha-container { + margin-bottom: 16px; + width: 100%; +} + +.captcha-wrapper { + display: flex; + gap: 8px; + align-items: center; + width: 100%; + position: relative; +} + +.captcha-wrapper input { + flex: 1; + height: 40px; + border: 1px solid #d0d7de; + border-radius: 6px; + padding: 0 12px; + font-size: 15px; + background: #f7fbfd; + transition: border 0.2s; + width: calc(100% - 120px); /* 减去验证码图片的宽度和间距 */ +} + +.captcha-wrapper input:focus { + border: 1.5px solid #409eff; + outline: none; + background: #fff; +} + +.captcha-image { + width: 110px; + height: 40px; + border-radius: 6px; + cursor: pointer; + object-fit: cover; + border: 1px solid #d0d7de; + transition: all 0.3s; +} + +.captcha-image:hover { + opacity: 0.8; +} + +/* 移动端适配 */ +@media screen and (max-width: 480px) { + .login-form { + width: 90%; + max-width: 340px; + padding: 24px 20px 20px 20px; + } + + .captcha-wrapper { + gap: 6px; + } + + .captcha-wrapper input { + width: calc(100% - 100px); + } + + .captcha-image { + width: 90px; + } + + .input-container input, + .captcha-wrapper input { + height: 38px; + font-size: 14px; + } + + .login-button button { + height: 40px; + font-size: 15px; + } +} + +/* 超小屏幕适配 */ +@media screen and (max-width: 320px) { + .login-form { + padding: 20px 16px 16px 16px; + } + + .captcha-wrapper input { + width: calc(100% - 90px); + padding: 0 8px; + } + + .captcha-image { + width: 80px; + } +} diff --git a/src/components/register_module.vue b/src/components/register_module.vue index 67e45cc..c51bfbf 100644 --- a/src/components/register_module.vue +++ b/src/components/register_module.vue @@ -20,40 +20,26 @@ @blur="validateConfirmPassword" :class="{ 'error': confirmPasswordError }" /> {{ confirmPasswordError }} -
- -
-
-
- - - - - - - - - - - - - - - - - Vaptcha Initializing... -
-
+
+ +
+ + 验证码
+ {{ captchaError }}