update

2025-10-23 12:42:32 +08:00
parent 9e7fbd8ff2
commit 42ce9ac63b
6 changed files with 199 additions and 69 deletions
--- a/src/oj/api.ts
+++ b/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`)
+}
--- a/src/oj/problem/components/SubmitCode.vue
+++ b/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)
      }
--- a/src/oj/problem/detail.vue
+++ b/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("无数据")
--- a/src/oj/problemset/detail.vue
+++ b/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 ProblemStatus from "../problem/components/ProblemStatus.vue"
+import { ProblemSet, ProblemSetProblem, UserBadge as UserBadgeType } from "utils/types"
 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,52 +227,39 @@ watch(
          @click="goToProblem(problemSetProblem.problem._id)"
          style="cursor: pointer"
        >
-          <n-flex>
          <n-flex align="center">
-              <n-h2 style="margin: 0 20px 0 0">#{{ index + 1 }}. </n-h2>
+            <Icon
+            style="margin-right: 12px;"
+              width="50"
+              icon="noto:check-mark-button"
+              v-if="problemSetProblem.is_completed"
+            />

            <n-flex vertical style="flex: 1">
              <n-flex align="center">
-                  <n-tag
-                    :type="getTagColor(problemSetProblem.problem.difficulty)"
-                    size="small"
-                  >
-                    {{ DIFFICULTY[problemSetProblem.problem.difficulty] }}
-                  </n-tag>
+                <n-h4 style="margin: 0;">#{{ index + 1 }}</n-h4>
+                
                <n-h4 style="margin: 0">
                  {{ problemSetProblem.problem.title }}
                </n-h4>
              </n-flex>

              <n-flex align="center" size="small">
+                <n-tag
+                  :type="getTagColor(problemSetProblem.problem.difficulty)"
+                  size="small"
+                >
+                  {{ DIFFICULTY[problemSetProblem.problem.difficulty] }}
+                </n-tag>
                <n-text type="info">
                  分数：{{ problemSetProblem.score }}
                </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 v-if="!problemSetProblem.is_required">
+                  （选做）
                </n-text>
              </n-flex>
            </n-flex>
          </n-flex>
-
-            <n-flex align="center">
-              <ProblemStatus
-                :status="getProblemStatus(problemSetProblem.problem.my_status)"
-              />
-              <n-icon>
-                <Icon icon="streamline-emojis:right-arrow" />
-              </n-icon>
-            </n-flex>
-          </n-flex>
        </n-card>
      </n-grid-item>
    </n-grid>
--- a/src/shared/components/UserBadge.vue
+++ b/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>
--- a/src/utils/types.ts
+++ b/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
 }

 // ==================== 流程图相关类型 ====================