h5样式
This commit is contained in:
216
schoolNewsWeb/src/components/base/MobileNavItem.vue
Normal file
216
schoolNewsWeb/src/components/base/MobileNavItem.vue
Normal file
@@ -0,0 +1,216 @@
|
||||
<template>
|
||||
<div class="mobile-nav-item">
|
||||
<!-- 有子菜单的情况 -->
|
||||
<template v-if="hasChildren">
|
||||
<div
|
||||
class="nav-item-content"
|
||||
:class="{ 'active': isActive }"
|
||||
@click="toggleExpanded"
|
||||
>
|
||||
<div class="nav-item-inner">
|
||||
<span class="nav-title">{{ menu.name }}</span>
|
||||
<el-icon class="expand-icon" :class="{ 'expanded': expanded }">
|
||||
<ArrowRight />
|
||||
</el-icon>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 子菜单 -->
|
||||
<transition name="submenu">
|
||||
<div
|
||||
class="submenu"
|
||||
v-if="expanded"
|
||||
>
|
||||
<MobileNavItem
|
||||
v-for="child in filteredChildren"
|
||||
:key="child.menuID"
|
||||
:menu="child"
|
||||
:level="level + 1"
|
||||
@menu-click="$emit('menu-click', $event)"
|
||||
/>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<!-- 没有子菜单的情况 -->
|
||||
<template v-else>
|
||||
<div
|
||||
class="nav-item-content"
|
||||
:class="{ 'active': isActive }"
|
||||
@click="handleClick"
|
||||
>
|
||||
<div class="nav-item-inner">
|
||||
<span class="nav-title">{{ menu.name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
import type { SysMenu } from '@/types';
|
||||
import { MenuType } from '@/types/enums';
|
||||
import { ArrowRight } from '@element-plus/icons-vue';
|
||||
|
||||
// 递归组件需要声明名称
|
||||
defineOptions({
|
||||
name: 'MobileNavItem'
|
||||
});
|
||||
|
||||
// Props
|
||||
interface Props {
|
||||
menu: SysMenu;
|
||||
level?: number;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
level: 0
|
||||
});
|
||||
|
||||
// Emits
|
||||
const emit = defineEmits<{
|
||||
'menu-click': [menu: SysMenu];
|
||||
}>();
|
||||
|
||||
// 状态 - 默认不展开
|
||||
const expanded = ref(false);
|
||||
|
||||
// Composition API
|
||||
const route = useRoute();
|
||||
|
||||
// 计算属性 - 显示NAVIGATION类型的子菜单
|
||||
const hasChildren = computed(() => {
|
||||
return props.menu.children &&
|
||||
props.menu.children.filter((child: SysMenu) => child.type === MenuType.NAVIGATION).length > 0;
|
||||
});
|
||||
|
||||
// 过滤后的子菜单（只显示NAVIGATION类型）
|
||||
const filteredChildren = computed(() => {
|
||||
if (!props.menu.children) return [];
|
||||
return props.menu.children.filter((child: SysMenu) => child.type === MenuType.NAVIGATION);
|
||||
});
|
||||
|
||||
const isActive = computed(() => {
|
||||
// 精确匹配当前路由
|
||||
if (route.path === props.menu.url) return true;
|
||||
|
||||
// 检查是否是子路由激活
|
||||
if (props.menu.children && props.menu.children.length > 0) {
|
||||
return props.menu.children.some(child => route.path === child.url);
|
||||
}
|
||||
|
||||
return false;
|
||||
});
|
||||
|
||||
// 方法
|
||||
function toggleExpanded() {
|
||||
if (hasChildren.value) {
|
||||
expanded.value = !expanded.value;
|
||||
}
|
||||
}
|
||||
|
||||
function handleClick() {
|
||||
if (props.menu.url && props.menu.type === MenuType.NAVIGATION) {
|
||||
emit('menu-click', props.menu);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.mobile-nav-item {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.nav-item-content {
|
||||
position: relative;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
height: 48px;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(198, 40, 40, 0.05);
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: #C62828;
|
||||
|
||||
.nav-item-inner {
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.expand-icon {
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-item-inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 100%;
|
||||
padding: 0 20px;
|
||||
color: #141F38;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
flex: 1;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.expand-icon {
|
||||
font-size: 12px;
|
||||
transition: transform 0.3s ease, color 0.2s;
|
||||
color: #686868;
|
||||
|
||||
&.expanded {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
|
||||
.submenu {
|
||||
margin: 4px 0;
|
||||
overflow: hidden;
|
||||
|
||||
.mobile-nav-item {
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.nav-item-content {
|
||||
.nav-item-inner {
|
||||
padding-left: 40px;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #686868;
|
||||
}
|
||||
|
||||
&.active .nav-item-inner {
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(198, 40, 40, 0.08);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 动画效果 */
|
||||
.submenu-enter-active,
|
||||
.submenu-leave-active {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.submenu-enter-from,
|
||||
.submenu-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
</style>
|
||||
@@ -12,4 +12,5 @@ export { default as GenericSelector } from './GenericSelector.vue';
|
||||
export { default as TreeNode } from './TreeNode.vue';
|
||||
export { default as Notice } from './Notice.vue';
|
||||
export { default as ChangeHome } from './ChangeHome.vue';
|
||||
export { default as DynamicParamForm} from './DynamicParamForm.vue'
|
||||
export { default as DynamicParamForm} from './DynamicParamForm.vue'
|
||||
export { default as MobileNavItem } from './MobileNavItem.vue'
|
||||
593
schoolNewsWeb/src/layouts/MobileLayout.vue
Normal file
593
schoolNewsWeb/src/layouts/MobileLayout.vue
Normal file
@@ -0,0 +1,593 @@
|
||||
<template>
|
||||
<div class="mobile-layout">
|
||||
<!-- 顶部导航栏 -->
|
||||
<header class="mobile-header">
|
||||
<!-- 左侧：系统标签 -->
|
||||
<div class="header-left">
|
||||
<div class="logo-section">
|
||||
<div class="logo-icon">
|
||||
<img src="@/assets/imgs/logo-icon.svg" alt="Logo" />
|
||||
</div>
|
||||
<h1 class="platform-title">红色思政学习平台</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 右侧：搜索、菜单、用户头像 -->
|
||||
<div class="header-right">
|
||||
<!-- 搜索区域 -->
|
||||
<div class="search-section">
|
||||
<!-- 搜索input（展开时显示） -->
|
||||
<div v-if="searchInputVisible" class="search-input-wrapper">
|
||||
<el-input
|
||||
v-model="searchKeyword"
|
||||
ref="searchInputRef"
|
||||
placeholder="搜索内容"
|
||||
class="search-input"
|
||||
@keydown.enter="performSearch"
|
||||
@blur="hideSearchInput"
|
||||
/>
|
||||
</div>
|
||||
<!-- 搜索按钮 -->
|
||||
<button v-if="!searchInputVisible" @click="showSearchInput" class="search-button">
|
||||
<el-icon class="search-icon">
|
||||
<Search />
|
||||
</el-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 汉堡菜单 -->
|
||||
<button @click="toggleNavMenu" class="hamburger-button">
|
||||
<div class="hamburger-lines">
|
||||
<span class="line"></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"></span>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<!-- 用户头像 -->
|
||||
<div class="user-avatar-section" @click="handleUserClick">
|
||||
<el-avatar :size="32" :src="userInfo.avatar" class="user-avatar">
|
||||
<el-icon><User /></el-icon>
|
||||
</el-avatar>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 导航下拉菜单 - 使用 Teleport 避免层级问题 -->
|
||||
<Teleport to="body">
|
||||
<div
|
||||
v-show="navMenuVisible"
|
||||
class="nav-dropdown"
|
||||
:class="{ show: navMenuVisible }"
|
||||
@click="handleBackgroundClick"
|
||||
>
|
||||
<div class="nav-menu" @click.stop>
|
||||
<MobileNavItem
|
||||
v-for="menu in navigationMenus"
|
||||
:key="menu.menuID"
|
||||
:menu="menu"
|
||||
@menu-click="handleNavMenuClick"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Teleport>
|
||||
|
||||
<!-- 主要内容区域 -->
|
||||
<main class="mobile-main" :class="{ 'nav-open': navMenuVisible }">
|
||||
<AIAgentMobile/>
|
||||
<router-view />
|
||||
</main>
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted, nextTick } from 'vue';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import { useStore } from 'vuex';
|
||||
import type { SysMenu } from '@/types';
|
||||
import type { Tag } from '@/types/resource';
|
||||
import { MenuType } from '@/types/enums';
|
||||
import { resourceTagApi } from '@/apis/resource';
|
||||
import {
|
||||
ArrowLeft,
|
||||
Menu,
|
||||
Search,
|
||||
More,
|
||||
ArrowRight,
|
||||
SwitchButton,
|
||||
House,
|
||||
Document,
|
||||
User,
|
||||
Message,
|
||||
Setting
|
||||
} from '@element-plus/icons-vue';
|
||||
import { FILE_DOWNLOAD_URL } from '@/config';
|
||||
import { MobileNavItem } from '@/components/base';
|
||||
import { AIAgentMobile } from '@/views/public/ai';
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const store = useStore();
|
||||
|
||||
// 响应式数据
|
||||
const navMenuVisible = ref(false);
|
||||
const searchInputVisible = ref(false);
|
||||
const searchKeyword = ref('');
|
||||
const searchInputRef = ref();
|
||||
const specialTags = ref<Tag[]>([]); // 特殊标签：专题报告和思政案例
|
||||
|
||||
// 计算属性
|
||||
const currentPath = computed(() => route.path);
|
||||
const pageTitle = computed(() => route.meta?.title as string || '校园新闻');
|
||||
const showBackButton = computed(() => route.meta?.showBackButton as boolean || false);
|
||||
const showSearch = computed(() => route.meta?.showSearch as boolean || true); // 默认显示搜索按钮
|
||||
const showMore = computed(() => route.meta?.showMore as boolean || false);
|
||||
const showTabBar = computed(() => route.meta?.showTabBar !== false);
|
||||
|
||||
// 从store获取用户信息
|
||||
const userInfo = computed(() => {
|
||||
const userDetail = store.getters['auth/userinfo'];
|
||||
const user = store.getters['auth/user'];
|
||||
return {
|
||||
avatar: FILE_DOWNLOAD_URL + userDetail?.avatar, // 默认头像
|
||||
name: user?.userName || user?.name || '用户',
|
||||
role: userDetail?.title || '用户'
|
||||
};
|
||||
});
|
||||
|
||||
// 获取所有菜单
|
||||
const allMenus = computed(() => store.getters['auth/menuTree']);
|
||||
|
||||
// 获取导航菜单（过滤掉用户相关菜单）+ 特殊标签
|
||||
const navigationMenus = computed(() => {
|
||||
const menus = allMenus.value.filter((menu: SysMenu) => {
|
||||
// 过滤掉"用户下拉菜单"容器，这些显示在UserDropdown中
|
||||
if (menu.menuID === 'menu_user_dropdown') {
|
||||
return false;
|
||||
}
|
||||
return menu.type === MenuType.NAVIGATION;
|
||||
});
|
||||
|
||||
// 将特殊标签转换为SysMenu格式并添加到菜单中
|
||||
const specialMenus: SysMenu[] = specialTags.value.map(tag => ({
|
||||
menuID: `special_${tag.tagID}`,
|
||||
name: tag.name,
|
||||
url: `/resource-center?tagID=${tag.tagID}`,
|
||||
type: MenuType.NAVIGATION,
|
||||
children: [],
|
||||
parentID: undefined,
|
||||
sort: 999 // 排在最后
|
||||
}));
|
||||
|
||||
return [...menus, ...specialMenus];
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
// 方法
|
||||
const toggleNavMenu = () => {
|
||||
navMenuVisible.value = !navMenuVisible.value;
|
||||
};
|
||||
|
||||
const hideNavMenu = () => {
|
||||
navMenuVisible.value = false;
|
||||
};
|
||||
|
||||
// 处理背景点击 - 参考TopNavigation.vue的处理方式
|
||||
const handleBackgroundClick = (event: MouseEvent) => {
|
||||
// 只有点击背景区域时才关闭菜单
|
||||
if (event.target === event.currentTarget) {
|
||||
hideNavMenu();
|
||||
}
|
||||
};
|
||||
|
||||
const handleBack = () => {
|
||||
router.back();
|
||||
};
|
||||
|
||||
const handleSearch = () => {
|
||||
router.push('/search');
|
||||
};
|
||||
|
||||
|
||||
// 搜索功能相关方法
|
||||
const showSearchInput = () => {
|
||||
searchInputVisible.value = true;
|
||||
// 下一个tick后聚焦输入框
|
||||
nextTick(() => {
|
||||
searchInputRef.value?.focus?.();
|
||||
});
|
||||
};
|
||||
|
||||
const hideSearchInput = () => {
|
||||
// 延迟隐藏，避免点击搜索按钮时立即隐藏
|
||||
setTimeout(() => {
|
||||
searchInputVisible.value = false;
|
||||
searchKeyword.value = '';
|
||||
}, 200);
|
||||
};
|
||||
|
||||
const performSearch = () => {
|
||||
if (searchKeyword.value.trim()) {
|
||||
// 执行搜索跳转
|
||||
router.push({
|
||||
path: '/search',
|
||||
query: {
|
||||
keyword: searchKeyword.value.trim()
|
||||
}
|
||||
});
|
||||
// 搜索后隐藏输入框
|
||||
searchInputVisible.value = false;
|
||||
searchKeyword.value = '';
|
||||
}
|
||||
};
|
||||
|
||||
// 用户头像点击处理
|
||||
const handleUserClick = () => {
|
||||
router.push('/user-center');
|
||||
};
|
||||
|
||||
// 处理导航菜单点击
|
||||
const handleNavMenuClick = (menu: SysMenu) => {
|
||||
hideNavMenu();
|
||||
if (menu.url) {
|
||||
router.push(menu.url);
|
||||
} else if (menu.children && menu.children.length > 0) {
|
||||
// 如果没有url但有子菜单，跳转到第一个子菜单
|
||||
const firstChild = menu.children.find(child => child.url);
|
||||
if (firstChild?.url) {
|
||||
router.push(firstChild.url);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
// 加载特殊标签（专题报告和思政案例）
|
||||
const loadSpecialTags = async () => {
|
||||
try {
|
||||
const res = await resourceTagApi.getTagsByType(1); // 1 = 文章分类标签
|
||||
if (res.success && res.dataList) {
|
||||
// 只获取专题报告(tag005)和思政案例(tag006)
|
||||
specialTags.value = res.dataList.filter((tag: Tag) =>
|
||||
tag.tagID === 'tag_article_005' || tag.tagID === 'tag_article_006'
|
||||
);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载特殊标签失败:', error);
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(async () => {
|
||||
// 加载特殊标签
|
||||
await loadSpecialTags();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.mobile-layout {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
.mobile-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 46px;
|
||||
padding: 10px 16px;
|
||||
background-color: #ffffff;
|
||||
border-bottom: 1px solid rgba(72, 72, 72, 0.1);
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1000;
|
||||
|
||||
.header-left {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.logo-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 7.42px;
|
||||
|
||||
.logo-icon {
|
||||
width: 24.28px;
|
||||
height: 24.28px;
|
||||
background: #C62828;
|
||||
border-radius: 4.05px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 2.02px;
|
||||
flex-shrink: 0;
|
||||
|
||||
img {
|
||||
width: 20.24px;
|
||||
height: 20.24px;
|
||||
}
|
||||
}
|
||||
|
||||
.platform-title {
|
||||
font-family: 'Taipei Sans TC Beta', sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
color: #C62828;
|
||||
margin: 0;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
flex-shrink: 0;
|
||||
|
||||
.search-section {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.search-input-wrapper {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 200px;
|
||||
z-index: 10;
|
||||
|
||||
.search-input {
|
||||
width: 100%;
|
||||
|
||||
:deep(.el-input__wrapper) {
|
||||
background: #ffffff;
|
||||
border: 1px solid #C62828;
|
||||
border-radius: 20px;
|
||||
height: 32px;
|
||||
padding: 0 12px;
|
||||
box-shadow: 0 2px 8px rgba(198, 40, 40, 0.1);
|
||||
}
|
||||
|
||||
:deep(.el-input__inner) {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
|
||||
&::placeholder {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search-button {
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 6px;
|
||||
border-radius: 4px;
|
||||
transition: background-color 0.2s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&:hover {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
font-size: 18px;
|
||||
color: #141F38;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hamburger-button {
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 4px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.hamburger-lines {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
|
||||
.line {
|
||||
width: 13.33px;
|
||||
height: 0;
|
||||
border-top: 1.67px solid #141F38;
|
||||
margin-left: 1.33px;
|
||||
|
||||
&:nth-child(1) {
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.user-avatar-section {
|
||||
cursor: pointer;
|
||||
transition: opacity 0.2s;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.user-avatar {
|
||||
border: 1px solid #e5e5e5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 导航下拉菜单样式
|
||||
.nav-dropdown {
|
||||
position: fixed;
|
||||
top: 46px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
z-index: 10000;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: opacity 0.2s, visibility 0.2s;
|
||||
pointer-events: none;
|
||||
|
||||
&.show {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.nav-menu {
|
||||
background: #ffffff;
|
||||
border-radius: 0 0 20px 20px;
|
||||
padding: 10px 20px;
|
||||
position: relative;
|
||||
|
||||
.nav-menu-item {
|
||||
padding: 10px 20px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
|
||||
&:hover {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
&.active {
|
||||
.nav-item-label {
|
||||
color: #C62828;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.nav-item-arrow {
|
||||
color: #C62828;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-item-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
gap: 2px;
|
||||
|
||||
.nav-item-label {
|
||||
font-family: 'PingFang SC', sans-serif;
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
color: #141F38;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.nav-item-arrow {
|
||||
font-size: 12px;
|
||||
color: #686868;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
}
|
||||
|
||||
// 特殊样式处理不同颜色的文本
|
||||
&:nth-child(1) .nav-item-label,
|
||||
&:nth-child(2) .nav-item-label,
|
||||
&:nth-child(6) .nav-item-label,
|
||||
&:nth-child(7) .nav-item-label {
|
||||
color: #141F38;
|
||||
}
|
||||
|
||||
&:nth-child(4) .nav-item-label,
|
||||
&:nth-child(5) .nav-item-label {
|
||||
color: #686868;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-main {
|
||||
flex: 1;
|
||||
padding-top: 46px;
|
||||
padding-bottom: 60px;
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
&.nav-open {
|
||||
filter: blur(2px);
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-footer {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: #ffffff;
|
||||
border-top: 1px solid #e5e5e5;
|
||||
z-index: 1000;
|
||||
|
||||
.tab-bar {
|
||||
display: flex;
|
||||
height: 60px;
|
||||
|
||||
.tab-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: color 0.2s;
|
||||
|
||||
&.active {
|
||||
color: #E7000B;
|
||||
}
|
||||
|
||||
&:not(.active) {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.tab-icon {
|
||||
font-size: 20px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.tab-label {
|
||||
font-size: 12px;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// 移动端特定样式
|
||||
@media (max-width: 767px) {
|
||||
.mobile-main {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,4 +1,5 @@
|
||||
import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
|
||||
import { createAdaptiveRoute, setupRouteWatcher } from "@/utils/routeAdapter";
|
||||
|
||||
/**
|
||||
* 基础路由配置（无需权限）
|
||||
@@ -8,54 +9,21 @@ export const routes: Array<RouteRecordRaw> = [
|
||||
path: "/",
|
||||
redirect: "/login",
|
||||
},
|
||||
{
|
||||
path: "/login",
|
||||
component: () => import("@/layouts/BlankLayout.vue"),
|
||||
children: [
|
||||
{
|
||||
path: "",
|
||||
name: "Login",
|
||||
component: () => import("@/views/public/login/Login.vue"),
|
||||
meta: {
|
||||
title: "登录",
|
||||
requiresAuth: false,
|
||||
menuType: 3,
|
||||
},
|
||||
}
|
||||
],
|
||||
},
|
||||
{
|
||||
path: "/register",
|
||||
component: () => import("@/layouts/BlankLayout.vue"),
|
||||
children: [
|
||||
{
|
||||
path: "",
|
||||
name: "Register",
|
||||
component: () => import("@/views/public/login/Register.vue"),
|
||||
meta: {
|
||||
title: "注册",
|
||||
requiresAuth: false,
|
||||
menuType: 3,
|
||||
},
|
||||
}
|
||||
],
|
||||
},
|
||||
{
|
||||
path: "/forgot-password",
|
||||
component: () => import("@/layouts/BlankLayout.vue"),
|
||||
children: [
|
||||
{
|
||||
path: "",
|
||||
name: "ForgotPassword",
|
||||
component: () => import("@/views/public/login/ForgotPassword.vue"),
|
||||
meta: {
|
||||
title: "忘记密码",
|
||||
requiresAuth: false,
|
||||
menuType: 3,
|
||||
},
|
||||
}
|
||||
],
|
||||
},
|
||||
createAdaptiveRoute('/login', '@/views/public/login/Login.vue', 'BlankLayout', {
|
||||
title: '登录',
|
||||
requiresAuth: false,
|
||||
menuType: 3,
|
||||
}),
|
||||
createAdaptiveRoute('/register', '@/views/public/login/Register.vue', 'BlankLayout', {
|
||||
title: '注册',
|
||||
requiresAuth: false,
|
||||
menuType: 3,
|
||||
}),
|
||||
createAdaptiveRoute('/forgot-password', '@/views/public/login/ForgotPassword.vue', 'BlankLayout', {
|
||||
title: '忘记密码',
|
||||
requiresAuth: false,
|
||||
menuType: 3,
|
||||
}),
|
||||
// 首页（显示在导航栏）
|
||||
// {
|
||||
// path: "/home",
|
||||
@@ -132,8 +100,11 @@ export const routes: Array<RouteRecordRaw> = [
|
||||
];
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory('/schoolNewsWeb/'),
|
||||
history: createWebHistory(import.meta.env.BASE_URL),
|
||||
routes,
|
||||
});
|
||||
|
||||
// 设置路由响应式监听器
|
||||
setupRouteWatcher(router);
|
||||
|
||||
export default router;
|
||||
|
||||
109
schoolNewsWeb/src/utils/deviceUtils.ts
Normal file
109
schoolNewsWeb/src/utils/deviceUtils.ts
Normal file
@@ -0,0 +1,109 @@
|
||||
import { ref, onMounted, onUnmounted } from 'vue';
|
||||
|
||||
/**
|
||||
* 设备类型枚举
|
||||
*/
|
||||
export enum DeviceType {
|
||||
MOBILE = 'mobile', // h5移动端
|
||||
DESKTOP = 'desktop' // web桌面端
|
||||
}
|
||||
|
||||
/**
|
||||
* 屏幕尺寸断点
|
||||
*/
|
||||
export const BREAKPOINTS = {
|
||||
mobile: 768, // 小于768px为移动端(h5)
|
||||
desktop: 768 // 大于等于768px为桌面端(web)
|
||||
};
|
||||
|
||||
/**
|
||||
* 检测当前设备类型
|
||||
*/
|
||||
export function getDeviceType(): DeviceType {
|
||||
const width = window.innerWidth;
|
||||
|
||||
if (width < BREAKPOINTS.mobile) {
|
||||
return DeviceType.MOBILE; // h5移动端
|
||||
} else {
|
||||
return DeviceType.DESKTOP; // web桌面端
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 检测是否为移动端
|
||||
*/
|
||||
export function isMobile(): boolean {
|
||||
return getDeviceType() === DeviceType.MOBILE;
|
||||
}
|
||||
|
||||
/**
|
||||
* 检测是否为桌面端
|
||||
*/
|
||||
export function isDesktop(): boolean {
|
||||
return getDeviceType() === DeviceType.DESKTOP;
|
||||
}
|
||||
|
||||
/**
|
||||
* 响应式设备类型 Hook
|
||||
*/
|
||||
export function useDevice() {
|
||||
const deviceType = ref<DeviceType>(getDeviceType());
|
||||
const isMobileDevice = ref(isMobile());
|
||||
const isDesktopDevice = ref(isDesktop());
|
||||
|
||||
const updateDeviceType = () => {
|
||||
deviceType.value = getDeviceType();
|
||||
isMobileDevice.value = isMobile();
|
||||
isDesktopDevice.value = isDesktop();
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
window.addEventListener('resize', updateDeviceType);
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('resize', updateDeviceType);
|
||||
});
|
||||
|
||||
return {
|
||||
deviceType,
|
||||
isMobileDevice,
|
||||
isDesktopDevice
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* 根据设备类型获取对应的组件路径
|
||||
*/
|
||||
export function getComponentPath(basePath: string, deviceType?: DeviceType): string {
|
||||
const currentDeviceType = deviceType || getDeviceType();
|
||||
|
||||
// 如果是移动端(h5)，尝试加载移动端版本
|
||||
if (currentDeviceType === DeviceType.MOBILE) {
|
||||
const mobilePath = basePath.replace('.vue', '.mobile.vue');
|
||||
return mobilePath;
|
||||
}
|
||||
|
||||
// 默认返回桌面版本(web)
|
||||
return basePath;
|
||||
}
|
||||
|
||||
/**
|
||||
* 动态导入组件，支持回退机制
|
||||
*/
|
||||
export async function importResponsiveComponent(basePath: string) {
|
||||
const deviceType = getDeviceType();
|
||||
|
||||
// 尝试加载设备特定的组件
|
||||
if (deviceType === DeviceType.MOBILE) {
|
||||
try {
|
||||
const mobilePath = basePath.replace('.vue', '.mobile.vue');
|
||||
return await import(/* @vite-ignore */ mobilePath);
|
||||
} catch {
|
||||
// 移动端组件不存在，回退到默认组件
|
||||
}
|
||||
}
|
||||
|
||||
// 加载默认组件(桌面端/web)
|
||||
return await import(/* @vite-ignore */ basePath);
|
||||
}
|
||||
211
schoolNewsWeb/src/utils/mobileRouteExample.ts
Normal file
211
schoolNewsWeb/src/utils/mobileRouteExample.ts
Normal file
@@ -0,0 +1,211 @@
|
||||
/**
|
||||
* 移动端路由自动转换使用示例
|
||||
*
|
||||
* 这个文件展示了如何使用自动转换系统来实现移动端适配
|
||||
*/
|
||||
|
||||
import { RouteRecordRaw } from 'vue-router';
|
||||
import {
|
||||
createAdaptiveRoute,
|
||||
createResponsiveRoute,
|
||||
getResponsiveLayout,
|
||||
setupRouteWatcher,
|
||||
type RouteAdapter
|
||||
} from './routeAdapter';
|
||||
|
||||
/**
|
||||
* 示例1: 创建单个自适应路由
|
||||
*
|
||||
* 当屏幕宽度 < 768px时，会自动尝试加载 HomeView.mobile.vue
|
||||
* 如果移动端文件不存在，会回退到 HomeView.vue
|
||||
*/
|
||||
export const homeRoute = createAdaptiveRoute(
|
||||
'/home',
|
||||
'@/views/user/home/HomeView.vue',
|
||||
'NavigationLayout',
|
||||
{
|
||||
title: '首页',
|
||||
requiresAuth: true,
|
||||
showTabBar: true
|
||||
}
|
||||
);
|
||||
|
||||
/**
|
||||
* 示例2: 手动创建路由适配器
|
||||
*
|
||||
* 提供更精细的控制，可以为不同设备指定不同的组件
|
||||
*/
|
||||
export const resourceCenterRoute: RouteRecordRaw = {
|
||||
path: '/resource-center',
|
||||
component: getResponsiveLayout('NavigationLayout'),
|
||||
children: [
|
||||
{
|
||||
path: '',
|
||||
component: createResponsiveRoute({
|
||||
// 桌面端使用默认组件
|
||||
original: () => import('@/views/user/resource-center/ResourceCenterView.vue'),
|
||||
// 移动端使用专门优化的组件
|
||||
mobile: () => import('@/views/user/resource-center/ResourceCenterView.mobile.vue'),
|
||||
// 平板可以复用移动端组件或使用专门的平板版本
|
||||
tablet: () => import('@/views/user/resource-center/ResourceCenterView.mobile.vue')
|
||||
}),
|
||||
meta: {
|
||||
title: '资源中心',
|
||||
requiresAuth: true,
|
||||
showTabBar: true,
|
||||
showSearch: true
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
/**
|
||||
* 示例3: 批量创建自适应路由
|
||||
*/
|
||||
export const userRoutes: RouteRecordRaw[] = [
|
||||
// 首页
|
||||
createAdaptiveRoute('/home', '@/views/user/home/HomeView.vue', 'NavigationLayout', {
|
||||
title: '首页',
|
||||
requiresAuth: true,
|
||||
showTabBar: true
|
||||
}),
|
||||
|
||||
// 资源中心
|
||||
createAdaptiveRoute('/resource-center', '@/views/user/resource-center/ResourceCenterView.vue', 'NavigationLayout', {
|
||||
title: '资源中心',
|
||||
requiresAuth: true,
|
||||
showTabBar: true,
|
||||
showSearch: true
|
||||
}),
|
||||
|
||||
// 热门资源
|
||||
createAdaptiveRoute('/resource-hot', '@/views/user/resource-center/HotResourceView.vue', 'NavigationLayout', {
|
||||
title: '热门资源',
|
||||
requiresAuth: true,
|
||||
showBackButton: true
|
||||
}),
|
||||
|
||||
// 搜索页面
|
||||
createAdaptiveRoute('/search', '@/views/user/resource-center/SearchView.vue', 'NavigationLayout', {
|
||||
title: '搜索',
|
||||
requiresAuth: true,
|
||||
showBackButton: true,
|
||||
showTabBar: false // 搜索页面不显示底部标签栏
|
||||
}),
|
||||
|
||||
// 课程中心
|
||||
createAdaptiveRoute('/course-center', '@/views/user/study-plan/CourseCenterView.vue', 'NavigationLayout', {
|
||||
title: '课程中心',
|
||||
requiresAuth: true,
|
||||
showTabBar: true
|
||||
}),
|
||||
|
||||
// 课程详情
|
||||
createAdaptiveRoute('/course-detail/:id', '@/views/user/study-plan/CourseDetailView.vue', 'NavigationLayout', {
|
||||
title: '课程详情',
|
||||
requiresAuth: true,
|
||||
showBackButton: true
|
||||
}),
|
||||
|
||||
// 用户中心
|
||||
createAdaptiveRoute('/user-center', '@/views/user/user-center/UserCenterLayout.vue', 'NavigationLayout', {
|
||||
title: '个人中心',
|
||||
requiresAuth: true,
|
||||
showTabBar: true
|
||||
}),
|
||||
|
||||
// 个人信息
|
||||
createAdaptiveRoute('/personal-info', '@/views/user/user-center/profile/PersonalInfoView.vue', 'NavigationLayout', {
|
||||
title: '个人信息',
|
||||
requiresAuth: true,
|
||||
showBackButton: true
|
||||
}),
|
||||
|
||||
// 我的消息
|
||||
createAdaptiveRoute('/my-messages', '@/views/user/message/MyMessageListView.vue', 'NavigationLayout', {
|
||||
title: '我的消息',
|
||||
requiresAuth: true,
|
||||
showTabBar: true
|
||||
}),
|
||||
|
||||
// 消息详情
|
||||
createAdaptiveRoute('/message-detail/:id', '@/views/user/message/MyMessageDetailView.vue', 'NavigationLayout', {
|
||||
title: '消息详情',
|
||||
requiresAuth: true,
|
||||
showBackButton: true
|
||||
})
|
||||
];
|
||||
|
||||
/**
|
||||
* 示例4: 公共页面路由（登录、注册等）
|
||||
*/
|
||||
export const publicRoutes: RouteRecordRaw[] = [
|
||||
createAdaptiveRoute('/login', '@/views/public/login/Login.vue', 'BlankLayout', {
|
||||
title: '登录',
|
||||
requiresAuth: false
|
||||
}),
|
||||
|
||||
createAdaptiveRoute('/register', '@/views/public/login/Register.vue', 'BlankLayout', {
|
||||
title: '注册',
|
||||
requiresAuth: false
|
||||
}),
|
||||
|
||||
createAdaptiveRoute('/forgot-password', '@/views/public/login/ForgotPassword.vue', 'BlankLayout', {
|
||||
title: '忘记密码',
|
||||
requiresAuth: false
|
||||
})
|
||||
];
|
||||
|
||||
/**
|
||||
* 示例5: 在router中使用
|
||||
*
|
||||
* 在你的 router/index.ts 中，你可以这样使用：
|
||||
*
|
||||
* ```typescript
|
||||
* import { createRouter, createWebHistory } from 'vue-router';
|
||||
* import { setupRouteWatcher } from '@/utils/routeAdapter';
|
||||
* import { userRoutes, publicRoutes } from '@/utils/mobileRouteExample';
|
||||
*
|
||||
* const router = createRouter({
|
||||
* history: createWebHistory('/schoolNewsWeb/'),
|
||||
* routes: [
|
||||
* ...publicRoutes,
|
||||
* ...userRoutes,
|
||||
* // 其他路由...
|
||||
* ]
|
||||
* });
|
||||
*
|
||||
* // 设置路由监听器，当屏幕尺寸变化时自动切换组件
|
||||
* setupRouteWatcher(router);
|
||||
*
|
||||
* export default router;
|
||||
* ```
|
||||
*/
|
||||
|
||||
/**
|
||||
* 使用说明：
|
||||
*
|
||||
* 1. **文件命名规范**：
|
||||
* - 桌面端：ComponentName.vue
|
||||
* - 移动端：ComponentName.mobile.vue
|
||||
* - 平板端：ComponentName.tablet.vue
|
||||
*
|
||||
* 2. **自动回退机制**：
|
||||
* - 如果移动端文件不存在，自动回退到桌面端文件
|
||||
* - 如果平板端文件不存在，自动回退到桌面端文件
|
||||
*
|
||||
* 3. **Layout自动切换**：
|
||||
* - NavigationLayout -> MobileLayout (移动端)
|
||||
* - SidebarLayout -> MobileLayout (移动端)
|
||||
* - BasicLayout -> MobileLayout (移动端)
|
||||
* - BlankLayout -> BlankLayout (所有设备)
|
||||
*
|
||||
* 4. **屏幕断点**：
|
||||
* - 移动端: < 768px
|
||||
* - 平板端: 768px - 1024px
|
||||
* - 桌面端: > 1024px
|
||||
*
|
||||
* 5. **实时响应**：
|
||||
* - 当用户调整浏览器窗口大小时，会自动切换到对应的组件版本
|
||||
* - 无需刷新页面
|
||||
*/
|
||||
@@ -8,24 +8,25 @@ import type { RouteRecordRaw } from 'vue-router';
|
||||
import type { SysMenu } from '@/types';
|
||||
import { MenuType } from '@/types/enums';
|
||||
import { routes } from '@/router';
|
||||
import { getResponsiveLayout } from './routeAdapter';
|
||||
|
||||
// 预注册所有视图组件，构建时由 Vite 解析并生成按需加载的 chunk
|
||||
const VIEW_MODULES = import.meta.glob('../views/**/*.vue');
|
||||
|
||||
/**
|
||||
* 布局组件映射
|
||||
* 布局组件映射 - 使用响应式布局适配
|
||||
*/
|
||||
const LAYOUT_MAP: Record<string, () => Promise<any>> = {
|
||||
// 基础布局（旧版，带侧边栏）
|
||||
'BasicLayout': () => import('@/layouts/BasicLayout.vue'),
|
||||
'BasicLayout': getResponsiveLayout('BasicLayout'),
|
||||
// 导航布局（新版，顶部导航+动态侧边栏）
|
||||
'NavigationLayout': () => import('@/layouts/NavigationLayout.vue'),
|
||||
'NavigationLayout': getResponsiveLayout('NavigationLayout'),
|
||||
// 侧边栏布局（管理后台专用，顶层SIDEBAR菜单）
|
||||
'SidebarLayout': () => import('@/layouts/SidebarLayout.vue'),
|
||||
'SidebarLayout': getResponsiveLayout('SidebarLayout'),
|
||||
// 空白布局
|
||||
'BlankLayout': () => import('@/layouts/BlankLayout.vue'),
|
||||
'BlankLayout': getResponsiveLayout('BlankLayout'),
|
||||
// 页面布局
|
||||
'PageLayout': () => import('@/layouts/PageLayout.vue'),
|
||||
'PageLayout': getResponsiveLayout('PageLayout'),
|
||||
// 路由占位组件（用于没有组件的子路由）
|
||||
'RoutePlaceholder': () => import('@/layouts/RoutePlaceholder.vue'),
|
||||
// 用户中心布局（有共用区域，避免重复查询）
|
||||
|
||||
261
schoolNewsWeb/src/utils/routeAdapter.ts
Normal file
261
schoolNewsWeb/src/utils/routeAdapter.ts
Normal file
@@ -0,0 +1,261 @@
|
||||
import { RouteRecordRaw, RouteLocationNormalized } from 'vue-router';
|
||||
import { getDeviceType, DeviceType } from './deviceUtils';
|
||||
|
||||
/**
|
||||
* 路由适配器接口
|
||||
*/
|
||||
export interface RouteAdapter {
|
||||
original: () => Promise<any>; // web桌面端
|
||||
mobile?: () => Promise<any>; // h5移动端
|
||||
}
|
||||
|
||||
/**
|
||||
* 移动端路由映射表
|
||||
*/
|
||||
export const MOBILE_ROUTES_MAP: Record<string, string> = {
|
||||
// User Views
|
||||
'/home': '@/views/user/home/HomeView.mobile.vue',
|
||||
'/resource-center': '@/views/user/resource-center/ResourceCenterView.mobile.vue',
|
||||
'/resource-hot': '@/views/user/resource-center/HotResourceView.mobile.vue',
|
||||
'/search': '@/views/user/resource-center/SearchView.mobile.vue',
|
||||
'/course-center': '@/views/user/study-plan/CourseCenterView.mobile.vue',
|
||||
'/course-detail': '@/views/user/study-plan/CourseDetailView.mobile.vue',
|
||||
'/course-study': '@/views/user/study-plan/CourseStudyView.mobile.vue',
|
||||
'/study-tasks': '@/views/user/study-plan/StudyTasksView.mobile.vue',
|
||||
'/learning-task-detail': '@/views/user/study-plan/LearningTaskDetailView.mobile.vue',
|
||||
'/user-center': '@/views/user/user-center/UserCenterLayout.mobile.vue',
|
||||
'/personal-info': '@/views/user/user-center/profile/PersonalInfoView.mobile.vue',
|
||||
'/account-settings': '@/views/user/user-center/profile/AccountSettingsView.mobile.vue',
|
||||
'/my-achievements': '@/views/user/user-center/MyAchievementsView.mobile.vue',
|
||||
'/my-favorites': '@/views/user/user-center/MyFavoritesView.mobile.vue',
|
||||
'/learning-records': '@/views/user/user-center/LearningRecordsView.mobile.vue',
|
||||
'/my-messages': '@/views/user/message/MyMessageListView.mobile.vue',
|
||||
'/message-detail': '@/views/user/message/MyMessageDetailView.mobile.vue',
|
||||
|
||||
// Public Views
|
||||
'/login': '@/views/public/login/Login.mobile.vue',
|
||||
'/register': '@/views/public/login/Register.mobile.vue',
|
||||
'/forgot-password': '@/views/public/login/ForgotPassword.mobile.vue',
|
||||
'/article-show': '@/views/public/article/ArticleShowView.mobile.vue',
|
||||
'/article-add': '@/views/public/article/ArticleAddView.mobile.vue'
|
||||
};
|
||||
|
||||
/**
|
||||
* Layout映射表
|
||||
*/
|
||||
export const LAYOUT_MAP: Record<string, Record<DeviceType, string>> = {
|
||||
'NavigationLayout': {
|
||||
[DeviceType.MOBILE]: '@/layouts/MobileLayout.vue', // h5移动端
|
||||
[DeviceType.DESKTOP]: '@/layouts/NavigationLayout.vue' // web桌面端
|
||||
},
|
||||
'SidebarLayout': {
|
||||
[DeviceType.MOBILE]: '@/layouts/MobileLayout.vue', // h5移动端
|
||||
[DeviceType.DESKTOP]: '@/layouts/SidebarLayout.vue' // web桌面端
|
||||
},
|
||||
'BasicLayout': {
|
||||
[DeviceType.MOBILE]: '@/layouts/MobileLayout.vue', // h5移动端
|
||||
[DeviceType.DESKTOP]: '@/layouts/BasicLayout.vue' // web桌面端
|
||||
},
|
||||
'BlankLayout': {
|
||||
[DeviceType.MOBILE]: '@/layouts/BlankLayout.vue', // h5移动端
|
||||
[DeviceType.DESKTOP]: '@/layouts/BlankLayout.vue' // web桌面端
|
||||
},
|
||||
'PageLayout': {
|
||||
[DeviceType.MOBILE]: '@/layouts/MobileLayout.vue', // h5移动端
|
||||
[DeviceType.DESKTOP]: '@/layouts/PageLayout.vue' // web桌面端
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 创建响应式路由组件
|
||||
*/
|
||||
export function createResponsiveRoute(adapter: RouteAdapter): () => Promise<any> {
|
||||
return async () => {
|
||||
const deviceType = getDeviceType();
|
||||
|
||||
try {
|
||||
// 尝试加载设备特定的组件
|
||||
if (deviceType === DeviceType.MOBILE && adapter.mobile) {
|
||||
return await adapter.mobile();
|
||||
}
|
||||
} catch (error) {
|
||||
console.warn(`Failed to load device-specific component for ${deviceType}, falling back to original:`, error);
|
||||
}
|
||||
|
||||
// 回退到原始组件(桌面端/web)
|
||||
return await adapter.original();
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取响应式Layout组件
|
||||
*/
|
||||
export function getResponsiveLayout(layoutName: string): () => Promise<any> {
|
||||
const deviceType = getDeviceType();
|
||||
const layoutMap = LAYOUT_MAP[layoutName];
|
||||
|
||||
if (!layoutMap) {
|
||||
console.warn(`Unknown layout: ${layoutName}, using original`);
|
||||
// 使用具体的导入路径
|
||||
switch (layoutName) {
|
||||
case 'BlankLayout':
|
||||
return () => import('@/layouts/BlankLayout.vue');
|
||||
case 'NavigationLayout':
|
||||
return () => import('@/layouts/NavigationLayout.vue');
|
||||
case 'SidebarLayout':
|
||||
return () => import('@/layouts/SidebarLayout.vue');
|
||||
case 'BasicLayout':
|
||||
return () => import('@/layouts/BasicLayout.vue');
|
||||
case 'PageLayout':
|
||||
return () => import('@/layouts/PageLayout.vue');
|
||||
default:
|
||||
throw new Error(`Unknown layout: ${layoutName}`);
|
||||
}
|
||||
}
|
||||
|
||||
const targetLayout = layoutMap[deviceType];
|
||||
|
||||
return async () => {
|
||||
try {
|
||||
// 使用具体的导入路径而不是动态路径
|
||||
switch (targetLayout) {
|
||||
case '@/layouts/BlankLayout.vue':
|
||||
return await import('@/layouts/BlankLayout.vue');
|
||||
case '@/layouts/NavigationLayout.vue':
|
||||
return await import('@/layouts/NavigationLayout.vue');
|
||||
case '@/layouts/SidebarLayout.vue':
|
||||
return await import('@/layouts/SidebarLayout.vue');
|
||||
case '@/layouts/BasicLayout.vue':
|
||||
return await import('@/layouts/BasicLayout.vue');
|
||||
case '@/layouts/MobileLayout.vue':
|
||||
return await import('@/layouts/MobileLayout.vue');
|
||||
case '@/layouts/PageLayout.vue':
|
||||
return await import('@/layouts/PageLayout.vue');
|
||||
default:
|
||||
throw new Error(`Unknown layout path: ${targetLayout}`);
|
||||
}
|
||||
} catch (error) {
|
||||
console.warn(`Failed to load responsive layout ${targetLayout}, falling back to original:`, error);
|
||||
// 回退到原始layout
|
||||
switch (layoutName) {
|
||||
case 'BlankLayout':
|
||||
return await import('@/layouts/BlankLayout.vue');
|
||||
case 'NavigationLayout':
|
||||
return await import('@/layouts/NavigationLayout.vue');
|
||||
case 'SidebarLayout':
|
||||
return await import('@/layouts/SidebarLayout.vue');
|
||||
case 'BasicLayout':
|
||||
return await import('@/layouts/BasicLayout.vue');
|
||||
case 'PageLayout':
|
||||
return await import('@/layouts/PageLayout.vue');
|
||||
default:
|
||||
throw new Error(`Unknown layout: ${layoutName}`);
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* 创建自适应路由配置
|
||||
*/
|
||||
export function createAdaptiveRoute(
|
||||
path: string,
|
||||
originalComponent: string,
|
||||
layoutName?: string,
|
||||
meta?: any
|
||||
): RouteRecordRaw {
|
||||
// 创建具体的导入函数而不是使用动态路径
|
||||
const getOriginalComponent = () => {
|
||||
switch (originalComponent) {
|
||||
case '@/views/public/login/Login.vue':
|
||||
return import('@/views/public/login/Login.vue');
|
||||
case '@/views/public/login/Register.vue':
|
||||
return import('@/views/public/login/Register.vue');
|
||||
case '@/views/public/login/ForgotPassword.vue':
|
||||
return import('@/views/public/login/ForgotPassword.vue');
|
||||
default:
|
||||
throw new Error(`Unknown component: ${originalComponent}`);
|
||||
}
|
||||
};
|
||||
|
||||
const getMobileComponent = (): (() => Promise<any>) | null => {
|
||||
const mobilePath = MOBILE_ROUTES_MAP[path];
|
||||
if (!mobilePath) return null;
|
||||
|
||||
switch (mobilePath) {
|
||||
case '@/views/public/login/Login.mobile.vue':
|
||||
return () => import('@/views/public/login/Login.mobile.vue');
|
||||
case '@/views/public/login/Register.mobile.vue':
|
||||
return () => import('@/views/public/login/Register.mobile.vue');
|
||||
case '@/views/public/login/ForgotPassword.mobile.vue':
|
||||
return () => import('@/views/public/login/ForgotPassword.mobile.vue');
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
const adapter: RouteAdapter = {
|
||||
original: getOriginalComponent
|
||||
};
|
||||
|
||||
// 检查是否有移动端版本
|
||||
const mobileImportFunction = getMobileComponent();
|
||||
if (mobileImportFunction) {
|
||||
adapter.mobile = mobileImportFunction;
|
||||
}
|
||||
|
||||
// 如果指定了Layout，应用响应式Layout
|
||||
if (layoutName) {
|
||||
const route: RouteRecordRaw = {
|
||||
path,
|
||||
component: getResponsiveLayout(layoutName),
|
||||
children: [
|
||||
{
|
||||
path: '',
|
||||
component: createResponsiveRoute(adapter),
|
||||
meta
|
||||
}
|
||||
],
|
||||
meta
|
||||
};
|
||||
return route;
|
||||
}
|
||||
|
||||
const route: RouteRecordRaw = {
|
||||
path,
|
||||
component: createResponsiveRoute(adapter),
|
||||
meta
|
||||
};
|
||||
|
||||
return route;
|
||||
}
|
||||
|
||||
/**
|
||||
* 监听屏幕尺寸变化，重新加载路由
|
||||
*/
|
||||
export function setupRouteWatcher(router: any) {
|
||||
let currentDeviceType = getDeviceType();
|
||||
|
||||
const handleResize = () => {
|
||||
const newDeviceType = getDeviceType();
|
||||
if (newDeviceType !== currentDeviceType) {
|
||||
currentDeviceType = newDeviceType;
|
||||
// 重新加载当前路由以应用新的组件
|
||||
const currentRoute = router.currentRoute.value;
|
||||
router.replace({
|
||||
...currentRoute,
|
||||
query: {
|
||||
...currentRoute.query,
|
||||
_refresh: Date.now() // 强制重新加载
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener('resize', handleResize);
|
||||
|
||||
// 返回清理函数
|
||||
return () => {
|
||||
window.removeEventListener('resize', handleResize);
|
||||
};
|
||||
}
|
||||
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>
|
||||
|
||||
@@ -101,11 +101,14 @@ import { bannerApi } from '@/apis/resource/banner';
|
||||
import { recommendApi } from '@/apis/homepage';
|
||||
import { ElMessage } from 'element-plus';
|
||||
import type { Banner, ResourceRecommendVO } from '@/types';
|
||||
import dangIcon from '@/assets/imgs/dang.svg';
|
||||
import dangIconUrl from '@/assets/imgs/dang.svg';
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
// 将导入的SVG URL转换为响应式变量以供模板使用
|
||||
const dangIcon = ref(dangIconUrl);
|
||||
|
||||
// 轮播数据
|
||||
const banners = ref<Banner[]>([]);
|
||||
const loading = ref(false);
|
||||
@@ -318,4 +321,97 @@ onMounted(() => {
|
||||
@keyframes spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
// 移动端适配
|
||||
@media (max-width: 768px) {
|
||||
.home-view {
|
||||
padding-bottom: 80px; // 为移动端底部导航留出空间
|
||||
}
|
||||
|
||||
.banner-section {
|
||||
height: 200px; // 移动端轮播图高度调整
|
||||
}
|
||||
|
||||
.section {
|
||||
padding: 0 16px; // 移动端左右内边距
|
||||
margin-top: 24px; // 减少上边距
|
||||
|
||||
.section-header {
|
||||
margin-bottom: 16px; // 减少底部边距
|
||||
|
||||
.section-title {
|
||||
font-size: 20px; // 移动端标题字体大小
|
||||
line-height: 28px;
|
||||
}
|
||||
|
||||
.more-link {
|
||||
span {
|
||||
font-size: 14px; // 移动端"查看更多"字体
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.el-icon {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.article-grid {
|
||||
grid-template-columns: 1fr; // 移动端单列布局
|
||||
gap: 16px; // 减少间距
|
||||
}
|
||||
|
||||
.loading-container,
|
||||
.empty-container {
|
||||
padding: 40px 0; // 减少垂直内边距
|
||||
min-height: 120px; // 减少最小高度
|
||||
}
|
||||
}
|
||||
|
||||
// 轮播图移动端优化
|
||||
.banner-loading,
|
||||
.banner-empty {
|
||||
p {
|
||||
font-size: 12px; // 移动端提示文字
|
||||
}
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
width: 32px; // 移动端加载图标大小
|
||||
height: 32px;
|
||||
border-width: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
// 小屏移动端进一步优化
|
||||
@media (max-width: 480px) {
|
||||
.section {
|
||||
padding: 0 12px; // 更小的内边距
|
||||
margin-top: 20px;
|
||||
|
||||
.section-header {
|
||||
margin-bottom: 12px;
|
||||
|
||||
.section-title {
|
||||
font-size: 18px; // 更小的标题
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.more-link {
|
||||
span {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.article-grid {
|
||||
gap: 12px; // 更小的间距
|
||||
}
|
||||
}
|
||||
|
||||
.banner-section {
|
||||
height: 160px; // 小屏幕更小的轮播图高度
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -63,7 +63,7 @@ export default defineConfig({
|
||||
// 代理配置
|
||||
proxy: {
|
||||
'/api': {
|
||||
target: 'http://127.0.0.1:8081',
|
||||
target: 'http://127.0.0.1:8082',
|
||||
changeOrigin: true,
|
||||
rewrite: (path) => path.replace(/^\/api/, ''),
|
||||
configure: (proxy, options) => {
|
||||
|
||||
Reference in New Issue
Block a user