wangys/schoolNews
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

界面

Browse Source
This commit is contained in:
wangys
2025-11-14 12:03:02 +08:00
parent e20a7755f8
commit 46003a646e
21 changed files with 887 additions and 499 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
schoolNewsWeb/src/apis/index.ts
View File

@@ -86,7 +86,7 @@ request.interceptors.request.use(
const customConfig = config as CustomAxiosRequestConfig;
// 默认不显示加载动画，只有显式开启时才展示
if (customConfig.showLoading) {
if (customConfig.showLoading !== false) {
loadingInstance = ElLoading.service({
lock: true,
text: "加载中...",

4
schoolNewsWeb/src/apis/message/message.ts
View File

@@ -142,7 +142,7 @@ export const messageApi = {
const response = await api.post<MessageUserVO>('/message/my/page', {
pageParam,
filter
});
},{showLoading: false});
return response.data;
},
@@ -181,7 +181,7 @@ export const messageApi = {
* @returns Promise<ResultDomain<number>>
*/
async getUnreadCount(): Promise<ResultDomain<number>> {
const response = await api.get<number>('/message/my/unreadCount');
const response = await api.get<number>('/message/my/unreadCount',{},{showLoading: false});
return response.data;
},

3
schoolNewsWeb/src/assets/imgs/notice.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M20 17H22V19H2V17H4V10C4 5.58172 7.58172 2 12 2C16.4183 2 20 5.58172 20 10V17ZM9 21H15V23H9V21Z" fill="black"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 225 B

35
schoolNewsWeb/src/components/base/ChangeHome.vue Normal file
View File

@@ -0,0 +1,35 @@
<template>
<div class="change-home" v-if="isAdmin">
<el-button type="primary" @click="changeHome">
<span v-if="home">前往用户页</span>
<span v-else>前往管理页</span>
</el-button>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
const isAdmin = ref<boolean>(false);
const home = ref<boolean>(false);
const router = useRouter();
const routes = router.getRoutes();
function hasAdmin(){
return routes.some((route: any) => route.path.startsWith('/admin'));
}
function changeHome(){
if(home.value){
router.push('/home');
}else{
router.push('/admin/overview');
}
home.value = !home.value;
}
onMounted(() => {
isAdmin.value = hasAdmin();
home.value = router.currentRoute.value.path.startsWith('/admin');
});
</script>
<style scoped lang="scss"></style>

394
schoolNewsWeb/src/components/base/Notice.vue Normal file
View File

@@ -0,0 +1,394 @@
<template>
<div ref="noticeRef" class="notice" @click="toggleDropdown" @mouseenter="openDropdown" @mouseleave="closeDropdown"
v-click-outside="forceCloseDropdown">
<div class="notice-trigger">
<img src="@/assets/imgs/notice.svg" alt="notice" />
<span v-if="unreadCount > 0" class="notice-badge">{{ unreadCount > 99 ? '99+' : unreadCount }}</span>
</div>
<!-- 下拉通知列表 -->
<Teleport to="body">
<div class="notice-dropdown" :class="{ 'show': dropdownVisible }" :style="dropdownStyle"
v-if="dropdownVisible" @mouseenter="openDropdown" @mouseleave="closeDropdown">
<div class="notice-header">
<h3>通知</h3>
<span class="notice-count" v-if="unreadCount > 0">{{ unreadCount }}条未读</span>
</div>
<div class="notice-list" v-loading="loading">
<div v-if="noticeList.length === 0 && !loading" class="notice-empty">
暂无通知
</div>
<div v-for="item in noticeList" :key="item.messageID" class="notice-item" :class="{ 'unread': !item.isRead }"
@click="handleNoticeClick(item)">
<div class="notice-content">
<div class="notice-title">{{ item.title }}</div>
<div class="notice-time">{{ formatTime(item.actualSendTime || item.createTime) }}</div>
</div>
</div>
</div>
<div class="notice-footer" v-if="noticeList.length > 0">
<span class="view-all" @click="viewAll">查看全部</span>
</div>
</div>
</Teleport>
</div>
</template>
<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import { messageApi } from '@/apis/message';
import type { MessageUserVO, PageParam } from '@/types';
// 状态
const dropdownVisible = ref(false);
const noticeRef = ref<HTMLElement | null>(null);
const dropdownPosition = ref({ top: 0, left: 0 });
const closeTimer = ref<number | null>(null);
const loading = ref(false);
const lastLoadTime = ref(0); // 上次加载时间戳
const hasLoadedOnce = ref(false); // 是否已经加载过一次
const router = useRouter();
// 通知列表
const noticeList = ref<MessageUserVO[]>([]);
// 未读数量
const unreadCount = ref(0);
// 下拉菜单样式
const dropdownStyle = computed(() => {
return {
position: 'fixed' as const,
top: `${dropdownPosition.value.top}px`,
left: `${dropdownPosition.value.left}px`,
width: '320px',
};
});
// 加载消息列表
async function loadMessages(force = false) {
// 如果正在加载，直接返回
if (loading.value) return;
// 如果不是强制刷新，且已经加载过，且距离上次加载时间少于2秒，则不重复加载
const now = Date.now();
if (!force && hasLoadedOnce.value && (now - lastLoadTime.value) < 2000) {
return;
}
loading.value = true;
lastLoadTime.value = now;
try {
const pageParam: PageParam = {
pageNumber: 1,
pageSize: 10,
orderBy: 'actualSendTime',
orderDirection: 'desc'
};
const result = await messageApi.getMyMessages(pageParam);
if (result.success) {
noticeList.value = result.dataList || [];
hasLoadedOnce.value = true;
} else {
ElMessage.error(result.message || '加载失败');
}
} catch (error) {
console.error('加载消息列表失败:', error);
ElMessage.error('加载失败');
} finally {
loading.value = false;
}
}
// 加载未读数量
async function loadUnreadCount() {
try {
const result = await messageApi.getUnreadCount();
if (result.success) {
unreadCount.value = result.data || 0;
}
} catch (error) {
console.error('加载未读数量失败:', error);
}
}
// 方法
function openDropdown() {
if (closeTimer.value) {
clearTimeout(closeTimer.value);
closeTimer.value = null;
}
// 如果已经打开，不重复处理（避免鼠标移动时重复触发）
if (dropdownVisible.value) {
return;
}
dropdownVisible.value = true;
// 计算下拉菜单位置（居中显示）
if (noticeRef.value) {
const rect = noticeRef.value.getBoundingClientRect();
const dropdownWidth = 320;
dropdownPosition.value = {
top: rect.bottom + 4,
left: rect.left + rect.width / 2 - dropdownWidth / 2, // 居中
};
}
// 每次打开下拉菜单时都加载数据（因为 hasLoadedOnce 在关闭时会被重置）
loadMessages();
loadUnreadCount();
}
function toggleDropdown() {
if (dropdownVisible.value) {
forceCloseDropdown();
} else {
openDropdown();
}
}
function closeDropdown() {
closeTimer.value = setTimeout(() => {
dropdownVisible.value = false;
closeTimer.value = null;
// 关闭时重置加载标志，下次打开时会重新加载
hasLoadedOnce.value = false;
}, 200);
}
function forceCloseDropdown() {
if (closeTimer.value) {
clearTimeout(closeTimer.value);
closeTimer.value = null;
}
dropdownVisible.value = false;
// 关闭时重置加载标志，下次打开时会重新加载
hasLoadedOnce.value = false;
}
async function handleNoticeClick(item: MessageUserVO) {
// 如果未读，标记为已读
if (!item.isRead && item.messageID) {
try {
await messageApi.markAsRead(item.messageID);
item.isRead = true;
// 更新未读数量
if (unreadCount.value > 0) {
unreadCount.value--;
}
} catch (error) {
console.error('标记已读失败:', error);
}
}
// 跳转到消息详情页
if (item.messageID) {
router.push(`/user/message/detail/${item.messageID}`);
}
forceCloseDropdown();
}
function viewAll() {
router.push('/user/message');
forceCloseDropdown();
}
function formatTime(time?: string | number): string {
if (!time) return '';
const date = new Date(time);
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('zh-CN', { month: 'short', day: 'numeric' });
}
// 点击外部关闭指令
const vClickOutside = {
mounted(el: any, binding: any) {
el._clickOutside = (event: Event) => {
if (!(el === event.target || el.contains(event.target as Node))) {
binding.value();
}
};
document.addEventListener('click', el._clickOutside);
},
unmounted(el: any) {
document.removeEventListener('click', el._clickOutside);
delete el._clickOutside;
}
};
onMounted(() => {
loadUnreadCount();
});
</script>
<style scoped lang="scss">
.notice {
position: relative;
cursor: pointer;
user-select: none;
}
.notice-trigger {
position: relative;
display: flex;
align-items: center;
justify-content: center;
padding: 8px;
border-radius: 4px;
transition: background-color 0.2s ease;
&:hover {
background-color: #f5f5f5;
}
img {
width: 20px;
height: 20px;
}
.notice-badge {
position: absolute;
top: 4px;
right: 4px;
min-width: 16px;
height: 16px;
padding: 0 4px;
background: #ff4d4f;
color: white;
border-radius: 8px;
font-size: 11px;
line-height: 16px;
text-align: center;
font-weight: 500;
}
}
.notice-dropdown {
background: white;
border-radius: 4px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
border: 1px solid #e8e8e8;
z-index: 10000;
overflow: hidden;
opacity: 0;
transform: scaleY(0);
transform-origin: top center;
transition: opacity 0.2s ease, transform 0.2s ease;
max-height: 400px;
display: flex;
flex-direction: column;
&.show {
opacity: 1;
transform: scaleY(1);
}
}
.notice-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 16px;
border-bottom: 1px solid #e8e8e8;
h3 {
margin: 0;
font-size: 16px;
font-weight: 600;
color: #333;
}
.notice-count {
font-size: 12px;
color: #ff4d4f;
}
}
.notice-list {
flex: 1;
overflow-y: auto;
max-height: 300px;
}
.notice-empty {
padding: 40px 20px;
text-align: center;
color: #999;
font-size: 14px;
}
.notice-item {
padding: 12px 16px;
border-bottom: 1px solid #f0f0f0;
cursor: pointer;
transition: background-color 0.2s ease;
&:hover {
background-color: #f5f5f5;
}
&.unread {
background-color: #f0f7ff;
.notice-title {
font-weight: 600;
}
}
&:last-child {
border-bottom: none;
}
}
.notice-content {
.notice-title {
font-size: 14px;
color: #333;
line-height: 1.5;
margin-bottom: 4px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
}
.notice-time {
font-size: 12px;
color: #999;
}
}
.notice-footer {
padding: 8px 16px;
border-top: 1px solid #e8e8e8;
text-align: center;
.view-all {
font-size: 14px;
color: #C62828;
cursor: pointer;
&:hover {
text-decoration: underline;
}
}
}
</style>

7
schoolNewsWeb/src/components/base/TopNavigation.vue
View File

@@ -48,6 +48,8 @@
<div class="nav-right">
<!-- 搜索框 -->
<Search @search="handleSearch" />
<ChangeHome />
<Notice />
<UserDropdown :user="userInfo" @logout="handleLogout" />
</div>
</div>
@@ -61,8 +63,7 @@ import { useStore } from 'vuex';
import type { SysMenu } from '@/types';
import { MenuType } from '@/types/enums';
// @ts-ignore - Vue 3.5 组件导入兼容性
import {UserDropdown, Search} from '@/components/base';
import {UserDropdown, Search, Notice, ChangeHome} from '@/components/base';
const router = useRouter();
const route = useRoute();
const store = useStore();
@@ -462,7 +463,7 @@ function handleLogout() {
margin-left: auto;
display: flex;
flex-shrink: 0; /* 防止右侧区域被压缩 */
gap: 20px;
// gap: 20px;
align-items: center;
// 添加搜索框样式

4
schoolNewsWeb/src/components/base/index.ts
View File

@@ -9,4 +9,6 @@ export { default as UserDropdown } from './UserDropdown.vue';
export { default as Search } from './Search.vue';
export { default as CenterHead } from './CenterHead.vue';
export { default as GenericSelector } from './GenericSelector.vue';
export { default as TreeNode } from './TreeNode.vue';
export { default as TreeNode } from './TreeNode.vue';
export { default as Notice } from './Notice.vue';
export { default as ChangeHome } from './ChangeHome.vue';

19
schoolNewsWeb/src/layouts/RoutePlaceholder.vue Normal file
View File

@@ -0,0 +1,19 @@
<template>
<div class="route-placeholder">
<router-view />
</div>
</template>
<script setup lang="ts">
// 路由占位组件，用于没有实际组件的路由节点
// 仅作为 router-view 的容器，不影响布局样式
</script>
<style lang="scss" scoped>
.route-placeholder {
width: 100%;
height: 100%;
display: block;
}
</style>

5
schoolNewsWeb/src/layouts/SidebarLayout.vue
View File

@@ -19,6 +19,7 @@
<!-- 导航菜单 -->
<nav class="sidebar-nav">
<ChangeHome />
<MenuSidebar
:menus="sidebarMenus"
:collapsed="false"
@@ -49,7 +50,7 @@ import { useRoute, useRouter } from 'vue-router';
import { useStore } from 'vuex';
import type { SysMenu } from '@/types';
import { MenuType } from '@/types/enums';
import { MenuSidebar } from '@/components';
import { MenuSidebar, ChangeHome } from '@/components';
const route = useRoute();
const router = useRouter();
@@ -214,7 +215,7 @@ function handleMenuClick(menu: SysMenu) {
overflow-y: auto;
padding: 20px;
box-sizing: border-box;
widows: 100vw;
// 美化滚动条
&::-webkit-scrollbar {
width: 8px;

21
schoolNewsWeb/src/utils/route-generator.ts
View File

@@ -23,6 +23,10 @@ const LAYOUT_MAP: Record<string, () => Promise<any>> = {
'BlankLayout': () => import('@/layouts/BlankLayout.vue'),
// 页面布局
'PageLayout': () => import('@/layouts/PageLayout.vue'),
// 路由占位组件（用于没有组件的子路由）
'RoutePlaceholder': () => import('@/layouts/RoutePlaceholder.vue'),
// 用户中心布局（有共用区域，避免重复查询）
'UserCenterLayout': () => import('@/views/user/user-center/UserCenterLayout.vue'),
};
/**
@@ -122,10 +126,20 @@ function generateRouteFromMenu(menu: SysMenu, isTopLevel = true): RouteRecordRaw
const layout = isTopLevel ? (menu as any).layout : null;
const hasChildren = menu.children && menu.children.length > 0;
// 检查 component 是否是布局组件（优先检查 LAYOUT_MAP，再检查名称）
const isComponentLayout = menu.component && (
LAYOUT_MAP[menu.component] ||
(typeof menu.component === 'string' && menu.component.includes('Layout'))
);
// 确定路由组件
if (layout && LAYOUT_MAP[layout]) {
// 如果指定了布局，使用指定的布局
route.component = getComponent(layout);
} else if (isComponentLayout && hasChildren && isTopLevel && menu.component) {
// 如果 component 是布局组件且有子菜单，使用该布局组件作为父路由组件
// 这样可以确保布局只渲染一次，共用区域的数据也只查询一次
route.component = getComponent(menu.component);
} else if (hasChildren && isTopLevel) {
// 如果有子菜单但没有指定布局，根据菜单类型选择默认布局
if (menu.type === MenuType.NAVIGATION) {
@@ -141,8 +155,8 @@ function generateRouteFromMenu(menu: SysMenu, isTopLevel = true): RouteRecordRaw
if (menu.component) {
route.component = getComponent(menu.component);
} else {
// 非顶层菜单没有组件时，使用简单的占位组件
route.component = getComponent('BlankLayout');
// 非顶层菜单没有组件时，使用路由占位组件（不影响布局样式）
route.component = getComponent('RoutePlaceholder');
}
}
@@ -173,7 +187,8 @@ function generateRouteFromMenu(menu: SysMenu, isTopLevel = true): RouteRecordRaw
});
// 当前菜单指定了页面组件时，即使存在子菜单也应当渲染该页面
if (menu.component) {
// 但如果 component 是布局组件，则不应该创建 path: '' 的子路由（因为布局组件已经是父路由的组件了）
if (menu.component && !isComponentLayout) {
route.children!.push({
path: '',
name: `${menu.menuID}_page`,

18
schoolNewsWeb/src/utils/routeUtils.ts
View File

@@ -14,6 +14,20 @@ export function getParentChildrenRoutes(route: RouteLocationNormalized): RouteRe
return [];
}
// 返回有 title 的子路由
return parentRoute.children.filter((child: RouteRecordRaw) => child.meta?.title);
// 返回有 title 的子路由，但排除父路由本身（path 为空字符串或 name 以 _page 结尾的子路由）
return parentRoute.children.filter((child: RouteRecordRaw) => {
// 必须有 title
if (!child.meta?.title) {
return false;
}
// 排除 path 为空字符串的子路由（代表父路由本身）
if (child.path === '' || child.path === undefined) {
return false;
}
// 排除 name 以 _page 结尾的子路由（父路由的默认子路由）
if (typeof child.name === 'string' && child.name.endsWith('_page')) {
return false;
}
return true;
});
}

2
schoolNewsWeb/src/views/user/message/MyMessageDetailView.vue
View File

@@ -3,7 +3,7 @@
<div class="header">
<el-button @click="handleBack" text>
<el-icon><ArrowLeft /></el-icon>
返回消息列表
返回
</el-button>
</div>

130
schoolNewsWeb/src/views/user/profile/PersonalInfoView.vue
View File

@@ -1,130 +0,0 @@
<template>
<div class="personal-info">
<el-form :model="userForm" label-width="120px" class="info-form">
<el-form-item label="头像">
<div class="avatar-upload">
<img :src="userForm.avatar || defaultAvatar" alt="头像" class="avatar-preview" />
<el-button size="small" @click="handleAvatarUpload">更换头像</el-button>
</div>
</el-form-item>
<el-form-item label="用户名">
<el-input v-model="userForm.username" disabled />
</el-form-item>
<el-form-item label="姓名">
<el-input v-model="userForm.realName" />
</el-form-item>
<el-form-item label="性别">
<el-radio-group v-model="userForm.gender">
<el-radio :label="1">男</el-radio>
<el-radio :label="2">女</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="手机号">
<el-input v-model="userForm.phone" />
</el-form-item>
<el-form-item label="邮箱">
<el-input v-model="userForm.email" />
</el-form-item>
<el-form-item label="部门">
<el-input v-model="userForm.deptName" disabled />
</el-form-item>
<el-form-item label="个人简介">
<el-input
v-model="userForm.bio"
type="textarea"
:rows="4"
placeholder="介绍一下自己吧..."
/>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleSave">保存</el-button>
<el-button @click="handleCancel">取消</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { ElForm, ElFormItem, ElInput, ElButton, ElRadio, ElRadioGroup, ElMessage } from 'element-plus';
// 默认头像
const defaultAvatar = new URL('@/assets/imgs/default-avatar.png', import.meta.url).href;
const userForm = ref({
avatar: '',
username: '',
realName: '',
gender: 1,
phone: '',
email: '',
deptName: '',
bio: ''
});
onMounted(() => {
// TODO: 加载用户信息
loadUserInfo();
});
function loadUserInfo() {
// 模拟数据
userForm.value = {
avatar: '',
username: '平台用户bc7a1b',
realName: '张三',
gender: 1,
phone: '15268425987',
email: 'zhangsan@example.com',
deptName: '机械学院',
bio: ''
};
}
function handleAvatarUpload() {
// TODO: 上传头像
ElMessage.info('上传头像功能开发中');
}
function handleSave() {
// TODO: 保存用户信息
ElMessage.success('保存成功');
}
function handleCancel() {
// 重置表单
loadUserInfo();
}
</script>
<style lang="scss" scoped>
.personal-info {
max-width: 600px;
}
.info-form {
padding: 20px 0;
}
.avatar-upload {
display: flex;
align-items: center;
gap: 20px;
}
.avatar-preview {
width: 80px;
height: 80px;
border-radius: 50%;
object-fit: cover;
border: 2px solid #e0e0e0;
}
</style>

87
schoolNewsWeb/src/views/user/profile/ProfileView.vue
View File

@@ -1,87 +0,0 @@
<template>
<div class="user-center-page">
<div class="user-card-wrapper">
<UserCard/>
</div>
<div class="content-wrapper">
<div class="sidebar-wrapper">
<FloatingSidebar :menus="menus" />
</div>
<div class="main-content">
<router-view/>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { computed } from 'vue';
import { useRoute } from 'vue-router';
import { FloatingSidebar } from '@/components/base';
import { UserCard } from '@/views/user/user-center/components';
import { getParentChildrenRoutes } from '@/utils/routeUtils';
import type { SysMenu } from '@/types/menu';
const route = useRoute();
// 从当前路由配置中获取子路由，转换为菜单格式
const menus = computed(() => {
// 使用工具函数获取父路由的子路由
const childRoutes = getParentChildrenRoutes(route);
if (childRoutes.length === 0) {
return [];
}
// 获取父路由路径（用于拼接相对路径）
const parentRoute = route.matched[route.matched.length - 2];
// 将子路由转换为菜单格式
return childRoutes
.map((child: any) => ({
menuID: child.name as string || child.path,
name: child.meta?.title as string,
url: child.path.startsWith('/') ? child.path : `${parentRoute.path}/${child.path}`,
icon: child.meta?.icon as string,
orderNum: child.meta?.orderNum as number || 0,
} as SysMenu))
.sort((a: any, b: any) => (a.orderNum || 0) - (b.orderNum || 0));
});
</script>
<style lang="scss" scoped>
.user-center-page {
min-height: 100vh;
background: #f5f5f5;
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
}
.user-card-wrapper {
width: 100%;
display: flex;
justify-content: center;
}
.content-wrapper {
width: 100%;
max-width: 1200px;
display: flex;
gap: 20px;
}
.sidebar-wrapper {
flex-shrink: 0;
}
.main-content {
flex: 1;
background: white;
border-radius: 8px;
padding: 20px;
}
</style>

72
schoolNewsWeb/src/views/user/user-center/LearningRecordsView.vue
View File

@@ -1,45 +1,42 @@
<template>
<div class="learning-records">
<div class="records-header">
<h2>学习记录</h2>
<el-date-picker
v-model="dateRange"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
@change="handleDateChange"
/>
</div>
<div class="records-list">
<div class="record-item" v-for="record in records" :key="record.id">
<div class="record-icon">
<i :class="getRecordIcon(record.type)"></i>
<div class="learning-records">
<div class="records-header">
<h2>学习记录</h2>
<el-date-picker v-model="dateRange" type="daterange" range-separator="至" start-placeholder="开始日期"
end-placeholder="结束日期" @change="handleDateChange" />
</div>
<div class="record-content">
<h3>{{ record.title }}</h3>
<p class="record-description">{{ record.description }}</p>
<div class="record-meta">
<span class="record-type">{{ record.typeName }}</span>
<span class="record-duration">学习时长：{{ record.duration }}分钟</span>
<span class="record-date">{{ record.learnDate }}</span>
</div>
</div>
<div class="record-progress">
<div class="progress-circle" :class="`progress-${record.status}`">
<span>{{ record.progress }}%</span>
<div class="records-list">
<div class="record-item" v-for="record in records" :key="record.id">
<div class="record-icon">
<i :class="getRecordIcon(record.type)"></i>
</div>
<div class="record-content">
<h3>{{ record.title }}</h3>
<p class="record-description">{{ record.description }}</p>
<div class="record-meta">
<span class="record-type">{{ record.typeName }}</span>
<span class="record-duration">学习时长：{{ record.duration }}分钟</span>
<span class="record-date">{{ record.learnDate }}</span>
</div>
</div>
<div class="record-progress">
<div class="progress-circle" :class="`progress-${record.status}`">
<span>{{ record.progress }}%</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { ElDatePicker } from 'element-plus';
import { UserCenterLayout } from '@/views/user/user-center';
const dateRange = ref<[Date, Date] | null>(null);
const records = ref<any[]>([]);
@@ -69,7 +66,7 @@ function getRecordIcon(type: string) {
justify-content: space-between;
align-items: center;
margin-bottom: 32px;
h2 {
font-size: 24px;
font-weight: 600;
@@ -92,7 +89,7 @@ function getRecordIcon(type: string) {
border: 1px solid #e0e0e0;
border-radius: 8px;
transition: all 0.3s;
&:hover {
border-color: #C62828;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
@@ -113,7 +110,7 @@ function getRecordIcon(type: string) {
.record-content {
flex: 1;
h3 {
font-size: 18px;
font-weight: 600;
@@ -157,21 +154,20 @@ function getRecordIcon(type: string) {
justify-content: center;
font-size: 14px;
font-weight: 600;
&.progress-completed {
background: #e8f5e9;
color: #4caf50;
}
&.progress-in-progress {
background: #fff3e0;
color: #ff9800;
}
&.progress-not-started {
background: #f5f5f5;
color: #999;
}
}
</style>

299
schoolNewsWeb/src/views/user/user-center/MyAchievementsView.vue
View File

@@ -1,130 +1,124 @@
<template>
<div class="my-achievements">
<div class="achievements-header">
<h2>我的成就</h2>
<div class="achievement-stats">
<div class="stat-item">
<span class="stat-label">已获得</span>
<span class="stat-value">{{ earnedCount }}</span>
<span class="stat-total"> / {{ totalCount }}</span>
<div class="my-achievements">
<div class="achievements-header">
<h2>我的成就</h2>
<div class="achievement-stats">
<div class="stat-item">
<span class="stat-label">已获得</span>
<span class="stat-value">{{ earnedCount }}</span>
<span class="stat-total"> / {{ totalCount }}</span>
</div>
<div class="stat-item">
<span class="stat-label">完成率</span>
<span class="stat-value">{{ completionRate }}%</span>
</div>
</div>
</div>
<div class="stat-item">
<span class="stat-label">完成率</span>
<span class="stat-value">{{ completionRate }}%</span>
<!-- 成就类型筛选 -->
<div class="filter-tabs">
<el-radio-group v-model="selectedType" @change="filterAchievements">
<el-radio-button :label="undefined">全部</el-radio-button>
<el-radio-button v-for="option in achievementTypeOptions" :key="option.value" :label="option.value">
{{ option.label }}
</el-radio-button>
</el-radio-group>
<el-checkbox v-model="showOnlyEarned" @change="filterAchievements">
仅显示已获得
</el-checkbox>
</div>
</div>
</div>
<!-- 成就类型筛选 -->
<div class="filter-tabs">
<el-radio-group v-model="selectedType" @change="filterAchievements">
<el-radio-button :label="undefined">全部</el-radio-button>
<el-radio-button
v-for="option in achievementTypeOptions"
:key="option.value"
:label="option.value"
>
{{ option.label }}
</el-radio-button>
</el-radio-group>
<el-checkbox v-model="showOnlyEarned" @change="filterAchievements">
仅显示已获得
</el-checkbox>
</div>
<!-- 加载状态 -->
<div v-if="loading" class="loading-container">
<el-skeleton :rows="3" animated />
</div>
<!-- 加载状态 -->
<div v-if="loading" class="loading-container">
<el-skeleton :rows="3" animated />
</div>
<!-- 成就网格 -->
<div v-else class="achievements-grid">
<div
class="achievement-item"
v-for="achievement in filteredAchievements"
:key="achievement.achievementID"
:class="{ earned: achievement.obtained, locked: !achievement.obtained }"
>
<div class="achievement-icon">
<el-image
:src="getIconUrl(achievement.icon)"
:alt="achievement.name"
fit="contain"
>
<template #error>
<div class="image-placeholder">
<el-icon><Trophy /></el-icon>
<!-- 成就网格 -->
<div v-else class="achievements-grid">
<div class="achievement-item" v-for="achievement in filteredAchievements" :key="achievement.achievementID"
:class="{ earned: achievement.obtained, locked: !achievement.obtained }">
<div class="achievement-icon">
<el-image :src="getIconUrl(achievement.icon)" :alt="achievement.name" fit="contain">
<template #error>
<div class="image-placeholder">
<el-icon>
<Trophy />
</el-icon>
</div>
</template>
</el-image>
<div class="achievement-badge" v-if="achievement.obtained">
<el-icon>
<Check />
</el-icon>
</div>
<div class="achievement-level" v-if="achievement.level">
Lv.{{ achievement.level }}
</div>
</template>
</el-image>
<div class="achievement-badge" v-if="achievement.obtained">
<el-icon><Check /></el-icon>
</div>
<div class="achievement-level" v-if="achievement.level">
Lv.{{ achievement.level }}
</div>
</div>
<div class="achievement-info">
<div class="achievement-header">
<h3>{{ achievement.name }}</h3>
<el-tag
:type="achievement.type === 1 ? 'success' : 'primary'"
size="small"
>
{{ getAchievementTypeLabel(achievement.type) }}
</el-tag>
</div>
<p class="achievement-description">{{ achievement.description }}</p>
<!-- 条件说明 -->
<div class="achievement-condition">
<el-icon><InfoFilled /></el-icon>
<span>{{ formatConditionValue(achievement.conditionType, achievement.conditionValue) }}</span>
</div>
<!-- 进度条 -->
<div class="achievement-progress" v-if="!achievement.obtained">
<div class="progress-info">
<span class="progress-label">进度</span>
<span class="progress-text">
{{ achievement.currentValue || 0 }} / {{ achievement.targetValue || achievement.conditionValue }}
</span>
</div>
<el-progress
:percentage="achievement.progressPercentage || 0"
:color="progressColor"
:show-text="false"
/>
</div>
<!-- 获得信息 -->
<div class="achievement-footer" v-if="achievement.obtained">
<div class="achievement-date">
<el-icon><Calendar /></el-icon>
<span>{{ formatDate(achievement.obtainTime) }}</span>
</div>
<div class="achievement-points" v-if="achievement.points">
<el-icon><Star /></el-icon>
<span>+{{ achievement.points }} 积分</span>
</div>
</div>
<!-- 未获得时显示积分奖励 -->
<div class="achievement-reward" v-else-if="achievement.points">
<el-icon><Present /></el-icon>
<span>奖励 {{ achievement.points }} 积分</span>
</div>
</div>
</div>
</div>
<div class="achievement-info">
<div class="achievement-header">
<h3>{{ achievement.name }}</h3>
<el-tag :type="achievement.type === 1 ? 'success' : 'primary'" size="small">
{{ getAchievementTypeLabel(achievement.type) }}
</el-tag>
</div>
<p class="achievement-description">{{ achievement.description }}</p>
<!-- 条件说明 -->
<div class="achievement-condition">
<el-icon>
<InfoFilled />
</el-icon>
<span>{{ formatConditionValue(achievement.conditionType, achievement.conditionValue) }}</span>
</div>
<!-- 进度条 -->
<div class="achievement-progress" v-if="!achievement.obtained">
<div class="progress-info">
<span class="progress-label">进度</span>
<span class="progress-text">
{{ achievement.currentValue || 0 }} / {{ achievement.targetValue || achievement.conditionValue }}
</span>
</div>
<el-progress :percentage="achievement.progressPercentage || 0" :color="progressColor"
:show-text="false" />
</div>
<!-- 获得信息 -->
<div class="achievement-footer" v-if="achievement.obtained">
<div class="achievement-date">
<el-icon>
<Calendar />
</el-icon>
<span>{{ formatDate(achievement.obtainTime) }}</span>
</div>
<div class="achievement-points" v-if="achievement.points">
<el-icon>
<Star />
</el-icon>
<span>+{{ achievement.points }} 积分</span>
</div>
</div>
<!-- 未获得时显示积分奖励 -->
<div class="achievement-reward" v-else-if="achievement.points">
<el-icon>
<Present />
</el-icon>
<span>奖励 {{ achievement.points }} 积分</span>
</div>
</div>
</div>
</div>
<!-- 空状态 -->
<el-empty v-if="!loading && filteredAchievements.length === 0" description="暂无成就数据" />
</div>
<!-- 空状态 -->
<el-empty
v-if="!loading && filteredAchievements.length === 0"
description="暂无成就数据"
/>
</div>
</template>
<script setup lang="ts">
@@ -135,7 +129,7 @@ import { achievementApi } from '@/apis/achievement';
import type { AchievementVO } from '@/types';
import { AchievementEnumHelper } from '@/types/enums/achievement-enums';
import { getAchievementIconUrl } from '@/utils/iconUtils';
import { UserCenterLayout } from '@/views/user/user-center';
// 响应式数据
const loading = ref(false);
const achievements = ref<AchievementVO[]>([]);
@@ -171,17 +165,17 @@ const completionRate = computed(() => {
// 筛选后的成就列表
const filteredAchievements = computed(() => {
let result = achievements.value;
// 按类型筛选
if (selectedType.value !== undefined) {
result = result.filter(a => a.type === selectedType.value);
}
// 仅显示已获得
if (showOnlyEarned.value) {
result = result.filter(a => a.obtained);
}
// 排序：已获得的在前，按等级排序
return result.sort((a, b) => {
if (a.obtained !== b.obtained) {
@@ -207,10 +201,10 @@ function formatConditionValue(conditionType?: number, conditionValue?: number):
function formatDate(dateStr?: string): string {
if (!dateStr) return '';
const date = new Date(dateStr);
return date.toLocaleDateString('zh-CN', {
year: 'numeric',
month: '2-digit',
day: '2-digit'
return date.toLocaleDateString('zh-CN', {
year: 'numeric',
month: '2-digit',
day: '2-digit'
});
}
@@ -252,7 +246,7 @@ onMounted(() => {
justify-content: space-between;
align-items: center;
height: 10%;
h2 {
font-size: 28px;
font-weight: 600;
@@ -265,23 +259,23 @@ onMounted(() => {
.achievement-stats {
display: flex;
gap: 20px;
.stat-item {
display: flex;
align-items: baseline;
gap: 8px;
.stat-label {
font-size: 14px;
color: #666;
}
.stat-value {
font-size: 24px;
font-weight: 600;
color: #C62828;
}
.stat-total {
font-size: 16px;
color: #999;
@@ -320,33 +314,33 @@ onMounted(() => {
border-radius: 12px;
transition: all 0.3s;
background: white;
&.earned {
border-color: #52c41a;
background: linear-gradient(135deg, #f6ffed, #ffffff);
.achievement-icon {
:deep(.el-image__inner) {
filter: none;
}
}
}
&.locked {
opacity: 0.75;
.achievement-icon {
:deep(.el-image__inner) {
filter: grayscale(100%);
}
}
}
&:hover.earned {
box-shadow: 0 4px 16px rgba(82, 196, 26, 0.3);
transform: translateY(-2px);
}
&:hover.locked {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
@@ -357,12 +351,12 @@ onMounted(() => {
width: 80px;
height: 80px;
flex-shrink: 0;
:deep(.el-image) {
width: 100%;
height: 100%;
}
.image-placeholder {
width: 100%;
height: 100%;
@@ -414,13 +408,13 @@ onMounted(() => {
display: flex;
flex-direction: column;
gap: 8px;
.achievement-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 12px;
h3 {
font-size: 18px;
font-weight: 600;
@@ -447,7 +441,7 @@ onMounted(() => {
padding: 6px 12px;
background: #fafafa;
border-radius: 6px;
:deep(.el-icon) {
font-size: 14px;
}
@@ -459,20 +453,20 @@ onMounted(() => {
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
.progress-label {
font-size: 13px;
color: #666;
font-weight: 500;
}
.progress-text {
font-size: 13px;
color: #1890ff;
font-weight: 600;
}
}
:deep(.el-progress) {
.el-progress-bar__outer {
background-color: #f0f0f0;
@@ -486,7 +480,7 @@ onMounted(() => {
align-items: center;
padding-top: 8px;
border-top: 1px solid #f0f0f0;
.achievement-date,
.achievement-points {
display: flex;
@@ -494,12 +488,12 @@ onMounted(() => {
gap: 6px;
font-size: 13px;
color: #666;
:deep(.el-icon) {
font-size: 14px;
}
}
.achievement-points {
color: #faad14;
font-weight: 600;
@@ -516,7 +510,7 @@ onMounted(() => {
padding: 6px 12px;
background: #fffbe6;
border-radius: 6px;
:deep(.el-icon) {
font-size: 14px;
}
@@ -533,12 +527,12 @@ onMounted(() => {
.achievements-grid {
grid-template-columns: 1fr;
}
.achievement-stats {
flex-direction: column;
gap: 16px;
}
.filter-tabs {
flex-direction: column;
gap: 16px;
@@ -546,4 +540,3 @@ onMounted(() => {
}
}
</style>

39
schoolNewsWeb/src/views/user/user-center/MyFavoritesView.vue
View File

@@ -1,15 +1,11 @@
<template>
<div class="my-favorites">
<div class="favorites-header">
<h2>我的收藏</h2>
<div class="filter-tabs">
<div
class="filter-tab"
v-for="filter in filters"
:key="String(filter.key)"
:class="{ active: activeFilter === filter.key }"
@click="activeFilter = filter.key"
>
<div class="filter-tab" v-for="filter in filters" :key="String(filter.key)"
:class="{ active: activeFilter === filter.key }" @click="activeFilter = filter.key">
{{ filter.label }}
</div>
</div>
@@ -20,7 +16,9 @@
<div class="item-thumbnail">
<img v-if="getThumbnail(item)" :src="getThumbnail(item)" :alt="getTitle(item)" />
<div v-else class="thumbnail-placeholder">
<el-icon :size="48"><Document /></el-icon>
<el-icon :size="48">
<Document />
</el-icon>
</div>
<div class="item-type">{{ getTypeName(item) }}</div>
</div>
@@ -39,11 +37,15 @@
<!-- 空状态 -->
<div v-if="!loading && filteredFavorites.length === 0" class="empty-state">
<el-icon :size="64" class="empty-icon"><Star /></el-icon>
<el-icon :size="64" class="empty-icon">
<Star />
</el-icon>
<p>暂无收藏内容</p>
</div>
</div>
</div>
</template>
<script setup lang="ts">
@@ -134,7 +136,7 @@ async function loadFavorites() {
loading.value = true;
try {
const result = await userCollectionApi.getUserCollections(currentUser.value.id);
if (result.success && result.dataList) {
// 后端已返回扁平化的VO，包含详情，无需再次查询
favorites.value = result.dataList;
@@ -213,7 +215,7 @@ function formatDate(dateStr?: string): string {
justify-content: space-between;
align-items: center;
margin-bottom: 32px;
h2 {
font-size: 24px;
font-weight: 600;
@@ -235,12 +237,12 @@ function formatDate(dateStr?: string): string {
color: #666;
cursor: pointer;
transition: all 0.3s;
&:hover {
background: #ffe6e6;
color: #C62828;
}
&.active {
background: #C62828;
color: white;
@@ -258,7 +260,7 @@ function formatDate(dateStr?: string): string {
border-radius: 8px;
overflow: hidden;
transition: all 0.3s;
&:hover {
border-color: #C62828;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
@@ -270,7 +272,7 @@ function formatDate(dateStr?: string): string {
width: 100%;
height: 180px;
background: #f5f5f5;
img {
width: 100%;
height: 100%;
@@ -291,7 +293,7 @@ function formatDate(dateStr?: string): string {
.item-info {
padding: 16px;
h3 {
font-size: 16px;
font-weight: 600;
@@ -348,16 +350,15 @@ function formatDate(dateStr?: string): string {
justify-content: center;
padding: 80px 20px;
color: #999;
.empty-icon {
margin-bottom: 16px;
color: #ddd;
}
p {
font-size: 16px;
margin: 0;
}
}
</style>

12
schoolNewsWeb/src/views/user/user-center/UserCenterView.vue → schoolNewsWeb/src/views/user/user-center/UserCenterLayout.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="user-center-page">
<div class="user-card-wrapper">
<UserCard/>
<UserCard />
</div>
<div class="content-wrapper">
<div class="sidebar-wrapper">
@@ -28,14 +28,15 @@ const route = useRoute();
const menus = computed(() => {
// 使用工具函数获取父路由的子路由
const childRoutes = getParentChildrenRoutes(route);
console.log(childRoutes);
console.log(route)
if (childRoutes.length === 0) {
return [];
}
// 获取父路由路径（用于拼接相对路径）
const parentRoute = route.matched[route.matched.length - 2];
// 将子路由转换为菜单格式
return childRoutes
.map((child: any) => ({
@@ -57,7 +58,7 @@ const menus = computed(() => {
flex-direction: column;
align-items: center;
gap: 20px;
height: 100%;
height: calc(100vh - 76px);
// overflow-y: auto;
}
@@ -87,4 +88,3 @@ const menus = computed(() => {
padding: 20px;
}
</style>

1
schoolNewsWeb/src/views/user/user-center/index.ts Normal file
View File

@@ -0,0 +1 @@
export { default as UserCenterLayout } from './UserCenterLayout.vue';

104
schoolNewsWeb/src/views/user/profile/AccountSettingsView.vue → schoolNewsWeb/src/views/user/user-center/profile/AccountSettingsView.vue
View File

@@ -1,59 +1,62 @@
<template>
<div class="account-settings">
<div class="settings-section">
<h3>修改密码</h3>
<el-form :model="passwordForm" :rules="passwordRules" ref="passwordFormRef" label-width="120px">
<el-form-item label="当前密码" prop="oldPassword">
<el-input v-model="passwordForm.oldPassword" type="password" show-password />
</el-form-item>
<el-form-item label="新密码" prop="newPassword">
<el-input v-model="passwordForm.newPassword" type="password" show-password />
</el-form-item>
<el-form-item label="确认密码" prop="confirmPassword">
<el-input v-model="passwordForm.confirmPassword" type="password" show-password />
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleChangePassword">修改密码</el-button>
</el-form-item>
</el-form>
</div>
<div class="settings-section">
<h3>账号安全</h3>
<div class="security-items">
<div class="security-item">
<div class="item-info">
<i class="icon">📱</i>
<div>
<h4>手机绑定</h4>
<p>已绑定手机：138****8888</p>
</div>
</div>
<el-button size="small">修改</el-button>
<div class="account-settings">
<div class="settings-section">
<h3>修改密码</h3>
<el-form :model="passwordForm" :rules="passwordRules" ref="passwordFormRef" label-width="120px">
<el-form-item label="当前密码" prop="oldPassword">
<el-input v-model="passwordForm.oldPassword" type="password" show-password />
</el-form-item>
<el-form-item label="新密码" prop="newPassword">
<el-input v-model="passwordForm.newPassword" type="password" show-password />
</el-form-item>
<el-form-item label="确认密码" prop="confirmPassword">
<el-input v-model="passwordForm.confirmPassword" type="password" show-password />
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleChangePassword">修改密码</el-button>
</el-form-item>
</el-form>
</div>
<div class="security-item">
<div class="item-info">
<i class="icon">✉️</i>
<div>
<h4>邮箱绑定</h4>
<p>已绑定邮箱：user@example.com</p>
<div class="settings-section">
<h3>账号安全</h3>
<div class="security-items">
<div class="security-item">
<div class="item-info">
<i class="icon">📱</i>
<div>
<h4>手机绑定</h4>
<p>已绑定手机：138****8888</p>
</div>
</div>
<el-button size="small">修改</el-button>
</div>
<div class="security-item">
<div class="item-info">
<i class="icon">✉️</i>
<div>
<h4>邮箱绑定</h4>
<p>已绑定邮箱：user@example.com</p>
</div>
</div>
<el-button size="small">修改</el-button>
</div>
</div>
<el-button size="small">修改</el-button>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { ElForm, ElFormItem, ElInput, ElButton, ElMessage, type FormInstance, type FormRules } from 'element-plus';
import { UserCenterLayout } from '@/views/user/user-center';
const passwordFormRef = ref<FormInstance>();
const passwordForm = ref({
@@ -87,7 +90,7 @@ const passwordRules: FormRules = {
async function handleChangePassword() {
if (!passwordFormRef.value) return;
try {
await passwordFormRef.value.validate();
// TODO: 调用修改密码API
@@ -107,11 +110,11 @@ async function handleChangePassword() {
.settings-section {
padding: 24px 0;
border-bottom: 1px solid #e0e0e0;
&:last-child {
border-bottom: none;
}
h3 {
font-size: 20px;
font-weight: 600;
@@ -139,22 +142,21 @@ async function handleChangePassword() {
display: flex;
align-items: center;
gap: 16px;
.icon {
font-size: 32px;
}
h4 {
font-size: 16px;
font-weight: 600;
color: #141F38;
margin-bottom: 4px;
}
p {
font-size: 14px;
color: #666;
}
}
</style>

128
schoolNewsWeb/src/views/user/user-center/profile/PersonalInfoView.vue Normal file
View File

@@ -0,0 +1,128 @@
<template>
<div class="personal-info">
<el-form :model="userForm" label-width="120px" class="info-form">
<el-form-item label="头像">
<div class="avatar-upload">
<img :src="userForm.avatar || defaultAvatar" alt="头像" class="avatar-preview" />
<el-button size="small" @click="handleAvatarUpload">更换头像</el-button>
</div>
</el-form-item>
<el-form-item label="用户名">
<el-input v-model="userForm.username" disabled />
</el-form-item>
<el-form-item label="姓名">
<el-input v-model="userForm.realName" />
</el-form-item>
<el-form-item label="性别">
<el-radio-group v-model="userForm.gender">
<el-radio :label="1">男</el-radio>
<el-radio :label="2">女</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="手机号">
<el-input v-model="userForm.phone" />
</el-form-item>
<el-form-item label="邮箱">
<el-input v-model="userForm.email" />
</el-form-item>
<el-form-item label="部门">
<el-input v-model="userForm.deptName" disabled />
</el-form-item>
<el-form-item label="个人简介">
<el-input v-model="userForm.bio" type="textarea" :rows="4" placeholder="介绍一下自己吧..." />
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleSave">保存</el-button>
<el-button @click="handleCancel">取消</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { ElForm, ElFormItem, ElInput, ElButton, ElRadio, ElRadioGroup, ElMessage } from 'element-plus';
import { UserCenterLayout } from '@/views/user/user-center';
// 默认头像
const defaultAvatar = new URL('@/assets/imgs/default-avatar.png', import.meta.url).href;
const userForm = ref({
avatar: '',
username: '',
realName: '',
gender: 1,
phone: '',
email: '',
deptName: '',
bio: ''
});
onMounted(() => {
// TODO: 加载用户信息
loadUserInfo();
});
function loadUserInfo() {
// 模拟数据
userForm.value = {
avatar: '',
username: '平台用户bc7a1b',
realName: '张三',
gender: 1,
phone: '15268425987',
email: 'zhangsan@example.com',
deptName: '机械学院',
bio: ''
};
}
function handleAvatarUpload() {
// TODO: 上传头像
ElMessage.info('上传头像功能开发中');
}
function handleSave() {
// TODO: 保存用户信息
ElMessage.success('保存成功');
}
function handleCancel() {
// 重置表单
loadUserInfo();
}
</script>
<style lang="scss" scoped>
.personal-info {
max-width: 600px;
}
.info-form {
padding: 20px 0;
}
.avatar-upload {
display: flex;
align-items: center;
gap: 20px;
}
.avatar-preview {
width: 80px;
height: 80px;
border-radius: 50%;
object-fit: cover;
border: 2px solid #e0e0e0;
}
</style>