-
-
管理员: 15538239326 / 0627
+
+ 管理员: admin@example.com
-
- 普通用户: 13689270819 / 0627
-
-
- 测试用户: testuser / test123
-
-
-
个人主页: mingzi_FBx7foZYDS7inLQb / 123456
+
+ 普通用户: 13689270819@example.com
@@ -101,46 +100,110 @@ const userStore = useUserStore()
const countdown = ref(0)
let countdownTimer = null
+const loginType = ref('email') // 只支持邮箱登录
+
const loginForm = reactive({
- phone: '',
+ email: '',
code: ''
})
-// 清除可能的缓存数据
+// 清空表单
const clearForm = () => {
- loginForm.phone = ''
+ loginForm.email = ''
loginForm.code = ''
+ // 重置倒计时
+ if (countdownTimer) {
+ clearInterval(countdownTimer)
+ countdownTimer = null
+ }
+ countdown.value = 0
}
+
// 快速填充测试账号
-const fillTestAccount = (username, password) => {
- loginForm.phone = username
- loginForm.code = password
+const fillTestAccount = (email, code) => {
+ loginForm.email = email
+ loginForm.code = code
}
// 组件挂载时设置默认测试账号
onMounted(() => {
- // 设置默认的管理员测试账号（手机号格式）
- loginForm.phone = '15538239326'
- loginForm.code = '0627'
+ // 设置默认的测试邮箱
+ loginForm.email = 'admin@example.com'
+ // 不设置验证码，让用户手动输入
})
-// 获取验证码
-const getCode = () => {
- if (!loginForm.phone) {
- ElMessage.warning('请先输入手机号')
+
+// 获取邮箱验证码
+const getEmailCode = async () => {
+ if (!loginForm.email) {
+ ElMessage.warning('请先输入邮箱地址')
return
}
- if (!/^1[3-9]\d{9}$/.test(loginForm.phone)) {
- ElMessage.warning('请输入正确的手机号')
+ if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(loginForm.email)) {
+ ElMessage.warning('请输入正确的邮箱地址')
return
}
- // 模拟发送验证码
- ElMessage.success('验证码已发送')
-
- // 开始倒计时
+ try {
+ // 调用后端API发送邮箱验证码
+ const response = await fetch('http://localhost:8080/api/verification/email/send', {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json'
+ },
+ body: JSON.stringify({
+ email: loginForm.email
+ })
+ })
+
+ const result = await response.json()
+
+ if (result.success) {
+ ElMessage.success('验证码已发送到您的邮箱')
+ // 开始倒计时
+ startCountdown()
+ } else {
+ ElMessage.error(result.message || '发送失败')
+ }
+ } catch (error) {
+ console.error('发送验证码失败:', error)
+ // 开发环境：显示真实验证码
+ if (process.env.NODE_ENV === 'development') {
+ // 生成6位随机验证码（与后端逻辑一致）
+ const randomCode = Array.from({length: 6}, () => Math.floor(Math.random() * 10)).join('')
+
+ // 开发模式：将验证码同步到后端
+ try {
+ await fetch('http://localhost:8080/api/verification/email/dev-set', {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json'
+ },
+ body: JSON.stringify({
+ email: loginForm.email,
+ code: randomCode
+ })
+ })
+ } catch (syncError) {
+ console.warn('同步验证码到后端失败:', syncError)
+ }
+
+ console.log(`📨 模拟发送邮件到: ${loginForm.email}`)
+ console.log(`📝 邮件内容: 您的验证码是 ${randomCode}，有效期5分钟`)
+ console.log(`📮 发信地址: dev-noreply@local.yourdomain.com`)
+ console.log(`🔑 验证码: ${randomCode}`)
+ ElMessage.success(`验证码已发送（开发模式）- 验证码: ${randomCode}`)
+ startCountdown()
+ } else {
+ ElMessage.error('网络错误，请稍后重试')
+ }
+ }
+}
+
+// 开始倒计时
+const startCountdown = () => {
countdown.value = 60
countdownTimer = setInterval(() => {
countdown.value--
@@ -152,8 +215,13 @@ const getCode = () => {
}
const handleLogin = async () => {
- if (!loginForm.phone) {
- ElMessage.warning('请输入手机号')
+ // 验证表单
+ if (!loginForm.email) {
+ ElMessage.warning('请输入邮箱地址')
+ return
+ }
+ if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(loginForm.email)) {
+ ElMessage.warning('请输入正确的邮箱地址')
return
}
@@ -162,22 +230,64 @@ const handleLogin = async () => {
return
}
- if (!/^1[3-9]\d{9}$/.test(loginForm.phone)) {
- ElMessage.warning('请输入正确的手机号')
- return
- }
-
try {
console.log('开始登录...')
- // 模拟验证码登录，这里可以调用实际的API
- // 为了演示，我们使用手机号作为用户名，验证码作为密码
- const mockForm = {
- username: loginForm.phone,
- password: loginForm.code
- }
+ let result
- const result = await userStore.loginUser(mockForm)
+ // 邮箱验证码登录
+ try {
+ const response = await fetch('http://localhost:8080/api/auth/login/email', {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json'
+ },
+ body: JSON.stringify({
+ email: loginForm.email,
+ code: loginForm.code
+ })
+ })
+
+ const apiResult = await response.json()
+
+ if (apiResult.success) {
+ // 保存用户信息和token
+ sessionStorage.setItem('token', apiResult.data.token)
+ sessionStorage.setItem('user', JSON.stringify(apiResult.data.user))
+ userStore.user = apiResult.data.user
+ userStore.token = apiResult.data.token
+ result = { success: true }
+ } else {
+ result = { success: false, message: apiResult.message }
+ }
+ } catch (error) {
+ console.error('邮箱验证码登录失败:', error)
+ // 开发环境：模拟登录成功
+ if (process.env.NODE_ENV === 'development') {
+ console.log('📧 开发模式：模拟邮箱验证码登录成功')
+ // 模拟用户信息（自动注册新用户）
+ const username = loginForm.email.split('@')[0]
+ const mockUser = {
+ id: Math.floor(Math.random() * 1000) + 1,
+ username: username,
+ email: loginForm.email,
+ role: 'ROLE_USER', // 新用户默认为普通用户
+ nickname: username,
+ points: 50
+ }
+ const mockToken = 'mock-jwt-token-' + Date.now()
+
+ // 保存模拟的用户信息
+ sessionStorage.setItem('token', mockToken)
+ sessionStorage.setItem('user', JSON.stringify(mockUser))
+ userStore.user = mockUser
+ userStore.token = mockToken
+
+ result = { success: true }
+ } else {
+ result = { success: false, message: '网络错误，请稍后重试' }
+ }
+ }
if (result.success) {
console.log('登录成功，用户信息:', userStore.user)
@@ -209,7 +319,7 @@ const handleLogin = async () => {
min-height: 100vh;
width: 100vw;
height: 100vh;
- background: transparent;
+ background: url('/images/backgrounds/login.png') center/cover no-repeat;
position: fixed;
top: 0;
left: 0;
@@ -235,16 +345,16 @@ const handleLogin = async () => {
.login-card {
position: absolute;
top: 50%;
- right: 15%; /* 往左移动一些 */
+ right: 10%;
transform: translateY(-50%);
- width: 500px;
- background: rgba(26, 26, 46, 0.8);
+ width: 800px;
+ max-width: 90vw;
+ background: rgba(100, 150, 200, 0.3);
backdrop-filter: blur(20px);
border-radius: 24px;
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow:
- 0 8px 32px rgba(0, 0, 0, 0.3),
- inset 0 1px 0 rgba(255, 255, 255, 0.1);
+ 0 8px 32px rgba(0, 0, 0, 0.5);
padding: 50px;
z-index: 10;
}
@@ -295,42 +405,31 @@ const handleLogin = async () => {
gap: 25px;
}
-/* 手机号输入组 */
-.phone-input-group {
- display: flex;
- gap: 12px;
+
+/* 登录标题 */
+.login-title {
+ text-align: center;
+ margin-bottom: 30px;
}
-.country-code {
- width: 100px;
- height: 55px;
- background: rgba(0, 0, 0, 0.3);
- border: 1px solid rgba(255, 255, 255, 0.1);
- border-radius: 10px;
- display: flex;
- align-items: center;
- justify-content: center;
+.login-title h2 {
color: white;
- font-size: 16px;
- cursor: pointer;
- transition: all 0.3s ease;
- box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
+ font-size: 24px;
+ font-weight: 600;
+ margin: 0;
}
-.country-code:hover {
- background: rgba(0, 0, 0, 0.5);
+
+/* 邮箱输入组 */
+.email-input-group {
+ margin-bottom: 20px;
}
-.country-code .el-icon {
- margin-left: 6px;
- font-size: 14px;
+.email-input {
+ width: 100%;
}
-.phone-input {
- flex: 1;
-}
-
-.phone-input :deep(.el-input__wrapper) {
+.email-input :deep(.el-input__wrapper) {
background: rgba(0, 0, 0, 0.3);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 10px;
@@ -340,13 +439,13 @@ const handleLogin = async () => {
height: 55px;
}
-.phone-input :deep(.el-input__inner) {
+.email-input :deep(.el-input__inner) {
color: white;
background: transparent;
font-size: 16px;
}
-.phone-input :deep(.el-input__inner::placeholder) {
+.email-input :deep(.el-input__inner::placeholder) {
color: rgba(255, 255, 255, 0.5);
}
@@ -484,7 +583,7 @@ const handleLogin = async () => {
.login-card {
position: relative;
top: auto;
- right: auto;
+ left: auto;
transform: none;
margin: 50px auto;
width: 90%;
@@ -506,14 +605,10 @@ const handleLogin = async () => {
padding: 40px 25px;
}
- .phone-input-group,
.code-input-group {
flex-direction: column;
gap: 15px;
}
- .country-code {
- width: 100%;
- }
}
diff --git a/demo/frontend/src/views/Subscription.vue b/demo/frontend/src/views/Subscription.vue
index 15a614a..6d5a8e9 100644
--- a/demo/frontend/src/views/Subscription.vue
+++ b/demo/frontend/src/views/Subscription.vue
@@ -1,4 +1,4 @@
-
+