[Claude Code] After prompt #0

schoolNewsWeb/src/assets/imgs/achievement-name.svg

@@ -0,0 +1,16 @@
+<svg width="89" height="23" viewBox="0 0 89 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.348347 4.8063C0.20152 4.59611 0.351906 4.30762 0.608304 4.30762H20.4615V22.6153H0.608302C0.351905 22.6153 0.20152 22.3268 0.348347 22.1166L5.63317 14.551C6.0903 13.8966 6.0903 13.0264 5.63317 12.3719L0.348347 4.8063Z" fill="#B8C8E1"/>
+<path d="M20.4616 22.6153L9.69238 18.3076H20.4616V22.6153Z" fill="#A8B7CE"/>
+<path d="M87.9603 4.8063C88.1071 4.59611 87.9567 4.30762 87.7003 4.30762H67.8476V22.615H87.7003C87.9567 22.615 88.1071 22.3265 87.9603 22.1163L82.6756 14.5508C82.2185 13.8964 82.2185 13.0262 82.6756 12.3718L87.9603 4.8063Z" fill="#B8C8E1"/>
+<path d="M67.847 22.6153L78.6162 18.3076H67.847V22.6153Z" fill="#A8B7CE"/>
+<path d="M9.69238 1.2684C9.69238 0.567881 10.2603 0 10.9608 0H77.3471C78.0476 0 78.6155 0.56788 78.6155 1.26839V18.3077H9.69238V1.2684Z" fill="url(#paint0_linear_905_9852)"/>
+<defs>
+<linearGradient id="paint0_linear_905_9852" x1="30.6826" y1="7.31778e-07" x2="66.007" y2="31.6166" gradientUnits="userSpaceOnUse">
+<stop stop-color="#CCDCF3"/>
+<stop offset="0.27474" stop-color="#D3E0F4"/>
+<stop offset="0.526504" stop-color="#DBE9FD"/>
+<stop offset="0.82983" stop-color="#D3E0F4"/>
+<stop offset="1" stop-color="#C6D5EC"/>
+</linearGradient>
+</defs>
+</svg>

schoolNewsWeb/src/types/enums/achievement-enums.ts

@@ -19,15 +19,15 @@ export const AchievementTypeDescriptions: Record<AchievementType, string> = {
  */
 export const AchievementConditionTypeDescriptions: Record<AchievementConditionType, string> = {
   [AchievementConditionType.LEARNING_TIME]: '学习时长',
-  [AchievementConditionType.RESOURCE_VIEW_COUNT]: '浏览资源数量',
-  [AchievementConditionType.COURSE_COMPLETE_COUNT]: '完成课程数量',
-  [AchievementConditionType.CONTINUOUS_LOGIN_DAYS]: '连续登录天数',
-  [AchievementConditionType.RESOURCE_COLLECT_COUNT]: '收藏资源数量',
-  [AchievementConditionType.TASK_COMPLETE_COUNT]: '完成任务数量',
-  [AchievementConditionType.POINTS_EARNED]: '获得积分数量',
-  [AchievementConditionType.COMMENT_COUNT]: '发表评论数量',
-  [AchievementConditionType.CHAPTER_COMPLETE_COUNT]: '完成章节数量',
-  [AchievementConditionType.TOTAL_LOGIN_DAYS]: '累计登录天数'
+  // [AchievementConditionType.RESOURCE_VIEW_COUNT]: '浏览资源数量',
+  // [AchievementConditionType.COURSE_COMPLETE_COUNT]: '完成课程数量',
+  // [AchievementConditionType.CONTINUOUS_LOGIN_DAYS]: '连续登录天数',
+  // [AchievementConditionType.RESOURCE_COLLECT_COUNT]: '收藏资源数量',
+  // [AchievementConditionType.TASK_COMPLETE_COUNT]: '完成任务数量',
+  // [AchievementConditionType.POINTS_EARNED]: '获得积分数量',
+  // [AchievementConditionType.COMMENT_COUNT]: '发表评论数量',
+  // [AchievementConditionType.CHAPTER_COMPLETE_COUNT]: '完成章节数量',
+  // [AchievementConditionType.TOTAL_LOGIN_DAYS]: '累计登录天数'
 };
 
 /**
@@ -36,27 +36,27 @@ export const AchievementConditionTypeDescriptions: Record<AchievementConditionTy
 export const AchievementEventTypeDescriptions: Record<AchievementEventType, string> = {
   // 学习相关事件
   [AchievementEventType.LEARNING_TIME_UPDATED]: '学习时长更新',
-  [AchievementEventType.COURSE_COMPLETED]: '课程完成',
-  [AchievementEventType.COURSE_STARTED]: '开始学习课程',
-  [AchievementEventType.CHAPTER_COMPLETED]: '章节完成',
-  // 资源相关事件
-  [AchievementEventType.RESOURCE_VIEWED]: '浏览资源',
-  [AchievementEventType.RESOURCE_COLLECTED]: '收藏资源',
-  [AchievementEventType.RESOURCE_SHARED]: '分享资源',
-  // 任务相关事件
-  [AchievementEventType.TASK_COMPLETED]: '任务完成',
-  [AchievementEventType.TASK_ITEM_COMPLETED]: '任务项完成',
-  // 互动相关事件
-  [AchievementEventType.COMMENT_POSTED]: '发表评论',
-  [AchievementEventType.LIKE_GIVEN]: '点赞',
-  // 登录相关事件
-  [AchievementEventType.USER_LOGIN]: '用户登录',
-  [AchievementEventType.CONTINUOUS_LOGIN]: '连续登录',
-  // 积分相关事件
-  [AchievementEventType.POINTS_EARNED_EVENT]: '获得积分',
-  // 测试相关事件
-  [AchievementEventType.TEST_PASSED]: '测试通过',
-  [AchievementEventType.TEST_PERFECT_SCORE]: '测试满分'
+  // [AchievementEventType.COURSE_COMPLETED]: '课程完成',
+  // [AchievementEventType.COURSE_STARTED]: '开始学习课程',
+  // [AchievementEventType.CHAPTER_COMPLETED]: '章节完成',
+  // // 资源相关事件
+  // [AchievementEventType.RESOURCE_VIEWED]: '浏览资源',
+  // [AchievementEventType.RESOURCE_COLLECTED]: '收藏资源',
+  // [AchievementEventType.RESOURCE_SHARED]: '分享资源',
+  // // 任务相关事件
+  // [AchievementEventType.TASK_COMPLETED]: '任务完成',
+  // [AchievementEventType.TASK_ITEM_COMPLETED]: '任务项完成',
+  // // 互动相关事件
+  // [AchievementEventType.COMMENT_POSTED]: '发表评论',
+  // [AchievementEventType.LIKE_GIVEN]: '点赞',
+  // // 登录相关事件
+  // [AchievementEventType.USER_LOGIN]: '用户登录',
+  // [AchievementEventType.CONTINUOUS_LOGIN]: '连续登录',
+  // // 积分相关事件
+  // [AchievementEventType.POINTS_EARNED_EVENT]: '获得积分',
+  // // 测试相关事件
+  // [AchievementEventType.TEST_PASSED]: '测试通过',
+  // [AchievementEventType.TEST_PERFECT_SCORE]: '测试满分'
 };
 
 /**
@@ -160,24 +160,24 @@ export class AchievementEnumHelper {
     switch (conditionType) {
       case AchievementConditionType.LEARNING_TIME:
         return `${typeDesc}达到${conditionValue/60}分钟`;
-      case AchievementConditionType.RESOURCE_VIEW_COUNT:
-        return `${typeDesc}达到${conditionValue}个`;
-      case AchievementConditionType.COURSE_COMPLETE_COUNT:
-        return `${typeDesc}达到${conditionValue}门`;
-      case AchievementConditionType.CONTINUOUS_LOGIN_DAYS:
-        return `${typeDesc}达到${conditionValue}天`;
-      case AchievementConditionType.RESOURCE_COLLECT_COUNT:
-        return `${typeDesc}达到${conditionValue}个`;
-      case AchievementConditionType.TASK_COMPLETE_COUNT:
-        return `${typeDesc}达到${conditionValue}个`;
-      case AchievementConditionType.POINTS_EARNED:
-        return `${typeDesc}达到${conditionValue}分`;
-      case AchievementConditionType.COMMENT_COUNT:
-        return `${typeDesc}达到${conditionValue}条`;
-      case AchievementConditionType.CHAPTER_COMPLETE_COUNT:
-        return `${typeDesc}达到${conditionValue}个`;
-      case AchievementConditionType.TOTAL_LOGIN_DAYS:
-        return `${typeDesc}达到${conditionValue}天`;
+      // case AchievementConditionType.RESOURCE_VIEW_COUNT:
+      //   return `${typeDesc}达到${conditionValue}个`;
+      // case AchievementConditionType.COURSE_COMPLETE_COUNT:
+      //   return `${typeDesc}达到${conditionValue}门`;
+      // case AchievementConditionType.CONTINUOUS_LOGIN_DAYS:
+      //   return `${typeDesc}达到${conditionValue}天`;
+      // case AchievementConditionType.RESOURCE_COLLECT_COUNT:
+      //   return `${typeDesc}达到${conditionValue}个`;
+      // case AchievementConditionType.TASK_COMPLETE_COUNT:
+      //   return `${typeDesc}达到${conditionValue}个`;
+      // case AchievementConditionType.POINTS_EARNED:
+      //   return `${typeDesc}达到${conditionValue}分`;
+      // case AchievementConditionType.COMMENT_COUNT:
+      //   return `${typeDesc}达到${conditionValue}条`;
+      // case AchievementConditionType.CHAPTER_COMPLETE_COUNT:
+      //   return `${typeDesc}达到${conditionValue}个`;
+      // case AchievementConditionType.TOTAL_LOGIN_DAYS:
+      //   return `${typeDesc}达到${conditionValue}天`;
       default:
         return `${typeDesc}达到${conditionValue}`;
     }

schoolNewsWeb/src/types/enums/index.ts

@@ -239,24 +239,24 @@ export enum AchievementType {
 export enum AchievementConditionType {
   /** 学习时长（分钟） */
   LEARNING_TIME = 1,
-  /** 浏览资源数量 */
-  RESOURCE_VIEW_COUNT = 2,
-  /** 完成课程数量 */
-  COURSE_COMPLETE_COUNT = 3,
-  /** 连续登录天数 */
-  CONTINUOUS_LOGIN_DAYS = 4,
-  /** 收藏资源数量 */
-  RESOURCE_COLLECT_COUNT = 5,
-  /** 完成任务数量 */
-  TASK_COMPLETE_COUNT = 6,
-  /** 获得积分数量 */
-  POINTS_EARNED = 7,
-  /** 发表评论数量 */
-  COMMENT_COUNT = 8,
-  /** 完成章节数量 */
-  CHAPTER_COMPLETE_COUNT = 9,
-  /** 累计登录天数 */
-  TOTAL_LOGIN_DAYS = 10
+  // /** 浏览资源数量 */
+  // RESOURCE_VIEW_COUNT = 2,
+  // /** 完成课程数量 */
+  // COURSE_COMPLETE_COUNT = 3,
+  // /** 连续登录天数 */
+  // CONTINUOUS_LOGIN_DAYS = 4,
+  // /** 收藏资源数量 */
+  // RESOURCE_COLLECT_COUNT = 5,
+  // /** 完成任务数量 */
+  // TASK_COMPLETE_COUNT = 6,
+  // /** 获得积分数量 */
+  // POINTS_EARNED = 7,
+  // /** 发表评论数量 */
+  // COMMENT_COUNT = 8,
+  // /** 完成章节数量 */
+  // CHAPTER_COMPLETE_COUNT = 9,
+  // /** 累计登录天数 */
+  // TOTAL_LOGIN_DAYS = 10
 }
 
 /**
@@ -266,46 +266,46 @@ export enum AchievementEventType {
   // ==================== 学习相关事件 ====================
   /** 学习时长更新 */
   LEARNING_TIME_UPDATED = 'learning_time_updated',
-  /** 课程完成 */
-  COURSE_COMPLETED = 'course_completed',
-  /** 开始学习课程 */
-  COURSE_STARTED = 'course_started',
-  /** 章节完成 */
-  CHAPTER_COMPLETED = 'chapter_completed',
+  // /** 课程完成 */
+  // COURSE_COMPLETED = 'course_completed',
+  // /** 开始学习课程 */
+  // COURSE_STARTED = 'course_started',
+  // /** 章节完成 */
+  // CHAPTER_COMPLETED = 'chapter_completed',
   
-  // ==================== 资源相关事件 ====================
-  /** 浏览资源 */
-  RESOURCE_VIEWED = 'resource_viewed',
-  /** 收藏资源 */
-  RESOURCE_COLLECTED = 'resource_collected',
-  /** 分享资源 */
-  RESOURCE_SHARED = 'resource_shared',
+  // // ==================== 资源相关事件 ====================
+  // /** 浏览资源 */
+  // RESOURCE_VIEWED = 'resource_viewed',
+  // /** 收藏资源 */
+  // RESOURCE_COLLECTED = 'resource_collected',
+  // /** 分享资源 */
+  // RESOURCE_SHARED = 'resource_shared',
   
-  // ==================== 任务相关事件 ====================
-  /** 任务完成 */
-  TASK_COMPLETED = 'task_completed',
-  /** 任务项完成 */
-  TASK_ITEM_COMPLETED = 'task_item_completed',
+  // // ==================== 任务相关事件 ====================
+  // /** 任务完成 */
+  // TASK_COMPLETED = 'task_completed',
+  // /** 任务项完成 */
+  // TASK_ITEM_COMPLETED = 'task_item_completed',
   
-  // ==================== 互动相关事件 ====================
-  /** 发表评论 */
-  COMMENT_POSTED = 'comment_posted',
-  /** 点赞 */
-  LIKE_GIVEN = 'like_given',
+  // // ==================== 互动相关事件 ====================
+  // /** 发表评论 */
+  // COMMENT_POSTED = 'comment_posted',
+  // /** 点赞 */
+  // LIKE_GIVEN = 'like_given',
   
-  // ==================== 登录相关事件 ====================
-  /** 用户登录 */
-  USER_LOGIN = 'user_login',
-  /** 连续登录 */
-  CONTINUOUS_LOGIN = 'continuous_login',
+  // // ==================== 登录相关事件 ====================
+  // /** 用户登录 */
+  // USER_LOGIN = 'user_login',
+  // /** 连续登录 */
+  // CONTINUOUS_LOGIN = 'continuous_login',
   
-  // ==================== 积分相关事件 ====================
-  /** 获得积分 */
-  POINTS_EARNED_EVENT = 'points_earned',
+  // // ==================== 积分相关事件 ====================
+  // /** 获得积分 */
+  // POINTS_EARNED_EVENT = 'points_earned',
   
-  // ==================== 测试相关事件 ====================
-  /** 测试通过 */
-  TEST_PASSED = 'test_passed',
-  /** 测试满分 */
-  TEST_PERFECT_SCORE = 'test_perfect_score'
+  // // ==================== 测试相关事件 ====================
+  // /** 测试通过 */
+  // TEST_PASSED = 'test_passed',
+  // /** 测试满分 */
+  // TEST_PERFECT_SCORE = 'test_perfect_score'
 }

schoolNewsWeb/src/utils/iconUtils.ts

@@ -65,3 +65,23 @@ export function getLevelIconUrl(level = 1): string {
   return getIconUrl(`v${validLevel}-icon.svg`, 'achievement');
 }
 
+/**
+ * 根据等级获取等级图标URL
+ * @param level 等级（1-6）
+ * @returns 等级图标URL
+ */
+export function getLevelWordIconUrl(level = 1): string {
+  const validLevel = Math.max(1, Math.min(6, level)); // 限制在1-6之间
+  return getIconUrl(`v${validLevel}.svg`, 'achievement');
+}
+
+export function getLevelStarIconUrl(level = 1): string {
+  // 根据小数点判断 无小数点是v0-star.svg 有小数点是0.5 是v5-star.svg
+  // 转换浮点数
+  const floatLevel = parseFloat(level.toString());
+  // 小数点后的值  .1到.5
+  const decimal = floatLevel % 1;
+  const val = decimal * 10;
+  return getIconUrl(`v${val}-star.svg`, 'achievement');
+}
+

schoolNewsWeb/src/views/user/user-center/MyAchievementsView.vue

@@ -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>

schoolNewsWeb/src/views/user/user-center/components/UserCard.vue

@@ -56,7 +56,7 @@ import maleIcon from '@/assets/imgs/male.svg';
 import femaleIcon from '@/assets/imgs/female.svg';
 import { ElMessage } from 'element-plus';
 import { useRouter } from 'vue-router';
-import { getLevelIconUrl } from '@/utils/iconUtils';
+import { getLevelWordIconUrl } from '@/utils/iconUtils';
 
 const router = useRouter();
 const userInfo = ref<UserVO>();
@@ -66,7 +66,7 @@ const defaultAvatar = defaultAvatarImg;
 
 const levelIcon = computed(() => {
   const level = userInfo.value?.level || 1;
-  return getLevelIconUrl(level);
+  return getLevelWordIconUrl(level);
 });
 
 function handleEdit() {
@@ -233,8 +233,8 @@ onMounted(async () => {
 }
 
 .level-icon {
-  width: 18px;
-  height: 12px;
+  width: 24px;
+  height: 24px;
 }
 
 .level-text {