zyb/DCFronted
2
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

优化部分代码

Browse Source
This commit is contained in:
Kunagisa
2025-06-13 23:56:10 +08:00
parent 3bd286f50e
commit e222de1850
5 changed files with 446 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

150
src/components/ErrorDialog.vue Normal file
View File

@@ -0,0 +1,150 @@
<template>
<div v-if="visible" class="error-dialog-overlay" @click.self="handleClose">
<div class="error-dialog">
<div class="error-dialog-content">
{{ message }}
</div>
<div class="error-dialog-footer">
<button class="confirm-button" @click="handleClose">确定</button>
</div>
</div>
</div>
</template>
<script setup>
import { defineProps, defineEmits } from 'vue'
const props = defineProps({
visible: {
type: Boolean,
default: false
},
title: {
type: String,
default: '错误提示'
},
message: {
type: String,
required: true
}
})
const emit = defineEmits(['close'])
const handleClose = () => {
emit('close')
}
</script>
<style scoped>
.error-dialog-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
}
.error-dialog {
background: white;
border-radius: 8px;
width: 90%;
max-width: 400px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
animation: dialog-fade-in 0.3s ease;
}
.error-dialog-header {
padding: 16px 20px;
border-bottom: 1px solid #eee;
display: flex;
justify-content: space-between;
align-items: center;
}
.error-dialog-header h3 {
margin: 0;
color: #f56c6c;
font-size: 18px;
font-weight: 500;
}
.close-button {
background: none;
border: none;
font-size: 24px;
color: #909399;
cursor: pointer;
padding: 0;
line-height: 1;
}
.close-button:hover {
color: #f56c6c;
}
.error-dialog-content {
padding: 20px;
color: #606266;
font-size: 16px;
line-height: 1.5;
text-align: center;
}
.error-dialog-footer {
padding: 10px 20px 20px;
text-align: center;
}
.confirm-button {
background-color: #f56c6c;
color: white;
border: none;
padding: 8px 24px;
border-radius: 4px;
font-size: 14px;
cursor: pointer;
transition: background-color 0.3s;
}
.confirm-button:hover {
background-color: #f78989;
}
@keyframes dialog-fade-in {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* 移动端适配 */
@media screen and (max-width: 480px) {
.error-dialog {
width: 85%;
}
.error-dialog-header h3 {
font-size: 16px;
}
.error-dialog-content {
font-size: 14px;
padding: 16px;
}
.confirm-button {
padding: 6px 20px;
font-size: 13px;
}
}
</style>

80
src/components/login_module.vue
View File

@@ -9,7 +9,6 @@
id="username"
v-model="username"
placeholder="请输入QQ号"
@blur="validateUsername"
:class="{ 'error': usernameError }"
/>
<span class="error-message" v-if="usernameError">{{ usernameError }}</span>
@@ -21,7 +20,6 @@
id="password"
v-model="password"
placeholder="请输入密码"
@blur="validatePassword"
:class="{ 'error': passwordError }"
/>
<span class="error-message" v-if="passwordError">{{ passwordError }}</span>
@@ -34,7 +32,6 @@
id="captcha"
v-model="captcha"
placeholder="请输入验证码"
@blur="validateCaptcha"
:class="{ 'error': captchaError }"
/>
<img
@@ -54,6 +51,12 @@
<a @click.prevent="$emit('register')">注册账号</a>
</div>
</form>
<ErrorDialog
:visible="showError"
:title="errorTitle"
:message="errorMessage"
@close="showError = false"
/>
</div>
</template>
@@ -61,6 +64,7 @@
import { ref, onMounted, computed } from 'vue'
import { useRouter } from 'vue-router'
import { userLogin, getCaptcha } from '../api/login'
import ErrorDialog from './ErrorDialog.vue'
const router = useRouter()
const username = ref('')
@@ -74,6 +78,11 @@ const usernameError = ref('')
const passwordError = ref('')
const captchaError = ref('')
// 错误弹窗相关
const showError = ref(false)
const errorTitle = ref('错误提示')
const errorMessage = ref('')
const validateUsername = () => {
if (!username.value) {
usernameError.value = '请输入QQ号码'
@@ -130,6 +139,12 @@ const isFormValid = computed(() => {
captcha.value
})
const showErrorMessage = (message, title = '错误提示') => {
errorMessage.value = message
errorTitle.value = title
showError.value = true
}
const refreshCaptcha = async () => {
try {
const response = await getCaptcha()
@@ -139,7 +154,7 @@ const refreshCaptcha = async () => {
captcha.value = '' // 清空验证码输入
} catch (error) {
console.error('获取验证码失败:', error)
alert('获取验证码失败，请刷新页面重试')
showErrorMessage('获取验证码失败，请刷新页面重试')
}
}
@@ -172,10 +187,16 @@ const handleLogin = async () => {
}
} catch (error) {
console.error('登录失败:', error)
if (error.response && error.response.status === 401) {
alert('错误的用户名或密码')
if (error.response) {
switch (error.response.status) {
case 401:
showErrorMessage('错误的用户名或密码')
break
default:
showErrorMessage(error.response?.data?.message || error.message || '登录失败，请稍后重试')
}
} else {
alert(error.response?.data?.message || error.message || '登录失败，请稍后重试')
showErrorMessage(error.message || '登录失败，请稍后重试')
}
// 登录失败时刷新验证码
refreshCaptcha()
@@ -183,7 +204,50 @@ const handleLogin = async () => {
}
const validateForm = () => {
return validateUsername() && validatePassword() && validateCaptcha()
// 重置所有错误信息
usernameError.value = ''
passwordError.value = ''
captchaError.value = ''
// 验证用户名
if (!username.value) {
usernameError.value = '请输入QQ号码'
return false
}
if (!/^[/\d/g]+$/.test(username.value)) {
usernameError.value = 'QQ号码只能包含数字'
return false
}
if (username.value.length < 4) {
usernameError.value = 'QQ号码长度不能小于4个字符'
return false
}
// 验证密码
if (!password.value) {
passwordError.value = '请输入密码'
return false
}
if (password.value.length < 4) {
passwordError.value = '密码长度不能小于4个字符'
return false
}
if (password.value.length > 20) {
passwordError.value = '密码长度不能超过20个字符'
return false
}
// 验证验证码
if (!captcha.value) {
captchaError.value = '请输入验证码'
return false
}
if (captcha.value.length !== 4) {
captchaError.value = '验证码长度不正确'
return false
}
return true
}
</script>

111
src/components/register_module.vue
View File

@@ -4,20 +4,20 @@
<form class="login-form-container" @submit.prevent="handleRegister">
<div class="input-container">
<label for="username">QQ号</label>
<input type="text" id="username" v-model="username" placeholder="请输入QQ号" @blur="validateUsername"
<input type="text" id="username" v-model="username" placeholder="请输入QQ号"
:class="{ 'error': usernameError }" />
<span class="error-message" v-if="usernameError">{{ usernameError }}</span>
</div>
<div class="input-container">
<label for="password">密码</label>
<input type="password" id="password" v-model="password" placeholder="请输入密码" @blur="validatePassword"
<input type="password" id="password" v-model="password" placeholder="请输入密码"
:class="{ 'error': passwordError }" />
<span class="error-message" v-if="passwordError">{{ passwordError }}</span>
</div>
<div class="input-container">
<label for="confirmPassword">再次输入密码</label>
<input type="password" id="confirmPassword" v-model="confirmPassword" placeholder="请输入密码"
@blur="validateConfirmPassword" :class="{ 'error': confirmPasswordError }" />
:class="{ 'error': confirmPasswordError }" />
<span class="error-message" v-if="confirmPasswordError">{{ confirmPasswordError }}</span>
</div>
<div class="input-container captcha-container">
@@ -28,7 +28,6 @@
id="captcha"
v-model="captcha"
placeholder="请输入验证码"
@blur="validateCaptcha"
:class="{ 'error': captchaError }"
/>
<img
@@ -42,12 +41,18 @@
<span class="error-message" v-if="captchaError">{{ captchaError }}</span>
</div>
<div class="login-button">
<button type="submit" :disabled="!isFormValid">注册</button>
<button type="submit">注册</button>
</div>
<div class="register-link">
<a @click.prevent="$emit('login')">返回登陆</a>
</div>
</form>
<ErrorDialog
:visible="showError"
:title="errorTitle"
:message="errorMessage"
@close="showError = false"
/>
</div>
</template>
@@ -55,6 +60,7 @@
import { ref, onMounted, computed } from 'vue'
import { useRouter } from 'vue-router'
import { userRegister, getCaptcha } from "@/api/login.js";
import ErrorDialog from './ErrorDialog.vue'
const router = useRouter()
const username = ref('')
@@ -73,6 +79,17 @@ const passwordError = ref('')
const confirmPasswordError = ref('')
const captchaError = ref('')
// 错误弹窗相关
const showError = ref(false)
const errorTitle = ref('错误提示')
const errorMessage = ref('')
const showErrorMessage = (message, title = '错误提示') => {
errorMessage.value = message
errorTitle.value = title
showError.value = true
}
// 表单验证规则
const validateUsername = () => {
if (!username.value) {
@@ -127,18 +144,6 @@ const validateCaptcha = () => {
return true
}
// 计算表单是否有效
const isFormValid = computed(() => {
return !usernameError.value &&
!passwordError.value &&
!confirmPasswordError.value &&
!captchaError.value &&
username.value &&
password.value &&
confirmPassword.value &&
captcha.value
})
const refreshCaptcha = async () => {
try {
const response = await getCaptcha()
@@ -147,7 +152,7 @@ const refreshCaptcha = async () => {
captcha.value = '' // 清空验证码输入
} catch (error) {
console.error('获取验证码失败:', error)
alert('获取验证码失败，请刷新页面重试')
showErrorMessage('获取验证码失败，请刷新页面重试')
}
}
@@ -158,7 +163,7 @@ onMounted(() => {
const handleRegister = async () => {
try {
// 验证表单
if (!validateUsername() || !validatePassword() || !validateConfirmPassword() || !validateCaptcha()) {
if (!validateForm()) {
return
}
@@ -170,20 +175,80 @@ const handleRegister = async () => {
captcha.value
)
alert('注册成功')
showErrorMessage('注册成功', '提示')
// 切换到登录模块
emit('login')
} catch (error) {
console.error('注册失败:', error)
if (error.response && error.response.status === 400) {
alert('该QQ号已被注册')
if (error.response) {
switch (error.response.status) {
case 400:
showErrorMessage('该QQ号已被注册')
break
case 409:
showErrorMessage('用户名已存在')
break
default:
showErrorMessage(error.response?.data?.message || error.message || '注册失败，请稍后重试')
}
} else {
alert(error.response?.data?.message || error.message || '注册失败，请稍后重试')
showErrorMessage(error.message || '注册失败，请稍后重试')
}
// 注册失败时刷新验证码
refreshCaptcha()
}
}
const validateForm = () => {
// 重置所有错误信息
usernameError.value = ''
passwordError.value = ''
confirmPasswordError.value = ''
captchaError.value = ''
// 验证用户名
if (!username.value) {
usernameError.value = '请输入QQ号码'
return false
}
// 只允许纯数字
if (!/^\d+$/.test(username.value)) {
usernameError.value = 'QQ号只能包含数字'
return false
}
// 验证密码
if (!password.value) {
passwordError.value = '请输入密码'
return false
}
if (password.value.length < 6) {
passwordError.value = '密码长度不能小于6个字符'
return false
}
// 验证确认密码
if (!confirmPassword.value) {
confirmPasswordError.value = '请再次输入密码'
return false
}
if (confirmPassword.value !== password.value) {
confirmPasswordError.value = '两次输入的密码不一致'
return false
}
// 验证验证码
if (!captcha.value) {
captchaError.value = '请输入验证码'
return false
}
if (captcha.value.length !== 4) {
captchaError.value = '验证码长度不正确'
return false
}
return true
}
</script>
<style scoped>