web-usercenter更新
This commit is contained in:
@@ -1,74 +1,78 @@
|
||||
<template>
|
||||
<div class="user-center-page">
|
||||
<div class="user-banner">
|
||||
<div class="user-avatar">
|
||||
<img :src="userInfo.avatar" alt="用户头像" />
|
||||
</div>
|
||||
<div class="user-basic">
|
||||
<h2>{{ userInfo.name }}</h2>
|
||||
<p>{{ userInfo.bio }}</p>
|
||||
</div>
|
||||
<div class="user-stats">
|
||||
<div class="stat-item" v-for="stat in stats" :key="stat.label">
|
||||
<div class="stat-value">{{ stat.value }}</div>
|
||||
<div class="stat-label">{{ stat.label }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="user-card-wrapper">
|
||||
<UserCard/>
|
||||
</div>
|
||||
|
||||
<div class="center-tabs">
|
||||
<div
|
||||
class="center-tab"
|
||||
v-for="tab in tabs"
|
||||
:key="tab.key"
|
||||
:class="{ active: activeTab === tab.key }"
|
||||
@click="activeTab = tab.key"
|
||||
>
|
||||
{{ tab.label }}
|
||||
<div class="content-wrapper">
|
||||
<div class="sidebar-wrapper">
|
||||
<FloatingSidebar :menus="menus" />
|
||||
</div>
|
||||
<div class="main-content">
|
||||
<router-view/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="center-content">
|
||||
<component :is="currentComponent" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted } from 'vue';
|
||||
import { computed } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { useStore } from 'vuex';
|
||||
import LearningRecords from './components/LearningRecords.vue';
|
||||
import MyFavorites from './components/MyFavorites.vue';
|
||||
import MyAchievements from './components/MyAchievements.vue';
|
||||
import { FloatingSidebar } from '@/components/base';
|
||||
import UserCard from './components/UserCard.vue';
|
||||
import { MenuType } from '@/types/enums';
|
||||
import type { SysMenu } from '@/types/menu';
|
||||
|
||||
const route = useRoute();
|
||||
const store = useStore();
|
||||
const activeTab = ref('records');
|
||||
|
||||
const userInfo = computed(() => store.getters['auth/userInfo']);
|
||||
// 从 store 中获取当前用户的菜单列表
|
||||
const allMenus = computed(() => store.state.auth.menus as SysMenu[]);
|
||||
|
||||
const stats = ref([
|
||||
{ label: '学习天数', value: 0 },
|
||||
{ label: '学习时长', value: '0h' },
|
||||
{ label: '完成任务', value: 0 },
|
||||
{ label: '获得成就', value: 0 }
|
||||
]);
|
||||
|
||||
const tabs = [
|
||||
{ key: 'records', label: '学习记录' },
|
||||
{ key: 'favorites', label: '我的收藏' },
|
||||
{ key: 'achievements', label: '我的成就' }
|
||||
];
|
||||
|
||||
const componentMap: Record<string, any> = {
|
||||
'records': LearningRecords,
|
||||
'favorites': MyFavorites,
|
||||
'achievements': MyAchievements
|
||||
// 递归筛选出类型为 SIDEBAR 的菜单项（包含子菜单）
|
||||
const filterSidebarMenus = (menuList: SysMenu[]): SysMenu[] => {
|
||||
if (!menuList || menuList.length === 0) return [];
|
||||
|
||||
return menuList
|
||||
.filter(menu => menu.type === MenuType.SIDEBAR)
|
||||
.map(menu => {
|
||||
// 如果有子菜单，递归处理
|
||||
if (menu.children && menu.children.length > 0) {
|
||||
return {
|
||||
...menu,
|
||||
children: filterSidebarMenus(menu.children)
|
||||
};
|
||||
}
|
||||
return menu;
|
||||
});
|
||||
};
|
||||
|
||||
const currentComponent = computed(() => componentMap[activeTab.value]);
|
||||
// 查找当前路由对应的菜单项
|
||||
const findCurrentMenu = (menus: SysMenu[], path: string): SysMenu | null => {
|
||||
for (const menu of menus) {
|
||||
if (menu.url === path) {
|
||||
return menu;
|
||||
}
|
||||
if (menu.children && menu.children.length > 0) {
|
||||
const found = findCurrentMenu(menu.children, path);
|
||||
if (found) return found;
|
||||
}
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
// TODO: 加载用户统计数据
|
||||
// 获取当前路由对应的菜单及其子菜单（只显示 SIDEBAR 类型）
|
||||
const menus = computed(() => {
|
||||
const currentPath = route.path;
|
||||
const currentMenu = findCurrentMenu(allMenus.value, currentPath);
|
||||
|
||||
if (currentMenu && currentMenu.children) {
|
||||
// 递归筛选出 type === MenuType.SIDEBAR 的子菜单
|
||||
return filterSidebarMenus(currentMenu.children);
|
||||
}
|
||||
|
||||
// 如果没有找到当前菜单，返回所有 SIDEBAR 类型的菜单
|
||||
return filterSidebarMenus(allMenus.value);
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -77,109 +81,34 @@ onMounted(() => {
|
||||
min-height: 100vh;
|
||||
background: #f5f5f5;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.user-banner {
|
||||
background: linear-gradient(135deg, #C62828, #E53935);
|
||||
padding: 40px;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 32px;
|
||||
margin-bottom: 20px;
|
||||
color: white;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.user-avatar {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
border: 4px solid white;
|
||||
.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;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
.user-basic {
|
||||
.main-content {
|
||||
flex: 1;
|
||||
|
||||
h2 {
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 14px;
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
|
||||
.user-stats {
|
||||
display: flex;
|
||||
gap: 40px;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
text-align: center;
|
||||
|
||||
.stat-value {
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 14px;
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
|
||||
.center-tabs {
|
||||
background: white;
|
||||
padding: 0 40px;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
border-radius: 8px 8px 0 0;
|
||||
}
|
||||
|
||||
.center-tab {
|
||||
padding: 16px 24px;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
color: #666;
|
||||
position: relative;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:hover {
|
||||
color: #C62828;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: #C62828;
|
||||
font-weight: 600;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 3px;
|
||||
background: #C62828;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.center-content {
|
||||
background: white;
|
||||
border-radius: 0 0 8px 8px;
|
||||
padding: 40px;
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
269
schoolNewsWeb/src/views/user-center/components/UserCard.vue
Normal file
269
schoolNewsWeb/src/views/user-center/components/UserCard.vue
Normal file
@@ -0,0 +1,269 @@
|
||||
<template>
|
||||
<div class="user-card">
|
||||
<!-- 标题栏 -->
|
||||
<div class="card-header">
|
||||
<div class="title-wrapper">
|
||||
<div class="title-bar"></div>
|
||||
<h3 class="title">个人信息</h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 用户信息区域 -->
|
||||
<div class="user-info-section">
|
||||
<!-- 头像 -->
|
||||
<div class="avatar-wrapper">
|
||||
<img
|
||||
:src="userInfo?.avatar || defaultAvatar"
|
||||
:alt="userInfo?.nickname || userInfo?.username"
|
||||
class="avatar"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 用户详细信息 -->
|
||||
<div class="user-details">
|
||||
<!-- 用户名和性别 -->
|
||||
<div class="user-name-row">
|
||||
<span class="username">{{ userInfo?.nickname || userInfo?.username || '未设置昵称' }}</span>
|
||||
<div class="gender-tag" v-if="userInfo?.gender && genderIcon">
|
||||
<img :src="genderIcon" :alt="genderText" class="gender-icon" />
|
||||
<span class="gender-text">{{ genderText }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 详细信息 -->
|
||||
<div class="info-row">
|
||||
<span class="info-item">所属部门：{{ departmentName || '未分配部门' }}</span>
|
||||
<span class="info-item">联系方式：{{ userInfo?.phone || '未设置' }}</span>
|
||||
<div class="level-item">
|
||||
<span class="info-label">学习等级：</span>
|
||||
<img :src="arrowDownIcon" alt="等级" class="level-icon" />
|
||||
<span class="level-text">等级</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="edit-btn" @click="handleEdit">编辑资料</button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="UserCard">
|
||||
import { computed, ref, onMounted } from 'vue';
|
||||
import { useStore } from 'vuex';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { UserVO } from '@/types';
|
||||
import {userApi} from '@/apis/system/user'
|
||||
import defaultAvatarImg from '@/assets/imgs/default-avatar.png';
|
||||
import maleIcon from '@/assets/imgs/male.svg';
|
||||
import femaleIcon from '@/assets/imgs/female.svg';
|
||||
import arrowDownIcon from '@/assets/imgs/arrow-down.svg';
|
||||
|
||||
const store = useStore();
|
||||
const router = useRouter();
|
||||
|
||||
// 默认头像
|
||||
const defaultAvatar = defaultAvatarImg;
|
||||
|
||||
// 从 store 获取用户信息
|
||||
const loginDomain = computed(() => store.state.auth.loginDomain);
|
||||
const userInfo = ref<UserVO>();
|
||||
|
||||
// 获取部门名称
|
||||
const departmentName = computed(() => {
|
||||
const roles = loginDomain.value?.roles || [];
|
||||
if (roles.length > 0 && roles[0].dept) {
|
||||
return roles[0].dept.name;
|
||||
}
|
||||
return '';
|
||||
});
|
||||
|
||||
// 性别文本
|
||||
const genderText = computed(() => {
|
||||
const gender = userInfo.value?.gender;
|
||||
if (gender === 1) return '男';
|
||||
if (gender === 2) return '女';
|
||||
return '';
|
||||
});
|
||||
|
||||
// 性别图标
|
||||
const genderIcon = computed(() => {
|
||||
const gender = userInfo.value?.gender;
|
||||
if (gender === 1) return maleIcon;
|
||||
if (gender === 2) return femaleIcon;
|
||||
return '';
|
||||
});
|
||||
|
||||
// 编辑资料
|
||||
const handleEdit = () => {
|
||||
router.push('/profile/personal-info');
|
||||
};
|
||||
|
||||
onMounted(async () => {
|
||||
const res = await userApi.getCurrentUser();
|
||||
userInfo.value = res.data;
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.user-card {
|
||||
background: #FFFFFF;
|
||||
border-radius: 10px;
|
||||
max-width: 1200px;
|
||||
width: 100%;
|
||||
min-height: 190px;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.title-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.title-bar {
|
||||
width: 4px;
|
||||
height: 16px;
|
||||
background: #C62828;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-family: 'PingFang SC', sans-serif;
|
||||
font-weight: 600;
|
||||
font-size: 20px;
|
||||
line-height: 28px;
|
||||
color: #141F38;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.edit-btn {
|
||||
padding: 4px 16px;
|
||||
background: rgba(198, 40, 40, 0.05);
|
||||
border: 1px solid #C62828;
|
||||
border-radius: 4px;
|
||||
font-family: 'PingFang SC', sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
color: #C62828;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:hover {
|
||||
background: rgba(198, 40, 40, 0.1);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: rgba(198, 40, 40, 0.15);
|
||||
}
|
||||
}
|
||||
|
||||
.user-info-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.avatar-wrapper {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 82px;
|
||||
height: 82px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.user-details {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.user-name-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.username {
|
||||
font-family: 'PingFang SC', sans-serif;
|
||||
font-weight: 600;
|
||||
font-size: 20px;
|
||||
line-height: 24px;
|
||||
color: #141F38;
|
||||
}
|
||||
|
||||
.gender-tag {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
.gender-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.gender-text {
|
||||
font-family: 'PingFang SC', sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
color: #141F38;
|
||||
}
|
||||
|
||||
.info-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 40px;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
font-family: 'PingFang SC', sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
color: #334155;
|
||||
}
|
||||
|
||||
.level-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
font-family: 'PingFang SC', sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
color: #334155;
|
||||
}
|
||||
|
||||
.level-icon {
|
||||
width: 18px;
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
.level-text {
|
||||
font-family: 'PingFang SC', sans-serif;
|
||||
font-weight: 500;
|
||||
font-size: 12px;
|
||||
line-height: 24px;
|
||||
color: #334155;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user