界面
This commit is contained in:
@@ -3,7 +3,7 @@
|
||||
<div class="header">
|
||||
<el-button @click="handleBack" text>
|
||||
<el-icon><ArrowLeft /></el-icon>
|
||||
返回消息列表
|
||||
返回
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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
1
schoolNewsWeb/src/views/user/user-center/index.ts
Normal file
@@ -0,0 +1 @@
|
||||
export { default as UserCenterLayout } from './UserCenterLayout.vue';
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
Reference in New Issue
Block a user