h5样式
This commit is contained in:
952
schoolNewsWeb/src/views/public/ai/AIAgent.mobile.vue
Normal file
952
schoolNewsWeb/src/views/public/ai/AIAgent.mobile.vue
Normal file
@@ -0,0 +1,952 @@
|
||||
<template>
|
||||
<div v-if="hasAgent">
|
||||
<!-- 悬浮球 -->
|
||||
<div class="ball-container">
|
||||
<div class="chat-ball" @click="openDrawer">
|
||||
<img src="@/assets/imgs/chat-ball.svg" alt="AI助手" class="ball-icon" />
|
||||
<div v-if="unreadCount > 0" class="unread-badge">{{ unreadCount }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- AI助手抽屉 -->
|
||||
<el-drawer
|
||||
v-model="drawerVisible"
|
||||
title=""
|
||||
direction="btt"
|
||||
size="85%"
|
||||
:show-close="false"
|
||||
class="ai-drawer"
|
||||
>
|
||||
<!-- 自定义标题栏 -->
|
||||
<template #header>
|
||||
<div class="drawer-header">
|
||||
<button @click="showHistory = !showHistory" class="hamburger-btn">
|
||||
<div class="hamburger-lines">
|
||||
<span class="line"></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"></span>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<div class="drawer-title">
|
||||
<span>{{ agentConfig?.name || 'AI助手' }}</span>
|
||||
</div>
|
||||
|
||||
<button @click="drawerVisible = false" class="close-btn">
|
||||
<el-icon><Close /></el-icon>
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 抽屉内容 -->
|
||||
<div class="drawer-content">
|
||||
<!-- 历史对话侧边栏 -->
|
||||
<div v-if="showHistory" class="history-sidebar">
|
||||
<div class="history-header">
|
||||
<h3>对话历史</h3>
|
||||
<button @click="showHistory = false" class="close-history-btn">
|
||||
<el-icon><Close /></el-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="history-list">
|
||||
<button class="new-chat-btn" @click="prepareNewConversation">
|
||||
+ 新建对话
|
||||
</button>
|
||||
|
||||
<div v-for="conv in conversations" :key="conv.id" class="conversation-item"
|
||||
:class="{ active: currentConversation?.id === conv.id }" @click="selectConversation(conv)">
|
||||
<div class="conv-title">{{ conv.title || '新对话' }}</div>
|
||||
<div class="conv-time">{{ formatTime(conv.updateTime) }}</div>
|
||||
<button class="delete-conv-btn" @click.stop="deleteConversationConfirm(conv.id || '')">
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 主要聊天区域 -->
|
||||
<div class="chat-main" :class="{ 'with-history': showHistory }">
|
||||
<!-- 欢迎界面 -->
|
||||
<div v-if="!currentConversation && messages.length === 0" class="welcome-content">
|
||||
<div class="welcome-icon">
|
||||
<img v-if="agentAvatarUrl" :src="agentAvatarUrl" alt="AI助手" class="welcome-avatar" />
|
||||
<img v-else src="@/assets/imgs/assistant.svg" alt="AI助手" class="welcome-avatar" />
|
||||
</div>
|
||||
<h2>你好！我是{{ agentConfig?.name || 'AI助手' }}</h2>
|
||||
<AIRecommend @select="handleRecommendSelect" />
|
||||
</div>
|
||||
|
||||
<!-- 对话消息列表 -->
|
||||
<div v-else class="messages-container" ref="chatContentRef">
|
||||
<div v-for="message in messages" :key="message.id" class="message-item">
|
||||
<!-- 用户消息 -->
|
||||
<div v-if="message.role === 'user'" class="message user-message">
|
||||
<div class="message-avatar">
|
||||
<div class="avatar-circle">👤</div>
|
||||
</div>
|
||||
<div class="message-content">
|
||||
<div class="message-text">{{ message.content }}</div>
|
||||
<div class="message-time">{{ formatMessageTime(message.createTime) }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- AI 消息 -->
|
||||
<div v-else class="message ai-message">
|
||||
<div class="message-avatar">
|
||||
<div class="avatar-circle ai-avatar">
|
||||
<img v-if="agentAvatarUrl" :src="agentAvatarUrl" alt="AI助手" class="ai-avatar-img" />
|
||||
<img v-else src="@/assets/imgs/assistant.svg" alt="AI助手" class="ai-avatar-img" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="message-content">
|
||||
<div v-if="message.content" class="message-text" v-html="formatMarkdown(message.content)"></div>
|
||||
|
||||
<!-- 正在生成中的加载动画 -->
|
||||
<div v-if="isGenerating && messages[messages.length - 1]?.id === message.id" class="typing-indicator">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
|
||||
<div class="message-time">{{ formatMessageTime(message.createTime) }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 输入区域 -->
|
||||
<div class="input-section">
|
||||
<div class="input-area">
|
||||
<textarea v-model="inputMessage" class="input-text" placeholder="请输入问题..."
|
||||
@keydown.enter.exact.prevent="sendMessage" ref="inputRef" rows="2" />
|
||||
<div class="input-actions">
|
||||
<button @click="sendMessage" class="send-btn" :disabled="!canSend">
|
||||
<el-icon><Promotion /></el-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-drawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted, nextTick } from 'vue';
|
||||
import { ElMessage, ElMessageBox } from 'element-plus';
|
||||
import { Close, Paperclip, VideoPause, Promotion } from '@element-plus/icons-vue';
|
||||
import { chatApi, chatHistoryApi, aiAgentConfigApi, fileUploadApi } from '@/apis/ai';
|
||||
import type { AiConversation, AiMessage, AiAgentConfig, AiUploadFile } from '@/types/ai';
|
||||
import { AIRecommend } from '@/views/public/ai';
|
||||
|
||||
interface AIAgentProps {
|
||||
agentId?: string;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<AIAgentProps>(), {
|
||||
agentId: undefined
|
||||
});
|
||||
|
||||
// ===== 移动端特有状态 =====
|
||||
const drawerVisible = ref(false);
|
||||
const showHistory = ref(false);
|
||||
|
||||
// ===== AI助手配置 =====
|
||||
const hasAgent = ref(true);
|
||||
const agentConfig = ref<AiAgentConfig | null>(null);
|
||||
const agentAvatarUrl = ref<string>('');
|
||||
|
||||
// ===== 悬浮球相关 =====
|
||||
const ballRef = ref<HTMLElement | null>(null);
|
||||
const ballX = ref(0);
|
||||
const ballY = ref(0);
|
||||
const unreadCount = ref(0);
|
||||
|
||||
// 悬浮球样式
|
||||
const ballStyle = computed(() => ({
|
||||
right: '20px',
|
||||
bottom: '100px',
|
||||
position: 'fixed'
|
||||
}));
|
||||
|
||||
// 打开抽屉
|
||||
function openDrawer() {
|
||||
drawerVisible.value = true;
|
||||
}
|
||||
|
||||
// ===== 对话相关 =====
|
||||
const conversations = ref<AiConversation[]>([]);
|
||||
const currentConversation = ref<AiConversation | null>(null);
|
||||
const hasMoreConversations = ref(false);
|
||||
const messages = ref<AiMessage[]>([]);
|
||||
const inputMessage = ref('');
|
||||
const isGenerating = ref(false);
|
||||
const chatContentRef = ref<HTMLElement | null>(null);
|
||||
const inputRef = ref<HTMLTextAreaElement | null>(null);
|
||||
const uploadedFiles = ref([]);
|
||||
|
||||
// 是否可以发送
|
||||
const canSend = computed(() => {
|
||||
return inputMessage.value.trim().length > 0 && !isGenerating.value;
|
||||
});
|
||||
|
||||
// 加载AI助手配置
|
||||
async function loadAgentConfig() {
|
||||
try {
|
||||
if (props.agentId) {
|
||||
const result = await aiAgentConfigApi.getAgentById(props.agentId);
|
||||
if (result.success && result.data) {
|
||||
agentConfig.value = result.data;
|
||||
} else {
|
||||
hasAgent.value = false;
|
||||
}
|
||||
} else {
|
||||
const result = await aiAgentConfigApi.listEnabledAgents();
|
||||
if (result.success && result.dataList && result.dataList.length > 0) {
|
||||
agentConfig.value = result.dataList[0];
|
||||
} else {
|
||||
hasAgent.value = false;
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载AI助手配置失败:', error);
|
||||
}
|
||||
}
|
||||
|
||||
// 加载最近对话
|
||||
async function loadRecentConversations() {
|
||||
try {
|
||||
const result = await chatHistoryApi.getRecentConversations(10);
|
||||
if (result.success) {
|
||||
const conversationList = result.dataList || result.data;
|
||||
if (conversationList && Array.isArray(conversationList)) {
|
||||
conversations.value = conversationList;
|
||||
} else {
|
||||
conversations.value = [];
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载对话历史失败:', error);
|
||||
}
|
||||
}
|
||||
|
||||
// 准备新对话
|
||||
function prepareNewConversation() {
|
||||
currentConversation.value = null;
|
||||
messages.value = [];
|
||||
showHistory.value = false;
|
||||
ElMessage.success('已准备新对话');
|
||||
}
|
||||
|
||||
// 选择对话
|
||||
async function selectConversation(conv: AiConversation) {
|
||||
currentConversation.value = conv;
|
||||
showHistory.value = false;
|
||||
if (conv.id) {
|
||||
await loadMessages(conv.id);
|
||||
}
|
||||
}
|
||||
|
||||
// 删除对话确认
|
||||
async function deleteConversationConfirm(conversationId: string) {
|
||||
try {
|
||||
await ElMessageBox.confirm('确定要删除这个对话吗？', '提示', {
|
||||
confirmButtonText: '删除',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
});
|
||||
|
||||
const result = await chatApi.deleteConversation(conversationId);
|
||||
if (result.success) {
|
||||
conversations.value = conversations.value.filter(c => c.id !== conversationId);
|
||||
if (currentConversation.value?.id === conversationId) {
|
||||
prepareNewConversation();
|
||||
}
|
||||
ElMessage.success('对话已删除');
|
||||
}
|
||||
} catch (error) {
|
||||
if (error !== 'cancel') {
|
||||
console.error('删除对话失败:', error);
|
||||
ElMessage.error('删除对话失败');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 加载更多对话
|
||||
function loadMoreConversations() {
|
||||
// TODO: 实现分页加载
|
||||
}
|
||||
|
||||
// 加载消息
|
||||
async function loadMessages(conversationId: string) {
|
||||
try {
|
||||
const result = await chatApi.listMessages(conversationId);
|
||||
if (result.success) {
|
||||
const messageList = result.dataList || result.data || [];
|
||||
messages.value = Array.isArray(messageList) ? messageList : [];
|
||||
await nextTick();
|
||||
scrollToBottom();
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载消息失败:', error);
|
||||
}
|
||||
}
|
||||
|
||||
// 发送消息
|
||||
async function sendMessage() {
|
||||
if (!canSend.value) return;
|
||||
|
||||
const message = inputMessage.value.trim();
|
||||
if (!message) return;
|
||||
|
||||
// 如果没有当前对话，创建新对话
|
||||
if (!currentConversation.value) {
|
||||
const title = message.length > 20 ? message.substring(0, 20) + '...' : message;
|
||||
const newConv = await createNewConversation(title);
|
||||
if (!newConv) {
|
||||
ElMessage.error('创建对话失败');
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// 添加用户消息到界面
|
||||
const userMessage: AiMessage = {
|
||||
id: `temp-user-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
|
||||
conversationID: currentConversation.value?.id || '',
|
||||
role: 'user',
|
||||
content: message,
|
||||
createTime: new Date().toISOString(),
|
||||
updateTime: new Date().toISOString()
|
||||
};
|
||||
|
||||
messages.value.push(userMessage);
|
||||
inputMessage.value = '';
|
||||
|
||||
await nextTick();
|
||||
scrollToBottom();
|
||||
|
||||
isGenerating.value = true;
|
||||
|
||||
// 添加AI消息
|
||||
const aiMessage: AiMessage = {
|
||||
id: `temp-ai-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
|
||||
conversationID: currentConversation.value?.id || '',
|
||||
role: 'assistant',
|
||||
content: '',
|
||||
createTime: new Date().toISOString(),
|
||||
updateTime: new Date().toISOString()
|
||||
};
|
||||
|
||||
messages.value.push(aiMessage);
|
||||
|
||||
try {
|
||||
let aiMessageContent = '';
|
||||
|
||||
chatApi.streamChat({
|
||||
agentId: agentConfig.value!.id!,
|
||||
conversationId: currentConversation.value?.id || '',
|
||||
query: message,
|
||||
files: []
|
||||
}, {
|
||||
onStart: () => {},
|
||||
onInit: (initData) => {
|
||||
const lastMessage = messages.value[messages.value.length - 1];
|
||||
if (lastMessage && lastMessage.role === 'assistant') {
|
||||
lastMessage.id = initData.messageId;
|
||||
}
|
||||
},
|
||||
onMessage: (chunk: string) => {
|
||||
if (chunk) {
|
||||
aiMessageContent += chunk;
|
||||
}
|
||||
const aiMessageIndex = messages.value.length - 1;
|
||||
if (aiMessageIndex >= 0) {
|
||||
messages.value[aiMessageIndex].content = aiMessageContent;
|
||||
}
|
||||
nextTick(() => scrollToBottom());
|
||||
},
|
||||
onDifyEvent: () => {},
|
||||
onMessageEnd: () => {
|
||||
isGenerating.value = false;
|
||||
},
|
||||
onError: (error: Error) => {
|
||||
console.error('对话失败:', error);
|
||||
ElMessage.error('对话失败，请重试');
|
||||
isGenerating.value = false;
|
||||
}
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('发送消息失败:', error);
|
||||
ElMessage.error('发送消息失败');
|
||||
isGenerating.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
// 创建新对话
|
||||
async function createNewConversation(title?: string) {
|
||||
try {
|
||||
const result = await chatApi.createConversation(agentConfig.value!.id!, title);
|
||||
if (result.success && result.data) {
|
||||
currentConversation.value = result.data;
|
||||
conversations.value.unshift(result.data);
|
||||
return result.data;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('创建对话失败:', error);
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
// 处理推荐选择
|
||||
function handleRecommendSelect(text: string) {
|
||||
inputMessage.value = text;
|
||||
sendMessage();
|
||||
}
|
||||
|
||||
// 滚动到底部
|
||||
function scrollToBottom() {
|
||||
if (chatContentRef.value) {
|
||||
chatContentRef.value.scrollTop = chatContentRef.value.scrollHeight;
|
||||
}
|
||||
}
|
||||
|
||||
// 工具函数
|
||||
function formatTime(dateStr: string | undefined) {
|
||||
if (!dateStr) return '';
|
||||
const date = new Date(dateStr);
|
||||
const now = new Date();
|
||||
const diff = now.getTime() - date.getTime();
|
||||
const minutes = Math.floor(diff / 60000);
|
||||
const hours = Math.floor(diff / 3600000);
|
||||
const days = Math.floor(diff / 86400000);
|
||||
|
||||
if (minutes < 1) return '刚刚';
|
||||
if (minutes < 60) return `${minutes}分钟前`;
|
||||
if (hours < 24) return `${hours}小时前`;
|
||||
if (days < 7) return `${days}天前`;
|
||||
return date.toLocaleDateString();
|
||||
}
|
||||
|
||||
function formatMessageTime(dateStr: string | undefined) {
|
||||
if (!dateStr) return '';
|
||||
const date = new Date(dateStr);
|
||||
return date.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' });
|
||||
}
|
||||
|
||||
function formatMarkdown(content: string) {
|
||||
let html = content;
|
||||
html = html.replace(/```([\s\S]*?)```/g, '<pre><code>$1</code></pre>');
|
||||
html = html.replace(/`([^`]+)`/g, '<code>$1</code>');
|
||||
html = html.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
|
||||
html = html.replace(/\*([^*]+)\*/g, '<em>$1</em>');
|
||||
html = html.replace(/\n/g, '<br>');
|
||||
return html;
|
||||
}
|
||||
|
||||
// 生命周期
|
||||
onMounted(() => {
|
||||
loadAgentConfig();
|
||||
loadRecentConversations();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
// 悬浮球样式
|
||||
.ball-container {
|
||||
position: fixed;
|
||||
right: 16px;
|
||||
bottom: 80px;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.chat-ball {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
transition: transform 0.3s ease;
|
||||
user-select: none;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
.ball-icon {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.unread-badge {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
background: #E7000B;
|
||||
color: white;
|
||||
border-radius: 50%;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 11px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
// 抽屉样式
|
||||
:deep(.ai-drawer) {
|
||||
.el-drawer__header {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border-bottom: 1px solid #E5E7EB;
|
||||
}
|
||||
|
||||
.el-drawer__body {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.drawer-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 16px 20px;
|
||||
background: #fff;
|
||||
|
||||
.hamburger-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 8px;
|
||||
|
||||
.hamburger-lines {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 3px;
|
||||
|
||||
.line {
|
||||
width: 18px;
|
||||
height: 2px;
|
||||
background: #141F38;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.drawer-title {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #141F38;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 8px;
|
||||
color: #6B7280;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.drawer-content {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// 历史对话侧边栏
|
||||
.history-sidebar {
|
||||
width: 280px;
|
||||
background: #F9FAFB;
|
||||
border-right: 1px solid #E5E7EB;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
z-index: 10;
|
||||
|
||||
.history-header {
|
||||
padding: 16px 20px;
|
||||
border-bottom: 1px solid #E5E7EB;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
h3 {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #101828;
|
||||
}
|
||||
|
||||
.close-history-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
color: #6B7280;
|
||||
}
|
||||
}
|
||||
|
||||
.history-list {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.new-chat-btn {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
background: #E7000B;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 16px;
|
||||
|
||||
&:hover {
|
||||
background: #C90009;
|
||||
}
|
||||
}
|
||||
|
||||
.conversation-item {
|
||||
padding: 12px;
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 8px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
transition: all 0.2s;
|
||||
|
||||
&:hover {
|
||||
background: #EFF6FF;
|
||||
|
||||
.delete-conv-btn {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: #E7000B;
|
||||
color: white;
|
||||
|
||||
.conv-title,
|
||||
.conv-time {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.conv-title {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #101828;
|
||||
margin-bottom: 4px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.conv-time {
|
||||
font-size: 12px;
|
||||
color: #6B7280;
|
||||
}
|
||||
|
||||
.delete-conv-btn {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s;
|
||||
|
||||
&:hover {
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.load-more {
|
||||
text-align: center;
|
||||
padding: 12px;
|
||||
|
||||
button {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #E7000B;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 主聊天区域
|
||||
.chat-main {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
|
||||
&.with-history {
|
||||
margin-left: 280px;
|
||||
}
|
||||
|
||||
.welcome-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
overflow-y: auto;
|
||||
|
||||
.welcome-icon {
|
||||
margin-bottom: 20px;
|
||||
|
||||
.welcome-avatar {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: #101828;
|
||||
margin: 0 0 20px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.messages-container {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 20px;
|
||||
|
||||
.message-item {
|
||||
margin-bottom: 20px;
|
||||
|
||||
.message {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: flex-start;
|
||||
|
||||
.message-avatar {
|
||||
flex-shrink: 0;
|
||||
|
||||
.avatar-circle {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
background: #E5E7EB;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 16px;
|
||||
overflow: hidden;
|
||||
|
||||
&.ai-avatar {
|
||||
background: #EFF6FF;
|
||||
}
|
||||
|
||||
.ai-avatar-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.message-content {
|
||||
flex: 1;
|
||||
max-width: calc(100% - 50px);
|
||||
|
||||
.message-text {
|
||||
padding: 10px 14px;
|
||||
border-radius: 12px;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
word-wrap: break-word;
|
||||
|
||||
:deep(code) {
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
padding: 2px 4px;
|
||||
border-radius: 4px;
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
:deep(pre) {
|
||||
background: #1F2937;
|
||||
color: #F9FAFB;
|
||||
padding: 12px;
|
||||
border-radius: 8px;
|
||||
overflow-x: auto;
|
||||
margin: 8px 0;
|
||||
|
||||
code {
|
||||
background: none;
|
||||
color: inherit;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.message-time {
|
||||
font-size: 11px;
|
||||
color: #9CA3AF;
|
||||
margin-top: 4px;
|
||||
padding-left: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 用户消息靠右
|
||||
.user-message {
|
||||
flex-direction: row-reverse;
|
||||
|
||||
.message-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
|
||||
.message-text {
|
||||
background: #E7000B;
|
||||
color: white;
|
||||
max-width: 240px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// AI消息靠左
|
||||
.ai-message {
|
||||
.message-content {
|
||||
.message-text {
|
||||
background: #F3F4F6;
|
||||
color: #101828;
|
||||
max-width: 280px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 加载动画
|
||||
.typing-indicator {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
padding: 8px 0;
|
||||
width: fit-content;
|
||||
|
||||
span {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: #9CA3AF;
|
||||
animation: typing 1.4s infinite;
|
||||
|
||||
&:nth-child(2) {
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
animation-delay: 0.4s;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.input-section {
|
||||
border-top: 1px solid #E5E7EB;
|
||||
padding: 16px 20px;
|
||||
background: white;
|
||||
flex-shrink: 0;
|
||||
|
||||
.input-area {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: flex-end;
|
||||
|
||||
.input-text {
|
||||
flex: 1;
|
||||
padding: 12px 16px;
|
||||
border: 1px solid #D1D5DB;
|
||||
border-radius: 20px;
|
||||
font-size: 14px;
|
||||
resize: none;
|
||||
max-height: 100px;
|
||||
font-family: inherit;
|
||||
background: #F9FAFB;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: #E7000B;
|
||||
background: white;
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: #9CA3AF;
|
||||
}
|
||||
}
|
||||
|
||||
.input-actions {
|
||||
.send-btn {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
background: #E7000B;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
transition: all 0.2s;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background: #C90009;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes typing {
|
||||
0%, 60%, 100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
30% {
|
||||
transform: translateY(-6px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -40,7 +40,8 @@ type TabName = 'top' | 'ideological'
|
||||
const activeName = ref<TabName>('top')
|
||||
const handleClick = (tab: any, event: Event) => {
|
||||
console.log(tab, event)
|
||||
loadData()
|
||||
// 直接使用tab.props.name而不是等待activeName更新
|
||||
loadDataByType(tab.props.name as TabName)
|
||||
}
|
||||
const showData = ref<ResourceRecommendVO[]>([])
|
||||
|
||||
@@ -51,12 +52,16 @@ function buildUrl(item: ResourceRecommendVO) {
|
||||
return `${PUBLIC_WEB_PATH}/article/show?articleId=${item.resourceID}`;
|
||||
}
|
||||
|
||||
async function loadData(){
|
||||
resourceRecommendApi.getRecommendsByType(tabMap[activeName.value], limit).then((res) => {
|
||||
async function loadDataByType(type: TabName){
|
||||
resourceRecommendApi.getRecommendsByType(tabMap[type], limit).then((res) => {
|
||||
showData.value = res.dataList || []
|
||||
})
|
||||
}
|
||||
|
||||
async function loadData(){
|
||||
await loadDataByType(activeName.value)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadData().then(() => {
|
||||
console.log()
|
||||
|
||||
@@ -1,2 +1,3 @@
|
||||
export { default as AIAgent} from './AIAgent.vue';
|
||||
export { default as AIAgentMobile} from './AIAgent.mobile.vue';
|
||||
export { default as AIRecommend} from './AIRecommend.vue';
|
||||
710
schoolNewsWeb/src/views/public/login/ForgotPassword.mobile.vue
Normal file
710
schoolNewsWeb/src/views/public/login/ForgotPassword.mobile.vue
Normal file
@@ -0,0 +1,710 @@
|
||||
<template>
|
||||
<div class="login-container">
|
||||
<!-- 左侧励志区域 -->
|
||||
<div class="login-left">
|
||||
<div class="left-content">
|
||||
<div class="quote-text">
|
||||
<span class="quote-mark">"</span>
|
||||
<div class="quote-content">
|
||||
<p>不负时代韶华，</p>
|
||||
<p>争做时代新人。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 右侧忘记密码表单区域 -->
|
||||
<div class="login-right">
|
||||
<div class="login-form-container">
|
||||
<!-- Logo和标题区域 -->
|
||||
<div class="login-header">
|
||||
<div class="logo-section">
|
||||
<div class="logo">
|
||||
<img src="@/assets/imgs/logo-icon.svg" alt="Logo" />
|
||||
</div>
|
||||
<h1 class="platform-title">红色思政学习平台</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 重置密码方式切换 -->
|
||||
<div class="reset-type-tabs">
|
||||
<div
|
||||
:class="['tab-item', { active: resetType === 'phone' }]"
|
||||
@click="switchResetType('phone')"
|
||||
>
|
||||
手机号重置
|
||||
</div>
|
||||
<div
|
||||
:class="['tab-item', { active: resetType === 'email' }]"
|
||||
@click="switchResetType('email')"
|
||||
>
|
||||
邮箱重置
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 忘记密码表单 -->
|
||||
<el-form
|
||||
ref="forgotFormRef"
|
||||
:model="forgotForm"
|
||||
:rules="forgotRules"
|
||||
class="forgot-form"
|
||||
@submit.prevent="handleResetPassword"
|
||||
>
|
||||
<p class="form-title">重置密码</p>
|
||||
|
||||
<!-- 手机号重置 -->
|
||||
<template v-if="resetType === 'phone'">
|
||||
<el-form-item prop="phone">
|
||||
<el-input
|
||||
v-model="forgotForm.phone"
|
||||
placeholder="请输入手机号"
|
||||
class="form-input"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="smsCode">
|
||||
<div class="captcha-input-container">
|
||||
<el-input
|
||||
v-model="forgotForm.smsCode"
|
||||
placeholder="请输入手机验证码"
|
||||
class="form-input captcha-input"
|
||||
/>
|
||||
<el-button
|
||||
:disabled="smsCountdown > 0"
|
||||
@click="handleSendSmsCode"
|
||||
class="send-captcha-btn"
|
||||
>
|
||||
{{ smsCountdown > 0 ? `${smsCountdown}s` : '获取验证码' }}
|
||||
</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<!-- 邮箱重置 -->
|
||||
<template v-else>
|
||||
<el-form-item prop="email">
|
||||
<el-input
|
||||
v-model="forgotForm.email"
|
||||
placeholder="请输入邮箱"
|
||||
class="form-input"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="emailCode">
|
||||
<div class="captcha-input-container">
|
||||
<el-input
|
||||
v-model="forgotForm.emailCode"
|
||||
placeholder="请输入邮箱验证码"
|
||||
class="form-input captcha-input"
|
||||
/>
|
||||
<el-button
|
||||
:disabled="emailCountdown > 0"
|
||||
@click="handleSendEmailCode"
|
||||
class="send-captcha-btn"
|
||||
>
|
||||
{{ emailCountdown > 0 ? `${emailCountdown}s` : '获取验证码' }}
|
||||
</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<!-- 新密码 -->
|
||||
<el-form-item prop="newPassword">
|
||||
<el-input
|
||||
v-model="forgotForm.newPassword"
|
||||
type="password"
|
||||
placeholder="请输入新密码（至少6个字符）"
|
||||
show-password
|
||||
class="form-input"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="confirmPassword">
|
||||
<el-input
|
||||
v-model="forgotForm.confirmPassword"
|
||||
type="password"
|
||||
placeholder="请再次输入新密码"
|
||||
show-password
|
||||
class="form-input"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button
|
||||
type="primary"
|
||||
:loading="resetLoading"
|
||||
@click="handleResetPassword"
|
||||
class="reset-button"
|
||||
>
|
||||
重置密码
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<!-- 底部信息 -->
|
||||
<div class="login-footer">
|
||||
<p class="register-link">
|
||||
想起密码？<span class="register-link-text" @click="$router.push('/login')">立即登录</span>
|
||||
</p>
|
||||
<p class="copyright">
|
||||
Copyright ©红色思政智能体平台
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, onUnmounted } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { ElMessage, type FormInstance, type FormRules } from 'element-plus';
|
||||
import { authApi } from '@/apis/system/auth';
|
||||
|
||||
// 响应式引用
|
||||
const forgotFormRef = ref<FormInstance>();
|
||||
const resetLoading = ref(false);
|
||||
const smsCountdown = ref(0);
|
||||
const emailCountdown = ref(0);
|
||||
let smsTimer: number | null = null;
|
||||
let emailTimer: number | null = null;
|
||||
|
||||
// Composition API
|
||||
const router = useRouter();
|
||||
|
||||
// 重置方式：phone-手机号，email-邮箱
|
||||
const resetType = ref<'phone' | 'email'>('phone');
|
||||
|
||||
// 表单数据
|
||||
const forgotForm = reactive({
|
||||
phone: '',
|
||||
email: '',
|
||||
smsCode: '',
|
||||
emailCode: '',
|
||||
newPassword: '',
|
||||
confirmPassword: '',
|
||||
smsSessionId: '',
|
||||
emailSessionId: ''
|
||||
});
|
||||
|
||||
// 切换重置方式
|
||||
const switchResetType = (type: 'phone' | 'email') => {
|
||||
resetType.value = type;
|
||||
// 清空表单验证
|
||||
forgotFormRef.value?.clearValidate();
|
||||
// 清空相关表单数据
|
||||
if (type === 'phone') {
|
||||
forgotForm.email = '';
|
||||
forgotForm.emailCode = '';
|
||||
forgotForm.emailSessionId = '';
|
||||
} else {
|
||||
forgotForm.phone = '';
|
||||
forgotForm.smsCode = '';
|
||||
forgotForm.smsSessionId = '';
|
||||
}
|
||||
};
|
||||
|
||||
// 自定义验证器
|
||||
const validateNewPassword = (rule: any, value: string, callback: any) => {
|
||||
if (value === '') {
|
||||
callback(new Error('请输入新密码'));
|
||||
} else if (value.length < 6) {
|
||||
callback(new Error('密码至少6个字符'));
|
||||
} else {
|
||||
if (forgotForm.confirmPassword !== '') {
|
||||
forgotFormRef.value?.validateField('confirmPassword');
|
||||
}
|
||||
callback();
|
||||
}
|
||||
};
|
||||
|
||||
const validateConfirmPassword = (rule: any, value: string, callback: any) => {
|
||||
if (value === '') {
|
||||
callback(new Error('请再次输入新密码'));
|
||||
} else if (value !== forgotForm.newPassword) {
|
||||
callback(new Error('两次输入的密码不一致'));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
|
||||
// 表单验证规则
|
||||
const forgotRules: FormRules = {
|
||||
phone: [
|
||||
{
|
||||
validator: (rule: any, value: string, callback: any) => {
|
||||
if (resetType.value === 'phone') {
|
||||
if (value === '') {
|
||||
callback(new Error('请输入手机号'));
|
||||
} else if (!/^1[3-9]\d{9}$/.test(value)) {
|
||||
callback(new Error('请输入正确的手机号'));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
},
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
email: [
|
||||
{
|
||||
validator: (rule: any, value: string, callback: any) => {
|
||||
if (resetType.value === 'email') {
|
||||
if (value === '') {
|
||||
callback(new Error('请输入邮箱'));
|
||||
} else if (!/^[A-Za-z0-9+_.-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}$/.test(value)) {
|
||||
callback(new Error('请输入正确的邮箱地址'));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
},
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
smsCode: [
|
||||
{
|
||||
validator: (rule: any, value: string, callback: any) => {
|
||||
if (resetType.value === 'phone') {
|
||||
if (value === '') {
|
||||
callback(new Error('请输入手机验证码'));
|
||||
} else if (value.length !== 6) {
|
||||
callback(new Error('验证码为6位'));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
},
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
emailCode: [
|
||||
{
|
||||
validator: (rule: any, value: string, callback: any) => {
|
||||
if (resetType.value === 'email') {
|
||||
if (value === '') {
|
||||
callback(new Error('请输入邮箱验证码'));
|
||||
} else if (value.length !== 6) {
|
||||
callback(new Error('验证码为6位'));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
},
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
newPassword: [
|
||||
{ required: true, validator: validateNewPassword, trigger: 'blur' }
|
||||
],
|
||||
confirmPassword: [
|
||||
{ required: true, validator: validateConfirmPassword, trigger: 'blur' }
|
||||
]
|
||||
};
|
||||
|
||||
// 发送手机验证码
|
||||
const handleSendSmsCode = async () => {
|
||||
// 先验证手机号
|
||||
try {
|
||||
await forgotFormRef.value?.validateField('phone');
|
||||
} catch (error) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const result = await authApi.sendSmsCode(forgotForm.phone);
|
||||
if (result.code === 200 && result.data) {
|
||||
// 保存sessionId
|
||||
forgotForm.smsSessionId = result.data.sessionId;
|
||||
ElMessage.success(result.data.message || '验证码已发送');
|
||||
|
||||
// 开始倒计时
|
||||
smsCountdown.value = 60;
|
||||
smsTimer = window.setInterval(() => {
|
||||
smsCountdown.value--;
|
||||
if (smsCountdown.value <= 0 && smsTimer) {
|
||||
clearInterval(smsTimer);
|
||||
smsTimer = null;
|
||||
}
|
||||
}, 1000);
|
||||
} else {
|
||||
ElMessage.error(result.message || '发送验证码失败');
|
||||
}
|
||||
} catch (error: any) {
|
||||
console.error('发送验证码失败:', error);
|
||||
ElMessage.error(error.message || '发送验证码失败');
|
||||
}
|
||||
};
|
||||
|
||||
// 发送邮箱验证码
|
||||
const handleSendEmailCode = async () => {
|
||||
// 先验证邮箱
|
||||
try {
|
||||
await forgotFormRef.value?.validateField('email');
|
||||
} catch (error) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const result = await authApi.sendEmailCode(forgotForm.email);
|
||||
if (result.code === 200 && result.data) {
|
||||
// 保存sessionId
|
||||
forgotForm.emailSessionId = result.data.sessionId;
|
||||
ElMessage.success(result.data.message || '验证码已发送到邮箱');
|
||||
|
||||
// 开始倒计时
|
||||
emailCountdown.value = 60;
|
||||
emailTimer = window.setInterval(() => {
|
||||
emailCountdown.value--;
|
||||
if (emailCountdown.value <= 0 && emailTimer) {
|
||||
clearInterval(emailTimer);
|
||||
emailTimer = null;
|
||||
}
|
||||
}, 1000);
|
||||
} else {
|
||||
ElMessage.error(result.message || '发送验证码失败');
|
||||
}
|
||||
} catch (error: any) {
|
||||
console.error('发送验证码失败:', error);
|
||||
ElMessage.error(error.message || '发送验证码失败');
|
||||
}
|
||||
};
|
||||
|
||||
// 重置密码处理
|
||||
const handleResetPassword = async () => {
|
||||
if (!forgotFormRef.value) return;
|
||||
|
||||
try {
|
||||
const valid = await forgotFormRef.value.validate();
|
||||
if (!valid) return;
|
||||
|
||||
resetLoading.value = true;
|
||||
|
||||
// 调用重置密码API (暂时模拟成功响应)
|
||||
// TODO: 实现后端resetPassword API
|
||||
const result = { code: 200, message: '密码重置成功！请用新密码登录' };
|
||||
|
||||
if (result.code === 200) {
|
||||
ElMessage.success('密码重置成功！请用新密码登录');
|
||||
|
||||
// 密码重置成功后跳转到登录页
|
||||
setTimeout(() => {
|
||||
router.push('/login');
|
||||
}, 1500);
|
||||
} else {
|
||||
ElMessage.error(result.message || '密码重置失败，请重试');
|
||||
}
|
||||
|
||||
} catch (error: any) {
|
||||
console.error('密码重置失败:', error);
|
||||
ElMessage.error(error.message || '密码重置失败，请重试');
|
||||
} finally {
|
||||
resetLoading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 组件卸载时清除定时器
|
||||
onUnmounted(() => {
|
||||
if (smsTimer) {
|
||||
clearInterval(smsTimer);
|
||||
}
|
||||
if (emailTimer) {
|
||||
clearInterval(emailTimer);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
// 移动端忘记密码页面样式
|
||||
.login-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
background: #FFFFFF;
|
||||
margin: 0 auto;
|
||||
box-shadow: 0px 4px 30px 0px rgba(176, 196, 225, 0.25);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.login-left {
|
||||
height: 30%;
|
||||
display: flex;
|
||||
padding: 30px 44px;
|
||||
background: url(@/assets/imgs/login-bg.png);
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
.left-content {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.quote-text {
|
||||
color: #FFF2D3;
|
||||
|
||||
.quote-mark {
|
||||
font-family: 'Arial Black', sans-serif;
|
||||
font-weight: 900;
|
||||
font-size: 38.9px;
|
||||
line-height: 0.74;
|
||||
display: block;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.quote-content {
|
||||
p {
|
||||
font-family: 'Source Han Sans SC', sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 28px;
|
||||
line-height: 1.42;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.login-right {
|
||||
flex: 1;
|
||||
height: 70%;
|
||||
background: #FFFFFF;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 30px 44px;
|
||||
position: relative;
|
||||
border-radius: 20px 20px 0 0;
|
||||
margin-top: -20px;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.login-form-container {
|
||||
width: 100%;
|
||||
max-width: 287px;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
padding-top: 30px;
|
||||
}
|
||||
|
||||
.login-header {
|
||||
margin-bottom: 32px;
|
||||
|
||||
.logo-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 11px;
|
||||
justify-content: center;
|
||||
|
||||
.logo {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
background: #C62828;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 3px;
|
||||
|
||||
img {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.platform-title {
|
||||
font-family: 'Taipei Sans TC Beta', sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 20px;
|
||||
line-height: 1.31;
|
||||
color: #141F38;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.reset-type-tabs {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-bottom: 24px;
|
||||
|
||||
.tab-item {
|
||||
flex: 1;
|
||||
padding: 12px 16px;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
background: #F2F3F5;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:hover {
|
||||
background: #E8E8E8;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: #FFFFFF;
|
||||
background: #C62828;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.forgot-form {
|
||||
width: 100%;
|
||||
|
||||
.form-title {
|
||||
font-family: "Source Han Sans SC";
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
color: #141F38;
|
||||
margin: 0 0 24px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
background: #F2F3F5;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
font-size: 14px;
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
|
||||
:deep(.el-input__wrapper) {
|
||||
background: #F2F3F5;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
padding: 0 16px;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
:deep(.el-input__inner) {
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
|
||||
&::placeholder {
|
||||
color: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-input__wrapper:focus),
|
||||
:deep(.el-input__wrapper.is-focus) {
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #C62828;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.captcha-input-container {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
|
||||
.captcha-input {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.send-captcha-btn {
|
||||
height: 48px;
|
||||
padding: 0 12px;
|
||||
background: #C62828;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
color: #FFFFFF;
|
||||
font-size: 12px;
|
||||
white-space: nowrap;
|
||||
min-width: 90px;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background: #B71C1C;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
background: #D9D9D9;
|
||||
color: rgba(0, 0, 0, 0.25);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.reset-button {
|
||||
width: 100%;
|
||||
height: 46px;
|
||||
background: #C62828;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
color: #FFFFFF;
|
||||
font-family: "Source Han Sans SC";
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
line-height: 1.4;
|
||||
margin-bottom: 16px;
|
||||
|
||||
&:hover {
|
||||
background: #B71C1C;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.login-footer {
|
||||
width: 100%;
|
||||
max-width: 287px;
|
||||
margin-top: auto;
|
||||
padding-bottom: 24px;
|
||||
|
||||
.register-link {
|
||||
font-family: "Source Han Sans SC";
|
||||
font-weight: 600;
|
||||
font-size: 12px;
|
||||
line-height: 1.83;
|
||||
color: #141F38;
|
||||
text-align: center;
|
||||
margin: 0 0 16px 0;
|
||||
|
||||
.register-link-text {
|
||||
cursor: pointer;
|
||||
color: #ff0000;
|
||||
|
||||
&:hover {
|
||||
color: #C62828;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.copyright {
|
||||
font-family: "Source Han Sans SC";
|
||||
font-size: 12px;
|
||||
line-height: 2;
|
||||
color: #D9D9D9;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
// Element Plus 组件样式覆盖
|
||||
:deep(.el-form-item) {
|
||||
margin-bottom: 16px;
|
||||
|
||||
.el-form-item__content {
|
||||
line-height: normal;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-form-item__error) {
|
||||
font-size: 12px;
|
||||
color: #F56C6C;
|
||||
padding-top: 4px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,25 +1,153 @@
|
||||
<template>
|
||||
<div class="forgot-password-container">
|
||||
<div class="forgot-password-box">
|
||||
<div class="forgot-password-header">
|
||||
<div class="logo">
|
||||
<img src="@/assets/logo.png" alt="Logo" />
|
||||
</div>
|
||||
<h1 class="title">找回密码</h1>
|
||||
<p class="subtitle">重置您的账户密码</p>
|
||||
</div>
|
||||
|
||||
<div class="forgot-password-form">
|
||||
<!-- 找回密码表单内容 -->
|
||||
<div class="form-placeholder">
|
||||
<p>找回密码功能开发中...</p>
|
||||
<!-- 左侧励志区域 -->
|
||||
<div class="forgot-password-left">
|
||||
<div class="left-content">
|
||||
<div class="quote-text">
|
||||
<span class="quote-mark">"</span>
|
||||
<div class="quote-content">
|
||||
<p>不负时代韶华，</p>
|
||||
<p>争做时代新人。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 右侧忘记密码表单区域 -->
|
||||
<div class="forgot-password-right">
|
||||
<div class="forgot-password-form-container">
|
||||
<!-- Logo和标题区域 -->
|
||||
<div class="forgot-password-header">
|
||||
<div class="logo-section">
|
||||
<div class="logo">
|
||||
<img src="@/assets/imgs/logo-icon.svg" alt="Logo" />
|
||||
</div>
|
||||
<h1 class="platform-title">红色思政学习平台</h1>
|
||||
</div>
|
||||
<h2 class="forgot-password-title">找回密码</h2>
|
||||
</div>
|
||||
|
||||
<!-- 重置密码方式切换 -->
|
||||
<div class="reset-type-tabs">
|
||||
<div
|
||||
:class="['tab-item', { active: resetType === 'phone' }]"
|
||||
@click="switchResetType('phone')"
|
||||
>
|
||||
手机号重置
|
||||
</div>
|
||||
<div
|
||||
:class="['tab-item', { active: resetType === 'email' }]"
|
||||
@click="switchResetType('email')"
|
||||
>
|
||||
邮箱重置
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 忘记密码表单 -->
|
||||
<el-form
|
||||
ref="forgotFormRef"
|
||||
:model="forgotForm"
|
||||
:rules="forgotRules"
|
||||
class="forgot-password-form"
|
||||
@submit.prevent="handleResetPassword"
|
||||
>
|
||||
<!-- 手机号重置 -->
|
||||
<template v-if="resetType === 'phone'">
|
||||
<el-form-item prop="phone">
|
||||
<el-input
|
||||
v-model="forgotForm.phone"
|
||||
placeholder="请输入手机号"
|
||||
class="form-input"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="smsCode">
|
||||
<div class="code-input-wrapper">
|
||||
<el-input
|
||||
v-model="forgotForm.smsCode"
|
||||
placeholder="请输入手机验证码"
|
||||
class="form-input code-input"
|
||||
/>
|
||||
<el-button
|
||||
:disabled="smsCountdown > 0"
|
||||
@click="handleSendSmsCode"
|
||||
class="code-button"
|
||||
>
|
||||
{{ smsCountdown > 0 ? `${smsCountdown}s` : '获取验证码' }}
|
||||
</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<!-- 邮箱重置 -->
|
||||
<template v-else>
|
||||
<el-form-item prop="email">
|
||||
<el-input
|
||||
v-model="forgotForm.email"
|
||||
placeholder="请输入邮箱"
|
||||
class="form-input"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="emailCode">
|
||||
<div class="code-input-wrapper">
|
||||
<el-input
|
||||
v-model="forgotForm.emailCode"
|
||||
placeholder="请输入邮箱验证码"
|
||||
class="form-input code-input"
|
||||
/>
|
||||
<el-button
|
||||
:disabled="emailCountdown > 0"
|
||||
@click="handleSendEmailCode"
|
||||
class="code-button"
|
||||
>
|
||||
{{ emailCountdown > 0 ? `${emailCountdown}s` : '获取验证码' }}
|
||||
</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<!-- 新密码 -->
|
||||
<el-form-item prop="newPassword">
|
||||
<el-input
|
||||
v-model="forgotForm.newPassword"
|
||||
type="password"
|
||||
placeholder="请输入新密码（至少6个字符）"
|
||||
show-password
|
||||
class="form-input"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="confirmPassword">
|
||||
<el-input
|
||||
v-model="forgotForm.confirmPassword"
|
||||
type="password"
|
||||
placeholder="请再次输入新密码"
|
||||
show-password
|
||||
class="form-input"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button
|
||||
type="primary"
|
||||
:loading="resetLoading"
|
||||
@click="handleResetPassword"
|
||||
class="reset-button"
|
||||
>
|
||||
重置密码
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
</div>
|
||||
<!-- 底部信息 -->
|
||||
<div class="forgot-password-footer">
|
||||
<p>
|
||||
想起密码了？
|
||||
<el-link type="primary" @click="goToLogin">返回登录</el-link>
|
||||
<p class="login-link">
|
||||
想起密码了？<span class="login-link-text" @click="goToLogin">返回登录</span>
|
||||
</p>
|
||||
<p class="copyright">
|
||||
Copyright ©红色思政智能体平台
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -27,23 +155,544 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { ElMessage, type FormInstance, type FormRules } from 'element-plus';
|
||||
import { authApi } from '@/apis/system/auth';
|
||||
|
||||
// 响应式引用
|
||||
const forgotFormRef = ref<FormInstance>();
|
||||
const resetLoading = ref(false);
|
||||
const smsCountdown = ref(0);
|
||||
const emailCountdown = ref(0);
|
||||
let smsTimer: number | null = null;
|
||||
let emailTimer: number | null = null;
|
||||
|
||||
// Composition API
|
||||
const router = useRouter();
|
||||
|
||||
// 重置方式：phone-手机号，email-邮箱
|
||||
const resetType = ref<'phone' | 'email'>('phone');
|
||||
|
||||
// 表单数据
|
||||
const forgotForm = reactive({
|
||||
phone: '',
|
||||
email: '',
|
||||
smsCode: '',
|
||||
emailCode: '',
|
||||
newPassword: '',
|
||||
confirmPassword: '',
|
||||
smsSessionId: '',
|
||||
emailSessionId: ''
|
||||
});
|
||||
|
||||
// 切换重置方式
|
||||
const switchResetType = (type: 'phone' | 'email') => {
|
||||
resetType.value = type;
|
||||
// 清空表单验证
|
||||
forgotFormRef.value?.clearValidate();
|
||||
// 清空相关表单数据
|
||||
if (type === 'phone') {
|
||||
forgotForm.email = '';
|
||||
forgotForm.emailCode = '';
|
||||
forgotForm.emailSessionId = '';
|
||||
} else {
|
||||
forgotForm.phone = '';
|
||||
forgotForm.smsCode = '';
|
||||
forgotForm.smsSessionId = '';
|
||||
}
|
||||
};
|
||||
|
||||
// 自定义验证器
|
||||
const validateNewPassword = (rule: any, value: string, callback: any) => {
|
||||
if (value === '') {
|
||||
callback(new Error('请输入新密码'));
|
||||
} else if (value.length < 6) {
|
||||
callback(new Error('密码至少6个字符'));
|
||||
} else {
|
||||
if (forgotForm.confirmPassword !== '') {
|
||||
forgotFormRef.value?.validateField('confirmPassword');
|
||||
}
|
||||
callback();
|
||||
}
|
||||
};
|
||||
|
||||
const validateConfirmPassword = (rule: any, value: string, callback: any) => {
|
||||
if (value === '') {
|
||||
callback(new Error('请再次输入新密码'));
|
||||
} else if (value !== forgotForm.newPassword) {
|
||||
callback(new Error('两次输入的密码不一致'));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
|
||||
// 表单验证规则
|
||||
const forgotRules: FormRules = {
|
||||
phone: [
|
||||
{
|
||||
validator: (rule: any, value: string, callback: any) => {
|
||||
if (resetType.value === 'phone') {
|
||||
if (value === '') {
|
||||
callback(new Error('请输入手机号'));
|
||||
} else if (!/^1[3-9]\d{9}$/.test(value)) {
|
||||
callback(new Error('请输入正确的手机号'));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
},
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
email: [
|
||||
{
|
||||
validator: (rule: any, value: string, callback: any) => {
|
||||
if (resetType.value === 'email') {
|
||||
if (value === '') {
|
||||
callback(new Error('请输入邮箱'));
|
||||
} else if (!/^[A-Za-z0-9+_.-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}$/.test(value)) {
|
||||
callback(new Error('请输入正确的邮箱地址'));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
},
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
smsCode: [
|
||||
{
|
||||
validator: (rule: any, value: string, callback: any) => {
|
||||
if (resetType.value === 'phone') {
|
||||
if (value === '') {
|
||||
callback(new Error('请输入手机验证码'));
|
||||
} else if (value.length !== 6) {
|
||||
callback(new Error('验证码为6位'));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
},
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
emailCode: [
|
||||
{
|
||||
validator: (rule: any, value: string, callback: any) => {
|
||||
if (resetType.value === 'email') {
|
||||
if (value === '') {
|
||||
callback(new Error('请输入邮箱验证码'));
|
||||
} else if (value.length !== 6) {
|
||||
callback(new Error('验证码为6位'));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
},
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
newPassword: [
|
||||
{ required: true, validator: validateNewPassword, trigger: 'blur' }
|
||||
],
|
||||
confirmPassword: [
|
||||
{ required: true, validator: validateConfirmPassword, trigger: 'blur' }
|
||||
]
|
||||
};
|
||||
|
||||
// 发送手机验证码
|
||||
const handleSendSmsCode = async () => {
|
||||
// 先验证手机号
|
||||
try {
|
||||
await forgotFormRef.value?.validateField('phone');
|
||||
} catch (error) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const result = await authApi.sendSmsCode(forgotForm.phone);
|
||||
if (result.code === 200 && result.data) {
|
||||
// 保存sessionId
|
||||
forgotForm.smsSessionId = result.data.sessionId;
|
||||
ElMessage.success(result.data.message || '验证码已发送');
|
||||
|
||||
// 开始倒计时
|
||||
smsCountdown.value = 60;
|
||||
smsTimer = window.setInterval(() => {
|
||||
smsCountdown.value--;
|
||||
if (smsCountdown.value <= 0 && smsTimer) {
|
||||
clearInterval(smsTimer);
|
||||
smsTimer = null;
|
||||
}
|
||||
}, 1000);
|
||||
} else {
|
||||
ElMessage.error(result.message || '发送验证码失败');
|
||||
}
|
||||
} catch (error: any) {
|
||||
console.error('发送验证码失败:', error);
|
||||
ElMessage.error(error.message || '发送验证码失败');
|
||||
}
|
||||
};
|
||||
|
||||
// 发送邮箱验证码
|
||||
const handleSendEmailCode = async () => {
|
||||
// 先验证邮箱
|
||||
try {
|
||||
await forgotFormRef.value?.validateField('email');
|
||||
} catch (error) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const result = await authApi.sendEmailCode(forgotForm.email);
|
||||
if (result.code === 200 && result.data) {
|
||||
// 保存sessionId
|
||||
forgotForm.emailSessionId = result.data.sessionId;
|
||||
ElMessage.success(result.data.message || '验证码已发送到邮箱');
|
||||
|
||||
// 开始倒计时
|
||||
emailCountdown.value = 60;
|
||||
emailTimer = window.setInterval(() => {
|
||||
emailCountdown.value--;
|
||||
if (emailCountdown.value <= 0 && emailTimer) {
|
||||
clearInterval(emailTimer);
|
||||
emailTimer = null;
|
||||
}
|
||||
}, 1000);
|
||||
} else {
|
||||
ElMessage.error(result.message || '发送验证码失败');
|
||||
}
|
||||
} catch (error: any) {
|
||||
console.error('发送验证码失败:', error);
|
||||
ElMessage.error(error.message || '发送验证码失败');
|
||||
}
|
||||
};
|
||||
|
||||
// 重置密码处理
|
||||
const handleResetPassword = async () => {
|
||||
if (!forgotFormRef.value) return;
|
||||
|
||||
try {
|
||||
const valid = await forgotFormRef.value.validate();
|
||||
if (!valid) return;
|
||||
|
||||
resetLoading.value = true;
|
||||
|
||||
// 调用重置密码API (暂时模拟成功响应，需要后端实现具体API)
|
||||
// TODO: 实现后端resetPassword API
|
||||
const result = { code: 200, message: '密码重置成功！请用新密码登录' };
|
||||
|
||||
// 实际的API调用应该是:
|
||||
// const resetData = {
|
||||
// newPassword: forgotForm.newPassword,
|
||||
// ...(resetType.value === 'phone'
|
||||
// ? {
|
||||
// phone: forgotForm.phone,
|
||||
// smsCode: forgotForm.smsCode,
|
||||
// smsSessionId: forgotForm.smsSessionId
|
||||
// }
|
||||
// : {
|
||||
// email: forgotForm.email,
|
||||
// emailCode: forgotForm.emailCode,
|
||||
// emailSessionId: forgotForm.emailSessionId
|
||||
// })
|
||||
// };
|
||||
// const result = await authApi.resetPassword(resetData);
|
||||
|
||||
if (result.code === 200) {
|
||||
ElMessage.success('密码重置成功！请用新密码登录');
|
||||
|
||||
// 密码重置成功后跳转到登录页
|
||||
setTimeout(() => {
|
||||
router.push('/login');
|
||||
}, 1500);
|
||||
} else {
|
||||
ElMessage.error(result.message || '密码重置失败，请重试');
|
||||
}
|
||||
|
||||
} catch (error: any) {
|
||||
console.error('密码重置失败:', error);
|
||||
ElMessage.error(error.message || '密码重置失败，请重试');
|
||||
} finally {
|
||||
resetLoading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
function goToLogin() {
|
||||
router.push('/login');
|
||||
}
|
||||
|
||||
// 组件卸载时清除定时器
|
||||
import { onUnmounted } from 'vue';
|
||||
onUnmounted(() => {
|
||||
if (smsTimer) {
|
||||
clearInterval(smsTimer);
|
||||
}
|
||||
if (emailTimer) {
|
||||
clearInterval(emailTimer);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.forgot-password-container {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
max-width: 1142px;
|
||||
margin: auto auto;
|
||||
box-shadow: 0px 4px 30px 0px rgba(176, 196, 225, 0.5);
|
||||
border-radius: 30px;
|
||||
overflow: hidden;
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
padding: 20px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.forgot-password-left {
|
||||
height: 100%;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
padding: 113px 120px;
|
||||
border-radius: 30px 0 0 30px;
|
||||
overflow: hidden;
|
||||
background: url(@/assets/imgs/login-bg.png);
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
.left-content {
|
||||
width: 100%;
|
||||
max-width: 350px;
|
||||
}
|
||||
|
||||
.quote-text {
|
||||
color: #FFF2D3;
|
||||
|
||||
.quote-mark {
|
||||
font-family: 'Arial Black', sans-serif;
|
||||
font-weight: 900;
|
||||
font-size: 71.096px;
|
||||
line-height: 0.74;
|
||||
display: block;
|
||||
margin-left: 1.48px;
|
||||
}
|
||||
|
||||
.quote-content {
|
||||
margin-top: 46.66px;
|
||||
|
||||
p {
|
||||
font-family: 'Source Han Sans SC', sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 50px;
|
||||
line-height: 1.42;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.forgot-password-right {
|
||||
flex: 1;
|
||||
background: #FFFFFF;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
border-radius: 0 30px 30px 0;
|
||||
padding: 40px 0;
|
||||
}
|
||||
|
||||
.forgot-password-form-container {
|
||||
width: 287px;
|
||||
padding: 0;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.forgot-password-header {
|
||||
margin-bottom: 24px;
|
||||
|
||||
.logo-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 11px;
|
||||
margin-bottom: 16px;
|
||||
|
||||
.logo {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
background: #C62828;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 3px;
|
||||
|
||||
img {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.platform-title {
|
||||
font-family: 'Taipei Sans TC Beta', sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 26px;
|
||||
line-height: 1.31;
|
||||
color: #141F38;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.forgot-password-title {
|
||||
font-family: "Source Han Sans SC";
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
color: #141F38;
|
||||
margin: 0 0 16px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.reset-type-tabs {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-bottom: 16px;
|
||||
|
||||
.tab-item {
|
||||
flex: 1;
|
||||
padding: 8px 12px;
|
||||
text-align: center;
|
||||
background: #F2F3F5;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:hover {
|
||||
background: #E8E9EB;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: #C62828;
|
||||
color: #FFFFFF;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.forgot-password-form {
|
||||
.form-input {
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
background: #F2F3F5;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
font-size: 14px;
|
||||
color: rgba(0, 0, 0, 0.3);
|
||||
|
||||
&::placeholder {
|
||||
color: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #C62828;
|
||||
}
|
||||
}
|
||||
|
||||
.code-input-wrapper {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
|
||||
.code-input {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.code-button {
|
||||
height: 48px;
|
||||
padding: 0 16px;
|
||||
background: #C62828;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
color: #FFFFFF;
|
||||
font-size: 12px;
|
||||
white-space: nowrap;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background: #B71C1C;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
background: #D9D9D9;
|
||||
color: rgba(0, 0, 0, 0.3);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.reset-button {
|
||||
width: 100%;
|
||||
height: 46px;
|
||||
background: #C62828;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
color: #FFFFFF;
|
||||
font-family: "Source Han Sans SC";
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
line-height: 1.4;
|
||||
margin-bottom: 8px;
|
||||
|
||||
&:hover {
|
||||
background: #B71C1C;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.forgot-password-footer {
|
||||
width: 100%;
|
||||
|
||||
.login-link {
|
||||
font-family: "Source Han Sans SC";
|
||||
font-weight: 600;
|
||||
font-size: 12px;
|
||||
line-height: 1.83;
|
||||
color: #141F38;
|
||||
text-align: center;
|
||||
margin: 0 0 16px 0;
|
||||
|
||||
.login-link-text {
|
||||
cursor: pointer;
|
||||
color: #ff0000;
|
||||
&:hover {
|
||||
color: #C62828;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.copyright {
|
||||
font-family: "Source Han Sans SC";
|
||||
font-size: 12px;
|
||||
line-height: 2;
|
||||
color: #D9D9D9;
|
||||
text-align: center;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.forgot-password-box {
|
||||
|
||||
846
schoolNewsWeb/src/views/public/login/Login.mobile.vue
Normal file
846
schoolNewsWeb/src/views/public/login/Login.mobile.vue
Normal file
@@ -0,0 +1,846 @@
|
||||
<template>
|
||||
<div class="login-container">
|
||||
<!-- 左侧励志区域 -->
|
||||
<div class="login-left">
|
||||
<div class="left-content">
|
||||
<div class="quote-text">
|
||||
<span class="quote-mark">“</span>
|
||||
<div class="quote-content">
|
||||
<p>不负时代韶华，</p>
|
||||
<p>争做时代新人。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 右侧登录表单区域 -->
|
||||
<div class="login-right">
|
||||
<div class="login-form-container">
|
||||
<!-- Logo和标题区域 -->
|
||||
<div class="login-header">
|
||||
<div class="logo-section">
|
||||
<div class="logo">
|
||||
<img src="@/assets/imgs/logo-icon.svg" alt="Logo" />
|
||||
</div>
|
||||
<h1 class="platform-title">红色思政学习平台</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 登录方式切换 -->
|
||||
<div class="login-mode-tabs">
|
||||
<div
|
||||
:class="['tab-item', { active: loginMode === 'password' }]"
|
||||
@click="switchLoginMode('password')"
|
||||
>
|
||||
密码登录
|
||||
</div>
|
||||
<div
|
||||
:class="['tab-item', { active: loginMode === 'captcha' }]"
|
||||
@click="switchLoginMode('captcha')"
|
||||
>
|
||||
验证码登录
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 登录表单 -->
|
||||
<el-form
|
||||
ref="loginFormRef"
|
||||
:model="loginForm"
|
||||
:rules="loginRules"
|
||||
class="login-form"
|
||||
@submit.prevent="handleLogin"
|
||||
>
|
||||
<!-- 密码登录模式 -->
|
||||
<template v-if="loginMode === 'password'">
|
||||
<el-form-item prop="username">
|
||||
<el-input
|
||||
v-model="loginForm.username"
|
||||
placeholder="请输入学号、手机号、邮箱"
|
||||
class="form-input"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="password">
|
||||
<el-input
|
||||
v-model="loginForm.password"
|
||||
type="password"
|
||||
placeholder="请输入密码"
|
||||
show-password
|
||||
class="form-input"
|
||||
/>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<!-- 验证码登录模式 -->
|
||||
<template v-else>
|
||||
<!-- 登录方式选择 -->
|
||||
<div class="captcha-type-tabs">
|
||||
<div
|
||||
:class="['captcha-tab-item', { active: captchaType === 'phone' }]"
|
||||
@click="switchCaptchaType('phone')"
|
||||
>
|
||||
手机号
|
||||
</div>
|
||||
<div
|
||||
:class="['captcha-tab-item', { active: captchaType === 'email' }]"
|
||||
@click="switchCaptchaType('email')"
|
||||
>
|
||||
邮箱
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 手机号验证码登录 -->
|
||||
<template v-if="captchaType === 'phone'">
|
||||
<el-form-item prop="phone">
|
||||
<el-input
|
||||
v-model="loginForm.phone"
|
||||
placeholder="请输入手机号"
|
||||
class="form-input"
|
||||
maxlength="11"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="captcha">
|
||||
<div class="captcha-input-container">
|
||||
<el-input
|
||||
v-model="loginForm.captcha"
|
||||
placeholder="请输入验证码"
|
||||
class="form-input captcha-input"
|
||||
maxlength="6"
|
||||
/>
|
||||
<el-button
|
||||
class="send-captcha-btn"
|
||||
:disabled="smsCountdown > 0"
|
||||
@click="handleSendSmsCode"
|
||||
>
|
||||
{{ smsCountdown > 0 ? `${smsCountdown}秒后重试` : '获取验证码' }}
|
||||
</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<!-- 邮箱验证码登录 -->
|
||||
<template v-else>
|
||||
<el-form-item prop="email">
|
||||
<el-input
|
||||
v-model="loginForm.email"
|
||||
placeholder="请输入邮箱"
|
||||
class="form-input"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="captcha">
|
||||
<div class="captcha-input-container">
|
||||
<el-input
|
||||
v-model="loginForm.captcha"
|
||||
placeholder="请输入验证码"
|
||||
class="form-input captcha-input"
|
||||
maxlength="6"
|
||||
/>
|
||||
<el-button
|
||||
class="send-captcha-btn"
|
||||
:disabled="emailCountdown > 0"
|
||||
@click="handleSendEmailCode"
|
||||
>
|
||||
{{ emailCountdown > 0 ? `${emailCountdown}秒后重试` : '获取验证码' }}
|
||||
</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<el-form-item>
|
||||
<div class="login-options">
|
||||
<div class="remember-me">
|
||||
<el-checkbox v-model="loginForm.rememberMe">
|
||||
自动登录
|
||||
</el-checkbox>
|
||||
</div>
|
||||
<el-link type="primary" @click="goToForgotPassword" class="forgot-password">
|
||||
忘记密码？
|
||||
</el-link>
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button
|
||||
type="primary"
|
||||
:loading="loginLoading"
|
||||
@click="handleLogin"
|
||||
@keydown.enter="handleLogin"
|
||||
class="login-button"
|
||||
>
|
||||
登录
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="agree">
|
||||
<p class="agreement-text">
|
||||
<el-checkbox v-model="loginForm.agree">登录即为同意<span class="agreement-link" style="color: red">《红色思政智能体平台》</span></el-checkbox>
|
||||
</p>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
</div>
|
||||
<!-- 底部信息 -->
|
||||
<div class="login-footer">
|
||||
<p class="register-link">
|
||||
没有账号？<span class="register-link-text" @click="goToRegister">现在就注册</span>
|
||||
</p>
|
||||
<p class="copyright">
|
||||
Copyright ©红色思政智能体平台
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted, computed } from 'vue';
|
||||
import { useRouter, useRoute } from 'vue-router';
|
||||
import { useStore } from 'vuex';
|
||||
import { ElMessage, type FormInstance, type FormRules } from 'element-plus';
|
||||
import type { LoginParam } from '@/types';
|
||||
import { LoginType } from '@/types/enums';
|
||||
import { authApi } from '@/apis/system/auth';
|
||||
|
||||
// 响应式引用
|
||||
const loginFormRef = ref<FormInstance>();
|
||||
const loginLoading = ref(false);
|
||||
const showCaptcha = ref(false);
|
||||
const captchaImage = ref('');
|
||||
|
||||
// 登录模式：password-密码登录，captcha-验证码登录
|
||||
const loginMode = ref<'password' | 'captcha'>('password');
|
||||
// 验证码类型：phone-手机号，email-邮箱
|
||||
const captchaType = ref<'phone' | 'email'>('phone');
|
||||
|
||||
// 倒计时
|
||||
const smsCountdown = ref(0);
|
||||
const emailCountdown = ref(0);
|
||||
|
||||
// Composition API
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
const store = useStore();
|
||||
|
||||
// 表单数据
|
||||
const loginForm = reactive<LoginParam>({
|
||||
loginType: undefined,
|
||||
username: '',
|
||||
phone: '',
|
||||
email: '',
|
||||
password: '',
|
||||
captcha: '',
|
||||
captchaId: '',
|
||||
rememberMe: false,
|
||||
agree: true
|
||||
});
|
||||
|
||||
// 计算属性：登录模式标题
|
||||
const loginModeTitle = computed(() => {
|
||||
return loginMode.value === 'password' ? '密码登录' : '验证码登录';
|
||||
});
|
||||
|
||||
// 表单验证规则
|
||||
const loginRules: FormRules = {
|
||||
username: [
|
||||
{
|
||||
required: loginMode.value === 'password',
|
||||
message: '请输入用户名、手机号或邮箱',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
phone: [
|
||||
{
|
||||
required: loginMode.value === 'captcha' && captchaType.value === 'phone',
|
||||
message: '请输入手机号',
|
||||
trigger: 'blur'
|
||||
},
|
||||
{
|
||||
pattern: /^1[3-9]\d{9}$/,
|
||||
message: '请输入正确的手机号',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
email: [
|
||||
{
|
||||
required: loginMode.value === 'captcha' && captchaType.value === 'email',
|
||||
message: '请输入邮箱',
|
||||
trigger: 'blur'
|
||||
},
|
||||
{
|
||||
type: 'email',
|
||||
message: '请输入正确的邮箱格式',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
password: [
|
||||
{
|
||||
required: loginMode.value === 'password',
|
||||
message: '请输入密码',
|
||||
trigger: 'blur'
|
||||
},
|
||||
{
|
||||
min: 6,
|
||||
message: '密码至少6个字符',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
captcha: [
|
||||
{
|
||||
required: loginMode.value === 'captcha',
|
||||
message: '请输入验证码',
|
||||
trigger: 'blur'
|
||||
},
|
||||
{
|
||||
len: 6,
|
||||
message: '验证码为6位',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
agree: [
|
||||
{
|
||||
validator: (rule: any, value: boolean, callback: any) => {
|
||||
if (!value) {
|
||||
callback(new Error('请同意《红色思政智能体平台》用户协议'));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
},
|
||||
trigger: 'change'
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
// 切换登录模式
|
||||
const switchLoginMode = (mode: 'password' | 'captcha') => {
|
||||
if (loginMode.value === mode) return;
|
||||
|
||||
loginMode.value = mode;
|
||||
|
||||
// 清空表单数据和验证
|
||||
loginFormRef.value?.clearValidate();
|
||||
loginForm.username = '';
|
||||
loginForm.phone = '';
|
||||
loginForm.email = '';
|
||||
loginForm.password = '';
|
||||
loginForm.captcha = '';
|
||||
loginForm.captchaId = '';
|
||||
};
|
||||
|
||||
// 切换验证码类型
|
||||
const switchCaptchaType = (type: 'phone' | 'email') => {
|
||||
if (captchaType.value === type) return;
|
||||
|
||||
captchaType.value = type;
|
||||
|
||||
// 清空相关表单数据和验证
|
||||
loginFormRef.value?.clearValidate();
|
||||
loginForm.phone = '';
|
||||
loginForm.email = '';
|
||||
loginForm.captcha = '';
|
||||
loginForm.captchaId = '';
|
||||
};
|
||||
|
||||
// 发送短信验证码
|
||||
const handleSendSmsCode = async () => {
|
||||
// 验证手机号
|
||||
if (!loginForm.phone || loginForm.phone.trim() === '') {
|
||||
ElMessage.warning('请输入手机号');
|
||||
return;
|
||||
}
|
||||
|
||||
const phonePattern = /^1[3-9]\d{9}$/;
|
||||
if (!phonePattern.test(loginForm.phone)) {
|
||||
ElMessage.warning('请输入正确的手机号');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const result = await authApi.sendSmsCode(loginForm.phone);
|
||||
if (result.code === 200 && result.data) {
|
||||
// 保存sessionId
|
||||
loginForm.captchaId = result.data.sessionId;
|
||||
ElMessage.success(result.data.message || '验证码已发送');
|
||||
|
||||
// 开始倒计时
|
||||
smsCountdown.value = 60;
|
||||
const timer = setInterval(() => {
|
||||
smsCountdown.value--;
|
||||
if (smsCountdown.value <= 0) {
|
||||
clearInterval(timer);
|
||||
}
|
||||
}, 1000);
|
||||
} else {
|
||||
ElMessage.error(result.message || '发送验证码失败');
|
||||
}
|
||||
} catch (error: any) {
|
||||
console.error('发送验证码失败:', error);
|
||||
ElMessage.error(error.message || '发送验证码失败');
|
||||
}
|
||||
};
|
||||
|
||||
// 发送邮箱验证码
|
||||
const handleSendEmailCode = async () => {
|
||||
// 验证邮箱
|
||||
if (!loginForm.email || loginForm.email.trim() === '') {
|
||||
ElMessage.warning('请输入邮箱');
|
||||
return;
|
||||
}
|
||||
|
||||
const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||
if (!emailPattern.test(loginForm.email)) {
|
||||
ElMessage.warning('请输入正确的邮箱格式');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const result = await authApi.sendEmailCode(loginForm.email);
|
||||
if (result.code === 200 && result.data) {
|
||||
// 保存sessionId
|
||||
loginForm.captchaId = result.data.sessionId;
|
||||
ElMessage.success(result.data.message || '验证码已发送到邮箱');
|
||||
|
||||
// 开始倒计时
|
||||
emailCountdown.value = 60;
|
||||
const timer = setInterval(() => {
|
||||
emailCountdown.value--;
|
||||
if (emailCountdown.value <= 0) {
|
||||
clearInterval(timer);
|
||||
}
|
||||
}, 1000);
|
||||
} else {
|
||||
ElMessage.error(result.message || '发送验证码失败');
|
||||
}
|
||||
} catch (error: any) {
|
||||
console.error('发送验证码失败:', error);
|
||||
ElMessage.error(error.message || '发送验证码失败');
|
||||
}
|
||||
};
|
||||
|
||||
// 方法
|
||||
const handleLogin = async () => {
|
||||
if (!loginFormRef.value) return;
|
||||
|
||||
// 检查是否同意用户协议
|
||||
if (!loginForm.agree) {
|
||||
ElMessage.warning('请先同意《红色思政智能体平台》用户协议');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const valid = await loginFormRef.value.validate();
|
||||
if (!valid) return;
|
||||
|
||||
loginLoading.value = true;
|
||||
|
||||
// 根据登录模式设置loginType
|
||||
if (loginMode.value === 'password') {
|
||||
loginForm.loginType = LoginType.PASSWORD;
|
||||
} else {
|
||||
loginForm.loginType = captchaType.value === 'phone' ? LoginType.PHONE : LoginType.EMAIL;
|
||||
}
|
||||
|
||||
// 调用store中的登录action
|
||||
const result = await store.dispatch('auth/login', loginForm);
|
||||
|
||||
ElMessage.success('登录成功！');
|
||||
|
||||
// 优先使用 query 中的 redirect，其次使用返回的 redirectUrl，最后使用默认首页
|
||||
const redirectPath = (route.query.redirect as string) || result.redirectUrl || '/home';
|
||||
router.push(redirectPath);
|
||||
|
||||
} catch (error: any) {
|
||||
console.error('登录失败:', error);
|
||||
ElMessage.error(error.message || '登录失败，请检查用户名和密码');
|
||||
|
||||
// 登录失败后显示验证码
|
||||
showCaptcha.value = true;
|
||||
// refreshCaptcha();
|
||||
} finally {
|
||||
loginLoading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const refreshCaptcha = async () => {
|
||||
try {
|
||||
const result = await authApi.getCaptcha();
|
||||
if (result.data) {
|
||||
captchaImage.value = result.data.captchaImage;
|
||||
loginForm.captchaId = result.data.captchaId;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取验证码失败:', error);
|
||||
ElMessage.error('获取验证码失败');
|
||||
}
|
||||
};
|
||||
|
||||
function goToRegister() {
|
||||
router.push('/register');
|
||||
}
|
||||
|
||||
function goToForgotPassword() {
|
||||
router.push('/forgot-password');
|
||||
}
|
||||
|
||||
// 组件挂载时检查是否需要显示验证码
|
||||
onMounted(() => {
|
||||
// 可以根据需要决定是否默认显示验证码
|
||||
// refreshCaptcha();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
// 移动端专属样式
|
||||
.login-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
background: #FFFFFF;
|
||||
margin: 0 auto;
|
||||
// max-width: 375px;
|
||||
box-shadow: 0px 4px 30px 0px rgba(176, 196, 225, 0.25);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.login-left {
|
||||
height: 30%;
|
||||
display: flex;
|
||||
padding: 30px 44px;
|
||||
background: url(@/assets/imgs/login-bg.png);
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
.left-content {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.quote-text {
|
||||
color: #FFF2D3;
|
||||
|
||||
.quote-mark {
|
||||
font-family: 'Arial Black', sans-serif;
|
||||
font-weight: 900;
|
||||
font-size: 38.9px;
|
||||
line-height: 0.74;
|
||||
display: block;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.quote-content {
|
||||
p {
|
||||
font-family: 'Source Han Sans SC', sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 28px;
|
||||
line-height: 1.42;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.login-right {
|
||||
flex: 1;
|
||||
height: 70%;
|
||||
background: #FFFFFF;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 30px 44px;
|
||||
position: relative;
|
||||
border-radius: 20px 20px 0 0;
|
||||
margin-top: -20px;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.login-form-container {
|
||||
width: 100%;
|
||||
max-width: 287px;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
padding-top: 30px;
|
||||
}
|
||||
|
||||
.login-header {
|
||||
margin-bottom: 32px;
|
||||
|
||||
.logo-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 11px;
|
||||
justify-content: center;
|
||||
|
||||
.logo {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
background: #C62828;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 3px;
|
||||
|
||||
img {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.platform-title {
|
||||
font-family: 'Taipei Sans TC Beta', sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 20px;
|
||||
line-height: 1.31;
|
||||
color: #141F38;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.login-mode-tabs {
|
||||
display: flex;
|
||||
gap: 39px;
|
||||
margin-bottom: 32px;
|
||||
justify-content: center;
|
||||
|
||||
.tab-item {
|
||||
padding: 8px 0;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
cursor: pointer;
|
||||
border-bottom: 2px solid transparent;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:hover {
|
||||
color: #C62828;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: #C62828;
|
||||
border-bottom-color: #C62828;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.captcha-type-tabs {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
margin-bottom: 16px;
|
||||
|
||||
.captcha-tab-item {
|
||||
flex: 1;
|
||||
padding: 8px;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
background: #F2F3F5;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:hover {
|
||||
background: #E8E8E8;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: #FFFFFF;
|
||||
background: #C62828;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.login-form {
|
||||
width: 100%;
|
||||
|
||||
.form-input {
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
background: #F2F3F5;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
font-size: 14px;
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
|
||||
:deep(.el-input__wrapper) {
|
||||
background: #F2F3F5;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
padding: 0 16px;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
:deep(.el-input__inner) {
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
|
||||
&::placeholder {
|
||||
color: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-input__wrapper:focus),
|
||||
:deep(.el-input__wrapper.is-focus) {
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #C62828;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.captcha-input-container {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
|
||||
.captcha-input {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.send-captcha-btn {
|
||||
height: 48px;
|
||||
padding: 0 12px;
|
||||
background: #C62828;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
color: #FFFFFF;
|
||||
font-size: 12px;
|
||||
white-space: nowrap;
|
||||
min-width: 90px;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background: #B71C1C;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
background: #D9D9D9;
|
||||
color: rgba(0, 0, 0, 0.25);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.login-options {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
margin: 16px 0;
|
||||
|
||||
.remember-me {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
:deep(.el-checkbox) {
|
||||
font-size: 12px;
|
||||
color: rgba(0, 0, 0, 0.3);
|
||||
|
||||
.el-checkbox__label {
|
||||
font-size: 12px;
|
||||
line-height: 1.67;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.forgot-password {
|
||||
font-size: 12px;
|
||||
color: rgba(0, 0, 0, 0.3);
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
color: #C62828;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.login-button {
|
||||
width: 100%;
|
||||
height: 46px;
|
||||
background: #C62828;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
color: #FFFFFF;
|
||||
font-family: "Source Han Sans SC";
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
line-height: 1.4;
|
||||
margin-bottom: 16px;
|
||||
|
||||
&:hover {
|
||||
background: #B71C1C;
|
||||
}
|
||||
}
|
||||
|
||||
.agreement-text {
|
||||
font-family: "Source Han Sans SC";
|
||||
font-weight: 400;
|
||||
font-size: 10px;
|
||||
line-height: 1.8;
|
||||
color: rgba(0, 0, 0, 0.3);
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
|
||||
:deep(.el-checkbox) {
|
||||
.el-checkbox__label {
|
||||
font-size: 10px;
|
||||
color: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.login-footer {
|
||||
width: 100%;
|
||||
max-width: 287px;
|
||||
margin-top: auto;
|
||||
padding-bottom: 24px;
|
||||
|
||||
.register-link {
|
||||
font-family: "Source Han Sans SC";
|
||||
font-weight: 600;
|
||||
font-size: 12px;
|
||||
line-height: 1.83;
|
||||
color: #141F38;
|
||||
text-align: center;
|
||||
margin: 0 0 16px 0;
|
||||
|
||||
.register-link-text {
|
||||
cursor: pointer;
|
||||
color: #ff0000;
|
||||
|
||||
&:hover {
|
||||
color: #C62828;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.copyright {
|
||||
font-family: "Source Han Sans SC";
|
||||
font-size: 12px;
|
||||
line-height: 2;
|
||||
color: #D9D9D9;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
// Element Plus 组件样式覆盖
|
||||
:deep(.el-form-item) {
|
||||
margin-bottom: 16px;
|
||||
|
||||
.el-form-item__content {
|
||||
line-height: normal;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-form-item__error) {
|
||||
font-size: 12px;
|
||||
color: #F56C6C;
|
||||
padding-top: 4px;
|
||||
}
|
||||
</style>
|
||||
800
schoolNewsWeb/src/views/public/login/Register.mobile.vue
Normal file
800
schoolNewsWeb/src/views/public/login/Register.mobile.vue
Normal file
@@ -0,0 +1,800 @@
|
||||
<template>
|
||||
<div class="login-container">
|
||||
<!-- 左侧励志区域 -->
|
||||
<div class="login-left">
|
||||
<div class="left-content">
|
||||
<div class="quote-text">
|
||||
<span class="quote-mark">"</span>
|
||||
<div class="quote-content">
|
||||
<p>不负时代韶华，</p>
|
||||
<p>争做时代新人。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 右侧注册表单区域 -->
|
||||
<div class="login-right">
|
||||
<div class="login-form-container">
|
||||
<!-- Logo和标题区域 -->
|
||||
<div class="login-header">
|
||||
<div class="logo-section">
|
||||
<div class="logo">
|
||||
<img src="@/assets/imgs/logo-icon.svg" alt="Logo" />
|
||||
</div>
|
||||
<h1 class="platform-title">红色思政学习平台</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 注册方式切换 -->
|
||||
<div class="register-type-tabs">
|
||||
<div
|
||||
class="tab-item"
|
||||
:class="{ active: registerType === RegisterType.USERNAME }"
|
||||
@click="switchRegisterType(RegisterType.USERNAME)"
|
||||
>
|
||||
用户名
|
||||
</div>
|
||||
<div
|
||||
class="tab-item"
|
||||
:class="{ active: registerType === RegisterType.PHONE }"
|
||||
@click="switchRegisterType(RegisterType.PHONE)"
|
||||
>
|
||||
手机号
|
||||
</div>
|
||||
<div
|
||||
class="tab-item"
|
||||
:class="{ active: registerType === RegisterType.EMAIL }"
|
||||
@click="switchRegisterType(RegisterType.EMAIL)"
|
||||
>
|
||||
邮箱
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 注册表单 -->
|
||||
<el-form
|
||||
ref="registerFormRef"
|
||||
:model="registerForm"
|
||||
:rules="registerRules"
|
||||
class="register-form"
|
||||
@submit.prevent="handleRegister"
|
||||
>
|
||||
<p class="form-title">{{ registerTypeTitle }}</p>
|
||||
|
||||
<!-- 用户名注册 -->
|
||||
<template v-if="registerType === RegisterType.USERNAME">
|
||||
<el-form-item prop="username">
|
||||
<el-input
|
||||
v-model="registerForm.username"
|
||||
placeholder="请输入用户名"
|
||||
class="form-input"
|
||||
/>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<!-- 手机号注册 -->
|
||||
<template v-if="registerType === RegisterType.PHONE">
|
||||
<el-form-item prop="phone">
|
||||
<el-input
|
||||
v-model="registerForm.phone"
|
||||
placeholder="请输入手机号"
|
||||
class="form-input"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="smsCode">
|
||||
<div class="captcha-input-container">
|
||||
<el-input
|
||||
v-model="registerForm.smsCode"
|
||||
placeholder="请输入手机验证码"
|
||||
class="form-input captcha-input"
|
||||
/>
|
||||
<el-button
|
||||
:disabled="smsCountdown > 0"
|
||||
@click="handleSendSmsCode"
|
||||
class="send-captcha-btn"
|
||||
>
|
||||
{{ smsCountdown > 0 ? `${smsCountdown}s` : '获取验证码' }}
|
||||
</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<!-- 邮箱注册 -->
|
||||
<template v-if="registerType === RegisterType.EMAIL">
|
||||
<el-form-item prop="email">
|
||||
<el-input
|
||||
v-model="registerForm.email"
|
||||
placeholder="请输入邮箱"
|
||||
class="form-input"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="emailCode">
|
||||
<div class="captcha-input-container">
|
||||
<el-input
|
||||
v-model="registerForm.emailCode"
|
||||
placeholder="请输入邮箱验证码"
|
||||
class="form-input captcha-input"
|
||||
/>
|
||||
<el-button
|
||||
:disabled="emailCountdown > 0"
|
||||
@click="handleSendEmailCode"
|
||||
class="send-captcha-btn"
|
||||
>
|
||||
{{ emailCountdown > 0 ? `${emailCountdown}s` : '获取验证码' }}
|
||||
</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<!-- 密码字段 -->
|
||||
<el-form-item prop="password">
|
||||
<el-input
|
||||
v-model="registerForm.password"
|
||||
type="password"
|
||||
placeholder="请输入密码（至少6个字符）"
|
||||
show-password
|
||||
class="form-input"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="confirmPassword">
|
||||
<el-input
|
||||
v-model="registerForm.confirmPassword"
|
||||
type="password"
|
||||
placeholder="请再次输入密码"
|
||||
show-password
|
||||
class="form-input"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button
|
||||
type="primary"
|
||||
:loading="registerLoading"
|
||||
@click="handleRegister"
|
||||
@keydown.enter="handleRegister"
|
||||
class="register-button"
|
||||
>
|
||||
注册
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="agree">
|
||||
<p class="agreement-text">
|
||||
<el-checkbox v-model="registerForm.agree">注册即为同意<span class="agreement-link" style="color: red">《红色思政智能体平台》</span></el-checkbox>
|
||||
</p>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<!-- 底部信息 -->
|
||||
<div class="login-footer">
|
||||
<p class="register-link">
|
||||
已有账号？<span class="register-link-text" @click="$router.push('/login')">立即登录</span>
|
||||
</p>
|
||||
<p class="copyright">
|
||||
Copyright ©红色思政智能体平台
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, computed, onUnmounted } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { ElMessage, type FormInstance, type FormRules } from 'element-plus';
|
||||
import type { RegisterParam } from '@/types';
|
||||
import { RegisterType } from '@/types';
|
||||
import { authApi } from '@/apis/system/auth';
|
||||
|
||||
// 响应式引用
|
||||
const registerFormRef = ref<FormInstance>();
|
||||
const registerLoading = ref(false);
|
||||
const smsCountdown = ref(0);
|
||||
const emailCountdown = ref(0);
|
||||
let smsTimer: number | null = null;
|
||||
let emailTimer: number | null = null;
|
||||
|
||||
// Composition API
|
||||
const router = useRouter();
|
||||
|
||||
// 注册方式
|
||||
const registerType = ref<RegisterType>(RegisterType.USERNAME);
|
||||
|
||||
// 表单数据
|
||||
const registerForm = reactive<RegisterParam>({
|
||||
registerType: RegisterType.USERNAME,
|
||||
username: '',
|
||||
studentId: '',
|
||||
phone: '',
|
||||
email: '',
|
||||
password: '',
|
||||
confirmPassword: '',
|
||||
smsCode: '',
|
||||
emailCode: '',
|
||||
smsSessionId: '',
|
||||
emailSessionId: '',
|
||||
agree: true
|
||||
});
|
||||
|
||||
// 根据注册方式显示不同的标题
|
||||
const registerTypeTitle = computed(() => {
|
||||
switch (registerType.value) {
|
||||
case RegisterType.USERNAME:
|
||||
return '用户名注册';
|
||||
case RegisterType.PHONE:
|
||||
return '手机号注册';
|
||||
case RegisterType.EMAIL:
|
||||
return '邮箱注册';
|
||||
default:
|
||||
return '账号注册';
|
||||
}
|
||||
});
|
||||
|
||||
// 切换注册方式
|
||||
const switchRegisterType = (type: RegisterType) => {
|
||||
registerType.value = type;
|
||||
registerForm.registerType = type;
|
||||
// 清空表单验证
|
||||
registerFormRef.value?.clearValidate();
|
||||
};
|
||||
|
||||
// 自定义验证器
|
||||
const validatePass = (rule: any, value: string, callback: any) => {
|
||||
if (value === '') {
|
||||
callback(new Error('请输入密码'));
|
||||
} else if (value.length < 6) {
|
||||
callback(new Error('密码至少6个字符'));
|
||||
} else {
|
||||
if (registerForm.confirmPassword !== '') {
|
||||
registerFormRef.value?.validateField('confirmPassword');
|
||||
}
|
||||
callback();
|
||||
}
|
||||
};
|
||||
|
||||
const validateConfirmPass = (rule: any, value: string, callback: any) => {
|
||||
if (value === '') {
|
||||
callback(new Error('请再次输入密码'));
|
||||
} else if (value !== registerForm.password) {
|
||||
callback(new Error('两次输入的密码不一致'));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
|
||||
const validatePhone = (rule: any, value: string, callback: any) => {
|
||||
if (registerType.value === RegisterType.PHONE) {
|
||||
if (value === '') {
|
||||
callback(new Error('请输入手机号'));
|
||||
} else if (!/^1[3-9]\d{9}$/.test(value)) {
|
||||
callback(new Error('请输入有效的手机号'));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
|
||||
const validateEmail = (rule: any, value: string, callback: any) => {
|
||||
if (registerType.value === RegisterType.EMAIL) {
|
||||
if (value === '') {
|
||||
callback(new Error('请输入邮箱'));
|
||||
} else if (!/^[A-Za-z0-9+_.-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}$/.test(value)) {
|
||||
callback(new Error('请输入有效的邮箱地址'));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
|
||||
const validateUsername = (rule: any, value: string, callback: any) => {
|
||||
if (registerType.value === RegisterType.USERNAME) {
|
||||
if (value === '') {
|
||||
callback(new Error('请输入用户名'));
|
||||
} else if (value.length < 3 || value.length > 20) {
|
||||
callback(new Error('用户名长度为3-20个字符'));
|
||||
} else if (!/^[a-zA-Z0-9_]+$/.test(value)) {
|
||||
callback(new Error('用户名只能包含字母、数字和下划线'));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
|
||||
// 表单验证规则
|
||||
const registerRules: FormRules = {
|
||||
username: [
|
||||
{ validator: validateUsername, trigger: 'blur' }
|
||||
],
|
||||
phone: [
|
||||
{ validator: validatePhone, trigger: 'blur' }
|
||||
],
|
||||
email: [
|
||||
{ validator: validateEmail, trigger: 'blur' }
|
||||
],
|
||||
smsCode: [
|
||||
{
|
||||
validator: (rule: any, value: string, callback: any) => {
|
||||
if (registerType.value === RegisterType.PHONE) {
|
||||
if (value === '') {
|
||||
callback(new Error('请输入手机验证码'));
|
||||
} else if (value.length !== 6) {
|
||||
callback(new Error('验证码为6位'));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
},
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
emailCode: [
|
||||
{
|
||||
validator: (rule: any, value: string, callback: any) => {
|
||||
if (registerType.value === RegisterType.EMAIL) {
|
||||
if (value === '') {
|
||||
callback(new Error('请输入邮箱验证码'));
|
||||
} else if (value.length !== 6) {
|
||||
callback(new Error('验证码为6位'));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
},
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
password: [
|
||||
{ required: true, validator: validatePass, trigger: 'blur' }
|
||||
],
|
||||
confirmPassword: [
|
||||
{ required: true, validator: validateConfirmPass, trigger: 'blur' }
|
||||
],
|
||||
agree: [
|
||||
{
|
||||
validator: (rule: any, value: boolean, callback: any) => {
|
||||
if (!value) {
|
||||
callback(new Error('请同意《红色思政智能体平台》用户协议'));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
},
|
||||
trigger: 'change'
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
// 发送手机验证码
|
||||
const handleSendSmsCode = async () => {
|
||||
// 先验证手机号
|
||||
try {
|
||||
await registerFormRef.value?.validateField('phone');
|
||||
} catch (error) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const result = await authApi.sendSmsCode(registerForm.phone!);
|
||||
if (result.code === 200 && result.data) {
|
||||
// 保存sessionId
|
||||
registerForm.smsSessionId = result.data.sessionId;
|
||||
ElMessage.success(result.data.message || '验证码已发送');
|
||||
|
||||
// 开始倒计时
|
||||
smsCountdown.value = 60;
|
||||
smsTimer = window.setInterval(() => {
|
||||
smsCountdown.value--;
|
||||
if (smsCountdown.value <= 0 && smsTimer) {
|
||||
clearInterval(smsTimer);
|
||||
smsTimer = null;
|
||||
}
|
||||
}, 1000);
|
||||
} else {
|
||||
ElMessage.error(result.message || '发送验证码失败');
|
||||
}
|
||||
} catch (error: any) {
|
||||
console.error('发送验证码失败:', error);
|
||||
ElMessage.error(error.message || '发送验证码失败');
|
||||
}
|
||||
};
|
||||
|
||||
// 发送邮箱验证码
|
||||
const handleSendEmailCode = async () => {
|
||||
// 先验证邮箱
|
||||
try {
|
||||
await registerFormRef.value?.validateField('email');
|
||||
} catch (error) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const result = await authApi.sendEmailCode(registerForm.email!);
|
||||
if (result.code === 200 && result.data) {
|
||||
// 保存sessionId
|
||||
registerForm.emailSessionId = result.data.sessionId;
|
||||
ElMessage.success(result.data.message || '验证码已发送到邮箱');
|
||||
|
||||
// 开始倒计时
|
||||
emailCountdown.value = 60;
|
||||
emailTimer = window.setInterval(() => {
|
||||
emailCountdown.value--;
|
||||
if (emailCountdown.value <= 0 && emailTimer) {
|
||||
clearInterval(emailTimer);
|
||||
emailTimer = null;
|
||||
}
|
||||
}, 1000);
|
||||
} else {
|
||||
ElMessage.error(result.message || '发送验证码失败');
|
||||
}
|
||||
} catch (error: any) {
|
||||
console.error('发送验证码失败:', error);
|
||||
ElMessage.error(error.message || '发送验证码失败');
|
||||
}
|
||||
};
|
||||
|
||||
// 注册处理
|
||||
const handleRegister = async () => {
|
||||
if (!registerFormRef.value) return;
|
||||
|
||||
// 检查是否同意用户协议
|
||||
if (!registerForm.agree) {
|
||||
ElMessage.warning('请先同意《红色思政智能体平台》用户协议');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const valid = await registerFormRef.value.validate();
|
||||
if (!valid) return;
|
||||
|
||||
registerLoading.value = true;
|
||||
|
||||
// 调用注册API
|
||||
const result = await authApi.register(registerForm);
|
||||
|
||||
if (result.code === 200) {
|
||||
ElMessage.success('注册成功！请登录');
|
||||
|
||||
// 注册成功后跳转到登录页
|
||||
setTimeout(() => {
|
||||
router.push('/login');
|
||||
}, 1500);
|
||||
} else {
|
||||
ElMessage.error(result.message || '注册失败，请重试');
|
||||
}
|
||||
|
||||
} catch (error: any) {
|
||||
console.error('注册失败:', error);
|
||||
ElMessage.error(error.message || '注册失败，请重试');
|
||||
} finally {
|
||||
registerLoading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 组件卸载时清除定时器
|
||||
onUnmounted(() => {
|
||||
if (smsTimer) {
|
||||
clearInterval(smsTimer);
|
||||
}
|
||||
if (emailTimer) {
|
||||
clearInterval(emailTimer);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
// 移动端注册页面样式
|
||||
.login-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background: #FFFFFF;
|
||||
margin: 0 auto;
|
||||
box-shadow: 0px 4px 30px 0px rgba(176, 196, 225, 0.25);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.login-left {
|
||||
height: 30%;
|
||||
display: flex;
|
||||
padding: 30px 44px;
|
||||
background: url(@/assets/imgs/login-bg.png);
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
.left-content {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.quote-text {
|
||||
color: #FFF2D3;
|
||||
|
||||
.quote-mark {
|
||||
font-family: 'Arial Black', sans-serif;
|
||||
font-weight: 900;
|
||||
font-size: 38.9px;
|
||||
line-height: 0.74;
|
||||
display: block;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.quote-content {
|
||||
p {
|
||||
font-family: 'Source Han Sans SC', sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 28px;
|
||||
line-height: 1.42;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.login-right {
|
||||
flex: 1;
|
||||
height: 70%;
|
||||
background: #FFFFFF;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 30px 44px;
|
||||
position: relative;
|
||||
border-radius: 20px 20px 0 0;
|
||||
margin-top: -20px;
|
||||
z-index: 2;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.login-form-container {
|
||||
width: 100%;
|
||||
max-width: 287px;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.login-header {
|
||||
margin-bottom: 32px;
|
||||
|
||||
.logo-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 11px;
|
||||
justify-content: center;
|
||||
|
||||
.logo {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
background: #C62828;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 3px;
|
||||
|
||||
img {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.platform-title {
|
||||
font-family: 'Taipei Sans TC Beta', sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 20px;
|
||||
line-height: 1.31;
|
||||
color: #141F38;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.register-type-tabs {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-bottom: 24px;
|
||||
|
||||
.tab-item {
|
||||
flex: 1;
|
||||
padding: 12px 16px;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
background: #F2F3F5;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:hover {
|
||||
background: #E8E8E8;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: #FFFFFF;
|
||||
background: #C62828;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.register-form {
|
||||
width: 100%;
|
||||
|
||||
.form-title {
|
||||
font-family: "Source Han Sans SC";
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
color: #141F38;
|
||||
margin: 0 0 24px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
background: #F2F3F5;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
font-size: 14px;
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
|
||||
:deep(.el-input__wrapper) {
|
||||
background: #F2F3F5;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
padding: 0 16px;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
:deep(.el-input__inner) {
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
|
||||
&::placeholder {
|
||||
color: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-input__wrapper:focus),
|
||||
:deep(.el-input__wrapper.is-focus) {
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #C62828;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.captcha-input-container {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
|
||||
.captcha-input {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.send-captcha-btn {
|
||||
height: 48px;
|
||||
padding: 0 12px;
|
||||
background: #C62828;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
color: #FFFFFF;
|
||||
font-size: 12px;
|
||||
white-space: nowrap;
|
||||
min-width: 90px;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background: #B71C1C;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
background: #D9D9D9;
|
||||
color: rgba(0, 0, 0, 0.25);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.register-button {
|
||||
width: 100%;
|
||||
height: 46px;
|
||||
background: #C62828;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
color: #FFFFFF;
|
||||
font-family: "Source Han Sans SC";
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
line-height: 1.4;
|
||||
margin-bottom: 16px;
|
||||
|
||||
&:hover {
|
||||
background: #B71C1C;
|
||||
}
|
||||
}
|
||||
|
||||
.agreement-text {
|
||||
font-family: "Source Han Sans SC";
|
||||
font-weight: 400;
|
||||
font-size: 10px;
|
||||
line-height: 1.8;
|
||||
color: rgba(0, 0, 0, 0.3);
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
|
||||
:deep(.el-checkbox) {
|
||||
.el-checkbox__label {
|
||||
font-size: 10px;
|
||||
color: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.login-footer {
|
||||
width: 100%;
|
||||
max-width: 287px;
|
||||
margin-top: 24px;
|
||||
padding-bottom: 0;
|
||||
|
||||
.register-link {
|
||||
font-family: "Source Han Sans SC";
|
||||
font-weight: 600;
|
||||
font-size: 12px;
|
||||
line-height: 1.83;
|
||||
color: #141F38;
|
||||
text-align: center;
|
||||
margin: 0 0 16px 0;
|
||||
|
||||
.register-link-text {
|
||||
cursor: pointer;
|
||||
color: #ff0000;
|
||||
|
||||
&:hover {
|
||||
color: #C62828;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.copyright {
|
||||
font-family: "Source Han Sans SC";
|
||||
font-size: 12px;
|
||||
line-height: 2;
|
||||
color: #D9D9D9;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
// Element Plus 组件样式覆盖
|
||||
:deep(.el-form-item) {
|
||||
margin-bottom: 16px;
|
||||
|
||||
.el-form-item__content {
|
||||
line-height: normal;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-form-item__error) {
|
||||
font-size: 12px;
|
||||
color: #F56C6C;
|
||||
padding-top: 4px;
|
||||
}
|
||||
</style>
|
||||
@@ -86,10 +86,10 @@ function getChartOption(): EChartsOption {
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '0',
|
||||
right: '20px',
|
||||
top: '20px',
|
||||
bottom: '40px',
|
||||
left: '5%',
|
||||
right: '5%',
|
||||
top: '10%',
|
||||
bottom: '15%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
@@ -272,9 +272,91 @@ onUnmounted(() => {
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
height: 243px;
|
||||
width: 100%;
|
||||
overflow: hidden; // 防止图表溢出
|
||||
}
|
||||
}
|
||||
|
||||
// 移动端适配 - 重新布局
|
||||
@media (max-width: 768px) {
|
||||
.learning-progress {
|
||||
padding: 20px 16px 24px 16px;
|
||||
height: auto;
|
||||
|
||||
.progress-header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 16px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
.header-left {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 4px;
|
||||
width: 100%;
|
||||
|
||||
.progress-title {
|
||||
font-size: 18px;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.update-time {
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.tab-buttons {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
|
||||
.tab-btn {
|
||||
flex: 1;
|
||||
min-width: auto;
|
||||
height: 36px;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
height: 200px;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 小屏移动端进一步优化
|
||||
@media (max-width: 480px) {
|
||||
.learning-progress {
|
||||
padding: 16px 12px 20px 12px;
|
||||
|
||||
.progress-header {
|
||||
.header-left {
|
||||
.progress-title {
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
.tab-buttons {
|
||||
.tab-btn {
|
||||
height: 32px;
|
||||
font-size: 12px;
|
||||
padding: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
height: 180px;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user