update

src/oj/api.ts

@@ -341,9 +341,21 @@ export function joinProblemSet(problemSetId: number) {
 export function updateProblemSetProgress(
   problemSetId: number,
   problemId: number,
+  submissionId: string,
 ) {
   return http.put("problemset/progress", {
     problemset_id: problemSetId,
     problem_id: problemId,
+    submission_id: submissionId,
   })
 }
+
+// 获取用户徽章列表
+export function getUserBadges() {
+  return http.get("user/badges")
+}
+
+// 获取题单徽章列表
+export function getProblemSetBadges(problemSetId: number) {
+  return http.get(`problemset/${problemSetId}/badges`)
+}

src/oj/problem/components/SubmitCode.vue

@@ -101,10 +101,6 @@ async function submit() {
   if (contestID) {
     data.contest_id = parseInt(contestID)
   }
-  if (problemSetId) {
-    data.problemset_id = parseInt(problemSetId)
-  }
-
   // 2. 提交代码到后端
   const res = await submitCode(data)
   console.log(`[Submit] 代码已提交: ID=${res.data.submission_id}`)
@@ -123,11 +119,14 @@ watch(
     // 1. 刷新题目状态
     problem.value!.my_status = 0
 
-    // 2. 更新题单进度
+    // 2. 创建ProblemSetSubmission记录，更新题单进度
     if (problemSetId) {
-      console.log(problemSetId, "problemSetId")
       try {
-        await updateProblemSetProgress(Number(problemSetId), problem.value!.id)
+        await updateProblemSetProgress(
+          Number(problemSetId),
+          problem.value!.id,
+          submission.value!.id,
+        )
       } catch (error) {
         console.error("更新题单进度失败:", error)
       }

src/oj/problem/detail.vue

@@ -33,12 +33,12 @@ const ProblemFlowchart = defineAsyncComponent(
 interface Props {
   problemID: string
   contestID?: string
-  problemSetID?: string
+  problemSetId?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
   contestID: "",
-  problemSetID: "",
+  problemSetId: "",
 })
 
 const errMsg = ref("无数据")

src/oj/problemset/detail.vue

@@ -4,12 +4,13 @@ import {
   getProblemSetDetail,
   getProblemSetProblems,
   joinProblemSet,
+  getUserBadges,
 } from "../api"
 import { getTagColor, getACRate } from "utils/functions"
-import { ProblemSet, ProblemSetProblem } from "utils/types"
+import { ProblemSet, ProblemSetProblem, UserBadge as UserBadgeType } from "utils/types"
-import ProblemStatus from "../problem/components/ProblemStatus.vue"
 import { DIFFICULTY } from "utils/constants"
 import { useBreakpoints } from "shared/composables/breakpoints"
+import UserBadge from "shared/components/UserBadge.vue"
 
 const route = useRoute()
 const router = useRouter()
@@ -23,6 +24,8 @@ const problemSet = ref<ProblemSet | null>(null)
 const problems = ref<ProblemSetProblem[]>([])
 const isJoined = ref(false)
 const isJoining = ref(false)
+const userBadges = ref<UserBadgeType[]>([])
+const isLoadingBadges = ref(false)
 
 // 刷新题单详情的函数
 async function refreshProblemSetDetail() {
@@ -50,22 +53,9 @@ function getDifficultyTag(difficulty: string) {
 }
 
 function goToProblem(problemId: string) {
-  // 使用新的路由结构：/problemset/{id}/problem/{problem_id}
   router.push(`/problemset/${problemSetId.value}/problem/${problemId}`)
 }
 
-function getProblemStatus(
-  myStatus: number | null | undefined,
-): "not_test" | "passed" | "failed" {
-  if (myStatus === null || myStatus === undefined) {
-    return "not_test"
-  } else if (myStatus === 0) {
-    return "passed"
-  } else {
-    return "failed"
-  }
-}
-
 function getProgressPercentage() {
   if (!problemSet.value) return 0
   return Math.round(
@@ -93,6 +83,23 @@ async function loadProblems() {
   }
 }
 
+async function loadUserBadges() {
+  if (!isJoined.value) return
+  
+  isLoadingBadges.value = true
+  try {
+    const res = await getUserBadges()
+    // 只显示当前题单的徽章
+    userBadges.value = res.data.filter((badge: UserBadgeType) => 
+      badge.badge.problemset === problemSetId.value
+    )
+  } catch (err: any) {
+    console.error("加载用户徽章失败:", err)
+  } finally {
+    isLoadingBadges.value = false
+  }
+}
+
 async function handleJoinProblemSet() {
   if (isJoining.value) return
 
@@ -101,8 +108,8 @@ async function handleJoinProblemSet() {
     await joinProblemSet(problemSetId.value)
     isJoined.value = true
     message.success("成功加入题单！")
-    // 不需要重新加载详情，因为我们已经更新了本地状态
+    // 加入题单后加载用户徽章
-    // await loadProblemSetDetail()
+    await loadUserBadges()
   } catch (err: any) {
     message.error("加入题单失败：" + (err.data || "未知错误"))
   } finally {
@@ -112,6 +119,10 @@ async function handleJoinProblemSet() {
 
 onMounted(async () => {
   await Promise.all([loadProblemSetDetail(), loadProblems()])
+  // 如果已加入题单，加载用户徽章
+  if (isJoined.value) {
+    await loadUserBadges()
+  }
 })
 
 // 监听路由变化，当从题单题目页面返回时刷新题单详情
@@ -125,6 +136,8 @@ watch(
       isJoined.value
     ) {
       refreshProblemSetDetail()
+      // 刷新用户徽章
+      loadUserBadges()
     }
   },
 )
@@ -152,13 +165,15 @@ watch(
         </n-flex>
 
         <n-flex align="center">
-          <n-flex align="center">
+          <!-- 完成进度 - 只在已加入时显示 -->
+          <n-flex align="center" v-if="isJoined">
             <n-text strong>完成进度</n-text>
             <n-text>
               {{ problemSet.completed_count }} / {{ problemSet.problems_count }}
             </n-text>
           </n-flex>
           <n-progress
+            v-if="isJoined"
             :percentage="getProgressPercentage()"
             :height="8"
             :border-radius="4"
@@ -183,6 +198,24 @@ watch(
       </n-flex>
     </n-card>
 
+    <!-- 用户徽章显示区域 -->
+    <n-card v-if="isJoined && userBadges.length > 0" style="margin-bottom: 24px">
+      <template #header>
+        <n-flex align="center">
+          <Icon icon="material-symbols:emoji-events" width="20" />
+          <n-text strong>我的徽章</n-text>
+          <n-spin v-if="isLoadingBadges" size="small" />
+        </n-flex>
+      </template>
+      <n-flex :wrap="true" :gap="12">
+        <UserBadge 
+          v-for="badge in userBadges" 
+          :key="badge.id" 
+          :badge="badge" 
+        />
+      </n-flex>
+    </n-card>
+
     <!-- 题目列表 -->
     <n-grid :cols="isDesktop ? 4 : 1" :x-gap="16" :y-gap="16">
       <n-grid-item
@@ -194,50 +227,37 @@ watch(
           @click="goToProblem(problemSetProblem.problem._id)"
           style="cursor: pointer"
         >
-          <n-flex>
+          <n-flex align="center">
-            <n-flex align="center">
+            <Icon
-              <n-h2 style="margin: 0 20px 0 0">#{{ index + 1 }}. </n-h2>
+            style="margin-right: 12px;"
+              width="50"
+              icon="noto:check-mark-button"
+              v-if="problemSetProblem.is_completed"
+            />
 
-              <n-flex vertical style="flex: 1">
+            <n-flex vertical style="flex: 1">
-                <n-flex align="center">
+              <n-flex align="center">
-                  <n-tag
+                <n-h4 style="margin: 0;">#{{ index + 1 }}</n-h4>
-                    :type="getTagColor(problemSetProblem.problem.difficulty)"
-                    size="small"
-                  >
-                    {{ DIFFICULTY[problemSetProblem.problem.difficulty] }}
-                  </n-tag>
-                  <n-h4 style="margin: 0">
-                    {{ problemSetProblem.problem.title }}
-                  </n-h4>
-                </n-flex>
                 
-                <n-flex align="center" size="small">
+                <n-h4 style="margin: 0">
-                  <n-text type="info">
+                  {{ problemSetProblem.problem.title }}
-                    分数：{{ problemSetProblem.score }}
+                </n-h4>
-                  </n-text>
-                  <n-text v-if="!problemSetProblem.is_required"
-                    >（选做）</n-text
-                  >
-                  <n-text depth="3" style="font-size: 12px">
-                    通过率
-                    {{
-                      getACRate(
-                        problemSetProblem.problem.accepted_number,
-                        problemSetProblem.problem.submission_number,
-                      )
-                    }}
-                  </n-text>
-                </n-flex>
               </n-flex>
-            </n-flex>
 
-            <n-flex align="center">
+              <n-flex align="center" size="small">
-              <ProblemStatus
+                <n-tag
-                :status="getProblemStatus(problemSetProblem.problem.my_status)"
+                  :type="getTagColor(problemSetProblem.problem.difficulty)"
-              />
+                  size="small"
-              <n-icon>
+                >
-                <Icon icon="streamline-emojis:right-arrow" />
+                  {{ DIFFICULTY[problemSetProblem.problem.difficulty] }}
-              </n-icon>
+                </n-tag>
+                <n-text type="info">
+                  分数：{{ problemSetProblem.score }}
+                </n-text>
+                <n-text v-if="!problemSetProblem.is_required">
+                  （选做）
+                </n-text>
+              </n-flex>
             </n-flex>
           </n-flex>
         </n-card>

src/shared/components/UserBadge.vue

@@ -0,0 +1,92 @@
+<template>
+  <n-tooltip trigger="hover" :show-arrow="false">
+    <template #trigger>
+      <div class="badge-container">
+        <img 
+          :src="badge.badge.icon" 
+          :alt="badge.badge.name"
+          class="badge-icon"
+          @error="handleImageError"
+        />
+      </div>
+    </template>
+    <div class="badge-tooltip">
+      <div class="badge-name">{{ badge.badge.name }}</div>
+      <div class="badge-description">{{ badge.badge.description }}</div>
+      <div class="badge-time">获得时间：{{ formatTime(badge.earned_time) }}</div>
+    </div>
+  </n-tooltip>
+</template>
+
+<script setup lang="ts">
+import { UserBadge } from "utils/types"
+
+interface Props {
+  badge: UserBadge
+}
+
+const props = defineProps<Props>()
+
+function handleImageError(event: Event) {
+  const img = event.target as HTMLImageElement
+  // 如果图片加载失败，显示默认图标
+  img.src = '/badge-1.png' // 使用默认徽章图标
+}
+
+function formatTime(date: Date) {
+  return new Date(date).toLocaleString('zh-CN', {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit'
+  })
+}
+</script>
+
+<style scoped>
+.badge-container {
+  position: relative;
+  display: inline-block;
+  cursor: pointer;
+}
+
+.badge-icon {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  object-fit: cover;
+  border: 2px solid #e0e0e0;
+  transition: all 0.3s ease;
+}
+
+.badge-icon:hover {
+  transform: scale(1.1);
+  border-color: #1890ff;
+  box-shadow: 0 4px 12px rgba(24, 144, 255, 0.3);
+}
+
+
+.badge-tooltip {
+  max-width: 250px;
+}
+
+.badge-name {
+  font-weight: bold;
+  font-size: 14px;
+  margin-bottom: 4px;
+  color: #1890ff;
+}
+
+.badge-description {
+  font-size: 12px;
+  color: #666;
+  margin-bottom: 4px;
+  line-height: 1.4;
+}
+
+.badge-time {
+  font-size: 11px;
+  color: #999;
+}
+</style>

src/utils/types.ts

@@ -231,6 +231,7 @@ export interface ProblemSetProblem {
   is_required: boolean
   score: number
   hint: string
+  is_completed: boolean
 }
 
 export interface ProblemSetBadge {
@@ -243,6 +244,13 @@ export interface ProblemSetBadge {
   condition_value: number
 }
 
+export interface UserBadge {
+  id: number
+  user: number
+  badge: ProblemSetBadge
+  earned_time: Date
+}
+
 export interface ProblemSetProgress {
   id: number
   problemset: ProblemSetList
@@ -280,7 +288,6 @@ export interface SubmitCodePayload {
   language: LANGUAGE
   code: string
   contest_id?: number
-  problemset_id?: number
 }
 
 // ==================== 流程图相关类型 ====================