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

[Claude Code] After prompt #0

Browse Source
This commit is contained in:
wangys
2025-11-25 17:49:10 +08:00
parent 48ee6442b3
commit e272dc5e79
50 changed files with 2463 additions and 549 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,124 +1,56 @@
<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>
<div class="stat-item">
<span class="stat-label">完成率</span>
<span class="stat-value">{{ completionRate }}%</span>
<div class="my-achievements">
<div class="level-achieve">
<!-- 用户当前的等级成就和下级成就进度 -->
<h1>我的等级</h1>
<div class="level">
<!-- 合并图标 -->
<div class="level-icons">
<!-- 星星图标 -->
<img class="level-star" :src="currentLevelStarIconUrl" alt="level-star" />
<!-- 等级图标 -->
<img class="level-badge" :src="currentLevelIconUrl" alt="level-icon" />
</div>
<!-- 等级文字图标 -->
<img class="level-word" :src="currentLevelWordIconUrl" alt="level-word" />
<!-- 距离下级时间 -->
<span class="next-tip">{{ nextDeltaText }}</span>
<!-- 进度条 -->
<el-progress :percentage="nextProgress" :color="progressColor" :stroke-width="12" />
<div class="level-range">
<!-- 起始等级 -->
<span class="start-level">Lv.{{ currentLevelDisplay }}</span>
<!-- 下级等级 -->
<span class="next-level">{{ nextLevelDisplay }}</span>
</div>
</div>
</div>
<div class="badge-achieve">
<!-- 用户已获得的勋章成就 -->
<h1>我的勋章</h1>
<!-- 勋章列表 -->
<div class="achievement-list">
<!-- 单个勋章 -->
<div
v-for="(a, idx) in filteredBadgeAchievements"
:key="a.achievementID || idx"
class="achievement-item"
:class="{ obtained: a.obtained }"
>
<div class="achv-name-wrap">
<!-- span在img里面渲染效果 -->
<img src="@/assets/imgs/achievement-name.svg"/>
<span class="achv-name">{{ a.name }}</span>
</div>
<!-- 成就图标 -->
<img class="achv-icon" :src="getIconUrl(a.icon)" alt="achievement-icon"/>
<!-- 成就条件 -->
<span class="achv-cond">{{ formatConditionValue(a.conditionType, a.conditionValue) }}</span>
</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-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>
</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>
</div>
</div>
</div>
</template>
<script setup lang="ts">
@@ -128,8 +60,10 @@ import { Trophy, Check, InfoFilled, Calendar, Star, Present } from '@element-plu
import { achievementApi } from '@/apis/achievement';
import type { AchievementVO } from '@/types';
import { AchievementEnumHelper } from '@/types/enums/achievement-enums';
import { getAchievementIconUrl } from '@/utils/iconUtils';
import { AchievementType } from '@/types/enums';
import { getAchievementIconUrl, getLevelIconUrl, getLevelWordIconUrl, getLevelStarIconUrl } from '@/utils/iconUtils';
import { UserCenterLayout } from '@/views/user/user-center';
// 响应式数据
const loading = ref(false);
const achievements = ref<AchievementVO[]>([]);
@@ -162,21 +96,77 @@ const completionRate = computed(() => {
return Math.round((earnedCount.value / totalCount.value) * 100);
});
// 筛选后的成就列表
const filteredAchievements = computed(() => {
let result = achievements.value;
// 等级类成就
const levelAchievements = computed(() => {
return achievements.value.filter(a => a.type === AchievementType.LEVEL);
});
// 按类型筛选
if (selectedType.value !== undefined) {
result = result.filter(a => a.type === selectedType.value);
// 当前等级成就：优先已获得的最高等级，否则取最低等级
const currentLevelAchievement = computed<AchievementVO | undefined>(() => {
if (levelAchievements.value.length === 0) return undefined;
const obtainedLevels = levelAchievements.value
.filter(a => a.obtained)
.sort((a, b) => (b.level || 0) - (a.level || 0));
if (obtainedLevels.length > 0) {
return obtainedLevels[0];
}
// 仅显示已获得
// 没有已获得等级时，取等级最低的作为当前目标
return [...levelAchievements.value].sort((a, b) => (a.level || 0) - (b.level || 0))[0];
});
// 下一级等级成就：当前等级的下一个等级
const nextLevelAchievement = computed<AchievementVO | undefined>(() => {
if (!currentLevelAchievement.value) return undefined;
const currentLevel = currentLevelAchievement.value.level || 1;
const sortedLevels = [...levelAchievements.value].sort((a, b) => (a.level || 0) - (b.level || 0));
return sortedLevels.find(a => (a.level || 0) > currentLevel);
});
// 当前等级数字与图标
const currentLevel = computed(() => currentLevelAchievement.value?.level ?? 1);
const currentLevelIconUrl = computed(() => getLevelIconUrl(currentLevel.value));
const currentLevelWordIconUrl = computed(() => getLevelWordIconUrl(currentLevel.value));
const currentLevelStarIconUrl = computed(() => getLevelStarIconUrl(currentLevel.value));
// 展示用文案与数值
const currentLevelDisplay = computed(() => formatLevelNumber(currentLevelAchievement.value?.level ?? 1));
const nextLevelDisplay = computed(() => {
return nextLevelAchievement.value ? `Lv.${formatLevelNumber(nextLevelAchievement.value.level)}` : '满级';
});
const nextProgress = computed(() => {
if (!nextLevelAchievement.value) return 100;
const p = nextLevelAchievement.value.progressPercentage;
if (typeof p === 'number') return Math.max(0, Math.min(100, p));
const cur = nextLevelAchievement.value.currentValue || 0;
const tar = nextLevelAchievement.value.targetValue || 0;
if (tar <= 0) return 0;
return Math.max(0, Math.min(100, Math.round((cur / tar) * 100)));
});
const nextDeltaText = computed(() => {
if (!nextLevelAchievement.value) return '已达最高等级';
const cur = nextLevelAchievement.value.currentValue || 0;
const tar = nextLevelAchievement.value.targetValue || 0;
const need = Math.max(0, tar - cur);
if (need <= 0) return '即将升级';
return `距离下级：还差 ${formatConditionValue(nextLevelAchievement.value.conditionType, need)}`;
});
// 勋章类成就
const badgeAchievements = computed(() => {
return achievements.value.filter(a => a.type === AchievementType.BADGE);
});
// 右侧展示用的勋章成就（支持仅显示已获得）
const filteredBadgeAchievements = computed(() => {
let result = badgeAchievements.value;
if (showOnlyEarned.value) {
result = result.filter(a => a.obtained);
}
// 排序：已获得的在前，按等级排序
// 排序：已获得的在前，按等级/ID 排序
return result.sort((a, b) => {
if (a.obtained !== b.obtained) {
return a.obtained ? -1 : 1;
@@ -197,6 +187,17 @@ function formatConditionValue(conditionType?: number, conditionValue?: number):
return AchievementEnumHelper.formatConditionValue(conditionType, conditionValue);
}
// 格式化等级显示（例如 1.20）
function formatLevelNumber(level?: number | null): string {
if (level === undefined || level === null) return '';
const num = Number(level);
if (Number.isNaN(num)) {
return String(level);
}
// 保留两位小数，方便展示类似 Lv.1.20 的效果
return num.toFixed(2);
}
// 格式化日期
function formatDate(dateStr?: string): string {
if (!dateStr) return '';
@@ -229,7 +230,6 @@ async function loadAchievements() {
loading.value = false;
}
}
onMounted(() => {
loadAchievements();
});
@@ -238,305 +238,83 @@ onMounted(() => {
<style lang="scss" scoped>
.my-achievements {
// padding: 20px 0;
// height: 100%;
height: 100%;
box-sizing: border-box;
display: flex;
gap: 24px;
.achievements-header {
.level-achieve{
display: flex;
justify-content: space-between;
align-items: center;
height: 10%;
flex-direction: column;
width: 380px;
h2 {
font-size: 28px;
font-weight: 600;
color: #141F38;
margin: 0;
.level{
background: linear-gradient(180deg, rgba(245, 250, 255, 1) 0%, rgba(255, 255, 255, 1) 100%);
border: 1px solid #e6effa;
border-radius: 12px;
padding: 16px;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
.level-icons{
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 180px;
height: 120px;
.level-star{ width: 100%; height: auto; }
.level-badge{ position: absolute; width: 72px; height: 72px; }
}
.level-word{ height: 28px; }
.next-tip{ color: #64748b; font-size: 13px; }
.level-range{ width: 100%; display: flex; justify-content: space-between; font-size: 12px; color: #64748b; }
}
}
}
.achievement-stats {
display: flex;
gap: 20px;
.stat-item {
.badge-achieve{
display: flex;
align-items: baseline;
gap: 8px;
flex-direction: column;
.achievement-list{
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 16px;
.achievement-item{
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 12px;
border: 1px solid #e6effa;
border-radius: 12px;
background: linear-gradient(180deg, rgba(223, 239, 255, 0.4) 0%, rgba(223, 239, 255, 0) 84%);
&.obtained{ box-shadow: 0 0 0 2px #5cb87a33 inset; }
.stat-label {
font-size: 14px;
color: #666;
}
.achv-name-wrap{
position: relative;
width: 140px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
img{ width: 100%; height: 100%; }
.achv-name{ position: absolute; font-size: 12px; color: #1f2937; white-space: nowrap; max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
}
.stat-value {
font-size: 24px;
font-weight: 600;
color: #C62828;
}
.achv-icon{ width: 72px; height: 72px; }
.achv-cond{ font-size: 12px; color: #64748b; }
}
.stat-total {
font-size: 16px;
color: #999;
}
}
}
.filter-tabs {
display: flex;
height: 5%;
justify-content: space-between;
align-items: center;
margin: 10px;
background: #f8f9fa;
border-radius: 8px;
}
.loading-container {
padding: 40px 0;
}
.achievements-grid {
display: grid;
height: 80%;
overflow-y: auto;
grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
gap: 20px;
margin-bottom: 20px;
}
.achievement-item {
display: flex;
gap: 16px;
padding: 20px;
border: 2px solid #e0e0e0;
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;
.acievement-item{
display: flex;
flex-direction: column;
}
}
}
&.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);
}
}
.achievement-icon {
position: relative;
width: 80px;
height: 80px;
flex-shrink: 0;
:deep(.el-image) {
width: 100%;
height: 100%;
}
.image-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: #f5f5f5;
border-radius: 8px;
color: #ccc;
font-size: 32px;
}
}
.achievement-badge {
position: absolute;
top: -4px;
right: -4px;
width: 28px;
height: 28px;
background: #52c41a;
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-weight: 600;
border: 3px solid white;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.achievement-level {
position: absolute;
bottom: -4px;
left: 50%;
transform: translateX(-50%);
padding: 2px 8px;
background: #1890ff;
color: white;
font-size: 12px;
font-weight: 600;
border-radius: 10px;
border: 2px solid white;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.achievement-info {
flex: 1;
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;
color: #141F38;
margin: 0;
flex: 1;
}
}
}
.achievement-description {
font-size: 14px;
color: #666;
line-height: 1.6;
margin: 0;
}
.achievement-condition {
display: flex;
align-items: center;
gap: 6px;
font-size: 13px;
color: #999;
padding: 6px 12px;
background: #fafafa;
border-radius: 6px;
:deep(.el-icon) {
font-size: 14px;
}
}
.achievement-progress {
.progress-info {
display: flex;
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;
}
}
}
.achievement-footer {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 8px;
border-top: 1px solid #f0f0f0;
.achievement-date,
.achievement-points {
display: flex;
align-items: center;
gap: 6px;
font-size: 13px;
color: #666;
:deep(.el-icon) {
font-size: 14px;
}
}
.achievement-points {
color: #faad14;
font-weight: 600;
}
}
.achievement-reward {
display: flex;
align-items: center;
gap: 6px;
font-size: 13px;
color: #faad14;
font-weight: 600;
padding: 6px 12px;
background: #fffbe6;
border-radius: 6px;
:deep(.el-icon) {
font-size: 14px;
}
}
// 响应式设计
@media (max-width: 1200px) {
.achievements-grid {
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}
}
@media (max-width: 768px) {
.achievements-grid {
grid-template-columns: 1fr;
}
.achievement-stats {
flex-direction: column;
gap: 16px;
}
.filter-tabs {
flex-direction: column;
gap: 16px;
align-items: stretch;
}
}
</style>