update

2025-10-23 16:12:42 +08:00
parent 42ce9ac63b
commit 0a31cc3d2f
22 changed files with 318 additions and 257 deletions
--- a/src/oj/problem/components/SubmitCode.vue
+++ b/src/oj/problem/components/SubmitCode.vue
@@ -25,7 +25,8 @@ const { problem } = storeToRefs(problemStore)
 const route = useRoute()
 const contestID = <string>route.params.contestID ?? ""
 const problemSetId = <string>route.params.problemSetId ?? ""
-console.log(problemSetId, "problemSetId")
+
+const router = useRouter()
 const [commentPanel] = useToggle()

 const { isDesktop } = useBreakpoints()
@@ -61,6 +62,19 @@ const { start: showCommentPanelDelayed } = useTimeoutFn(
  { immediate: false },
 )

+const { start: goToProblemSetDelayed } = useTimeoutFn(
+  () => {
+    router.push({
+      name: "problemset",
+      params: {
+        problemSetId: problemSetId,
+      },
+    })
+  },
+  1500,
+  { immediate: false },
+)
+
 // ==================== 计算属性 ====================
 // 按钮禁用逻辑
 const submitDisabled = computed(() => {
@@ -121,15 +135,11 @@ watch(

    // 2. 创建ProblemSetSubmission记录，更新题单进度
    if (problemSetId) {
-      try {
-        await updateProblemSetProgress(
-          Number(problemSetId),
-          problem.value!.id,
-          submission.value!.id,
-        )
-      } catch (error) {
-        console.error("更新题单进度失败:", error)
-      }
+      await updateProblemSetProgress(
+        Number(problemSetId),
+        problem.value!.id,
+        submission.value!.id,
+      )
    }

    // 3. 放烟花
@@ -139,6 +149,11 @@ watch(
    if (!contestID && !problemSetId) {
      showCommentPanelDelayed()
    }
+
+    if (problemSetId) {
+      // 延迟回到题单页面
+      goToProblemSetDelayed()
+    }
  },
 )
 </script>
--- a/src/oj/problem/components/SubmitFlowchart.vue
+++ b/src/oj/problem/components/SubmitFlowchart.vue
@@ -14,7 +14,11 @@ import {
 } from "shared/composables/websocket"

 // API 和状态管理
-import { getCurrentProblemFlowchartSubmission, submitFlowchart, updateProblemSetProgress } from "oj/api"
+import {
+  getCurrentProblemFlowchartSubmission,
+  submitFlowchart,
+  updateProblemSetProgress,
+} from "oj/api"
 import { useProblemStore } from "oj/store/problem"

 // ==================== 类型定义 ====================
--- a/src/oj/problem/composables/useSubmissionMonitor.ts
+++ b/src/oj/problem/composables/useSubmissionMonitor.ts
@@ -104,7 +104,7 @@ export function useSubmissionMonitor() {
  // ==================== 启动监控 ====================
  const startMonitoring = (id: string) => {
    submissionId.value = id
-    submission.value = { result: 9 } as Submission // 9 = submitting
+    submission.value = { id, result: 9 } as Submission // 9 = submitting

    // 取消之前的断开计划
    cancelScheduledDisconnect()
@@ -116,13 +116,16 @@ export function useSubmissionMonitor() {
    }

    // 等待WebSocket连接并订阅
-    const unwatch = watch(
+    let unwatch: (() => void) | null = null
+    unwatch = watch(
      wsStatus,
      (status) => {
        if (status === "connected") {
          console.log("[SubmissionMonitor] WebSocket已连接，订阅提交:", id)
          subscribe(id)
-          unwatch() // 订阅成功后停止监听
+          if (unwatch) {
+            unwatch() // 订阅成功后停止监听
+          }
        }
      },
      { immediate: true },
--- a/src/oj/problemset/detail.vue
+++ b/src/oj/problemset/detail.vue
@@ -6,17 +6,23 @@ import {
  joinProblemSet,
  getUserBadges,
 } from "../api"
-import { getTagColor, getACRate } from "utils/functions"
-import { ProblemSet, ProblemSetProblem, UserBadge as UserBadgeType } from "utils/types"
+import { getTagColor } from "utils/functions"
+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"
+import { useFireworks } from "../problem/composables/useFireworks"

 const route = useRoute()
 const router = useRouter()
 const message = useMessage()

 const { isDesktop } = useBreakpoints()
+const { celebrate } = useFireworks()

 const problemSetId = computed(() => Number(route.params.problemSetId))

@@ -25,20 +31,6 @@ const problems = ref<ProblemSetProblem[]>([])
 const isJoined = ref(false)
 const isJoining = ref(false)
 const userBadges = ref<UserBadgeType[]>([])
-const isLoadingBadges = ref(false)
-
-// 刷新题单详情的函数
-async function refreshProblemSetDetail() {
-  try {
-    const res = await getProblemSetDetail(problemSetId.value)
-    problemSet.value = res.data
-    // 更新加入状态
-    isJoined.value = res.data.user_progress?.is_joined || false
-    console.log(`[ProblemSet] 题单详情已刷新: ${problemSet.value?.title}`)
-  } catch (err: any) {
-    console.error("刷新题单详情失败:", err)
-  }
-}

 function getDifficultyTag(difficulty: string) {
  const difficultyMap: Record<
@@ -64,42 +56,49 @@ function getProgressPercentage() {
 }

 async function loadProblemSetDetail() {
-  try {
-    const res = await getProblemSetDetail(problemSetId.value)
-    problemSet.value = res.data
-    // 更新加入状态
-    isJoined.value = res.data.user_progress?.is_joined || false
-  } catch (err: any) {
-    message.error("加载题单详情失败：" + (err.data || "未知错误"))
-  }
+  const res = await getProblemSetDetail(problemSetId.value)
+  problemSet.value = res.data
+  isJoined.value = res.data.user_progress?.is_joined || false
 }

 async function loadProblems() {
-  try {
-    const res = await getProblemSetProblems(problemSetId.value)
-    problems.value = res.data
-  } catch (err: any) {
-    message.error("加载题目列表失败：" + (err.data || "未知错误"))
-  }
+  const res = await getProblemSetProblems(problemSetId.value)
+  problems.value = res.data
 }

 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
+
+  const res = await getUserBadges()
+  userBadges.value = res.data.filter(
+    (badge: UserBadgeType) => badge.badge.problemset === problemSetId.value,
+  )
+}
+
+async function init() {
+  await Promise.all([loadProblemSetDetail(), loadProblems()])
+  if (isJoined.value) {
+    if (problemSet.value?.user_progress?.is_completed) {
+      celebrate()
+    }
+    loadUserBadges()
  }
 }

+async function handleProblemClick(problemId: string) {
+  if (!isJoined.value) {
+    message.warning("请先点击【加入题单】按钮！")
+    return
+  }
+  router.push({
+    name: "problemset problem",
+    params: {
+      problemSetId: problemSetId.value,
+      problemID: problemId,
+    },
+  })
+}
+
 async function handleJoinProblemSet() {
  if (isJoining.value) return

@@ -117,30 +116,7 @@ async function handleJoinProblemSet() {
  }
 }

-onMounted(async () => {
-  await Promise.all([loadProblemSetDetail(), loadProblems()])
-  // 如果已加入题单，加载用户徽章
-  if (isJoined.value) {
-    await loadUserBadges()
-  }
-})
-
-// 监听路由变化，当从题单题目页面返回时刷新题单详情
-watch(
-  () => route.path,
-  (newPath, oldPath) => {
-    // 如果从题单题目页面返回到题单详情页面，刷新题单详情
-    if (
-      oldPath?.includes("/problem/") &&
-      newPath === `/problemset/${problemSetId.value}` &&
-      isJoined.value
-    ) {
-      refreshProblemSetDetail()
-      // 刷新用户徽章
-      loadUserBadges()
-    }
-  },
-)
+onMounted(init)
 </script>

 <template>
@@ -165,6 +141,16 @@ watch(
        </n-flex>

        <n-flex align="center">
+          <!-- 用户徽章显示区域 - 只在已加入且有徽章时显示 -->
+          <n-flex v-if="isJoined && userBadges.length > 0" align="center">
+            <n-text>已获徽章</n-text>
+            <UserBadge
+              v-for="badge in userBadges"
+              :key="badge.id"
+              :badge="badge"
+            />
+          </n-flex>
+
          <!-- 完成进度 - 只在已加入时显示 -->
          <n-flex align="center" v-if="isJoined">
            <n-text strong>完成进度</n-text>
@@ -198,24 +184,6 @@ 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
@@ -224,12 +192,12 @@ watch(
      >
        <n-card
          hoverable
-          @click="goToProblem(problemSetProblem.problem._id)"
+          @click="handleProblemClick(problemSetProblem.problem._id)"
          style="cursor: pointer"
        >
          <n-flex align="center">
            <Icon
-            style="margin-right: 12px;"
+              style="margin-right: 12px"
              width="50"
              icon="noto:check-mark-button"
              v-if="problemSetProblem.is_completed"
@@ -237,8 +205,8 @@ watch(

            <n-flex vertical style="flex: 1">
              <n-flex align="center">
-                <n-h4 style="margin: 0;">#{{ index + 1 }}</n-h4>
-                
+                <n-h4 style="margin: 0">#{{ index + 1 }}</n-h4>
+
                <n-h4 style="margin: 0">
                  {{ problemSetProblem.problem.title }}
                </n-h4>
--- a/src/oj/problemset/list.vue
+++ b/src/oj/problemset/list.vue
@@ -162,7 +162,11 @@ watch(
                  <n-tag type="warning" v-if="problemSet.status === 'archived'">
                    已归档
                  </n-tag>
-                  <n-tag v-if="problemSet.user_progress?.is_joined" type="success" size="small">
+                  <n-tag
+                    v-if="problemSet.user_progress?.is_joined"
+                    type="success"
+                    size="small"
+                  >
                    <template #icon>
                      <Icon icon="material-symbols:check-circle" width="12" />
                    </template>
@@ -173,17 +177,28 @@ watch(

              <!-- 用户进度显示 -->
              <div v-if="problemSet.user_progress?.is_joined">
-                <n-flex align="center" justify="space-between" style="margin-bottom: 8px">
+                <n-flex
+                  align="center"
+                  justify="space-between"
+                  style="margin-bottom: 8px"
+                >
                  <n-text depth="3" style="font-size: 12px">
-                    我的进度: {{ problemSet.user_progress.completed_count }} / {{ problemSet.user_progress.total_count }}
+                    我的进度: {{ problemSet.user_progress.completed_count }} /
+                    {{ problemSet.user_progress.total_count }}
                  </n-text>
                  <n-progress
                    type="line"
-                    :percentage="Math.round(problemSet.user_progress.progress_percentage)"
+                    :percentage="
+                      Math.round(problemSet.user_progress.progress_percentage)
+                    "
                    :height="4"
                    :border-radius="2"
                    style="width: 100px"
-                    :color="getProgressColor(problemSet.user_progress.progress_percentage)"
+                    :color="
+                      getProgressColor(
+                        problemSet.user_progress.progress_percentage,
+                      )
+                    "
                  />
                </n-flex>
              </div>
--- a/src/oj/submission/detail.vue
+++ b/src/oj/submission/detail.vue
@@ -23,6 +23,7 @@ const props = defineProps<{
  hideList?: boolean
 }>()

+const route = useRoute()
 const router = useRouter()
 const message = useMessage()

@@ -76,8 +77,8 @@ async function copyToProblem() {
    message.error("代码复制失败")
  }

-  // 判断是否是竞赛题目
  const contestID = submission.value!.contest
+  const problemSetId = <string>route.params.problemSetId ?? ""
  if (contestID) {
    // 竞赛题目
    router.push({
@@ -87,6 +88,15 @@ async function copyToProblem() {
        problemID: props.problemID,
      },
    })
+  } else if (problemSetId) {
+    // 题单题目
+    router.push({
+      name: "problemset problem",
+      params: {
+        problemSetId: problemSetId,
+        problemID: props.problemID,
+      },
+    })
  } else {
    // 普通题目
    router.push({