update

src/admin/problem/components/Modal.vue

@@ -42,13 +42,7 @@ const columns: DataTableColumn<AdminProblemFiltered>[] = [
 
 async function getList() {
   const offset = (query.page - 1) * query.limit
-  const res = await getProblemList(
-    offset,
-    query.limit,
-    query.keyword,
-    "",
-    "",
-  )
+  const res = await getProblemList(offset, query.limit, query.keyword, "", "")
   total.value = res.total
   problems.value = res.results
 }

src/admin/problemset/components/AddBadgeModal.vue

@@ -1,5 +1,15 @@
 <script setup lang="ts">
-import { NModal, NForm, NFormItem, NInput, NInputNumber, NSelect, NButton, NFlex, NImage } from "naive-ui"
+import {
+  NModal,
+  NForm,
+  NFormItem,
+  NInput,
+  NInputNumber,
+  NSelect,
+  NButton,
+  NFlex,
+  NImage,
+} from "naive-ui"
 
 interface Props {
   show: boolean
@@ -7,13 +17,16 @@ interface Props {
 
 interface Emits {
   (e: "update:show", value: boolean): void
-  (e: "confirm", data: {
-    name: string
-    description: string
-    icon: string
-    condition_type: "all_problems" | "problem_count" | "score"
-    condition_value?: number
-  }): void
+  (
+    e: "confirm",
+    data: {
+      name: string
+      description: string
+      icon: string
+      condition_type: "all_problems" | "problem_count" | "score"
+      condition_value?: number
+    },
+  ): void
 }
 
 const props = defineProps<Props>()
@@ -22,7 +35,9 @@ const emit = defineEmits<Emits>()
 const newBadgeName = ref("")
 const newBadgeDescription = ref("")
 const newBadgeIcon = ref("")
-const newBadgeConditionType = ref<"all_problems" | "problem_count" | "score">("all_problems")
+const newBadgeConditionType = ref<"all_problems" | "problem_count" | "score">(
+  "all_problems",
+)
 const newBadgeConditionValue = ref(1)
 
 // 预设奖章图标选项
@@ -61,15 +76,18 @@ function handleCancel() {
 }
 
 // 重置表单
-watch(() => props.show, (newVal) => {
-  if (newVal) {
-    newBadgeName.value = ""
-    newBadgeDescription.value = ""
-    newBadgeIcon.value = ""
-    newBadgeConditionType.value = "all_problems"
-    newBadgeConditionValue.value = 1
-  }
-})
+watch(
+  () => props.show,
+  (newVal) => {
+    if (newVal) {
+      newBadgeName.value = ""
+      newBadgeDescription.value = ""
+      newBadgeIcon.value = ""
+      newBadgeConditionType.value = "all_problems"
+      newBadgeConditionValue.value = 1
+    }
+  },
+)
 </script>
 
 <template>

src/admin/problemset/components/AddProblemModal.vue

@@ -1,5 +1,14 @@
 <script setup lang="ts">
-import { NModal, NForm, NFormItem, NInput, NInputNumber, NSwitch, NButton, NFlex } from "naive-ui"
+import {
+  NModal,
+  NForm,
+  NFormItem,
+  NInput,
+  NInputNumber,
+  NSwitch,
+  NButton,
+  NFlex,
+} from "naive-ui"
 
 interface Props {
   show: boolean
@@ -7,13 +16,16 @@ interface Props {
 
 interface Emits {
   (e: "update:show", value: boolean): void
-  (e: "confirm", data: {
-    problem_id: string
-    order: number
-    is_required: boolean
-    score: number
-    hint: string
-  }): void
+  (
+    e: "confirm",
+    data: {
+      problem_id: string
+      order: number
+      is_required: boolean
+      score: number
+      hint: string
+    },
+  ): void
 }
 
 const props = defineProps<Props>()
@@ -40,15 +52,18 @@ function handleCancel() {
 }
 
 // 重置表单
-watch(() => props.show, (newVal) => {
-  if (newVal) {
-    newProblemId.value = ""
-    newProblemOrder.value = 0
-    newProblemRequired.value = true
-    newProblemScore.value = 0
-    newProblemHint.value = ""
-  }
-})
+watch(
+  () => props.show,
+  (newVal) => {
+    if (newVal) {
+      newProblemId.value = ""
+      newProblemOrder.value = 0
+      newProblemRequired.value = true
+      newProblemScore.value = 0
+      newProblemHint.value = ""
+    }
+  },
+)
 </script>
 
 <template>

src/admin/problemset/components/BadgeManagement.vue

@@ -19,15 +19,9 @@ defineEmits<Emits>()
 
 <template>
   <div>
-    <n-flex
-      justify="space-between"
-      align="center"
-      style="margin-bottom: 16px"
-    >
+    <n-flex justify="space-between" align="center" style="margin-bottom: 16px">
       <h3>奖章列表</h3>
-      <n-button type="primary" @click="$emit('add-badge')">
-        添加奖章
-      </n-button>
+      <n-button type="primary" @click="$emit('add-badge')"> 添加奖章 </n-button>
     </n-flex>
     <n-data-table
       :columns="[

src/admin/problemset/components/EditBadgeModal.vue

@@ -1,5 +1,15 @@
 <script setup lang="ts">
-import { NModal, NForm, NFormItem, NInput, NInputNumber, NSelect, NButton, NFlex, NImage } from "naive-ui"
+import {
+  NModal,
+  NForm,
+  NFormItem,
+  NInput,
+  NInputNumber,
+  NSelect,
+  NButton,
+  NFlex,
+  NImage,
+} from "naive-ui"
 import { ProblemSetBadge } from "utils/types"
 
 interface Props {
@@ -9,13 +19,16 @@ interface Props {
 
 interface Emits {
   (e: "update:show", value: boolean): void
-  (e: "confirm", data: {
-    name: string
-    description: string
-    icon: string
-    condition_type: "all_problems" | "problem_count" | "score"
-    condition_value?: number
-  }): void
+  (
+    e: "confirm",
+    data: {
+      name: string
+      description: string
+      icon: string
+      condition_type: "all_problems" | "problem_count" | "score"
+      condition_value?: number
+    },
+  ): void
 }
 
 const props = defineProps<Props>()
@@ -24,7 +37,9 @@ const emit = defineEmits<Emits>()
 const editBadgeName = ref("")
 const editBadgeDescription = ref("")
 const editBadgeIcon = ref("")
-const editBadgeConditionType = ref<"all_problems" | "problem_count" | "score">("all_problems")
+const editBadgeConditionType = ref<"all_problems" | "problem_count" | "score">(
+  "all_problems",
+)
 const editBadgeConditionValue = ref(1)
 
 // 预设奖章图标选项
@@ -63,15 +78,19 @@ function handleCancel() {
 }
 
 // 当奖章数据变化时，更新表单数据
-watch(() => props.badge, (newBadge) => {
-  if (newBadge) {
-    editBadgeName.value = newBadge.name
-    editBadgeDescription.value = newBadge.description
-    editBadgeIcon.value = newBadge.icon
-    editBadgeConditionType.value = newBadge.condition_type
-    editBadgeConditionValue.value = newBadge.condition_value
-  }
-}, { immediate: true })
+watch(
+  () => props.badge,
+  (newBadge) => {
+    if (newBadge) {
+      editBadgeName.value = newBadge.name
+      editBadgeDescription.value = newBadge.description
+      editBadgeIcon.value = newBadge.icon
+      editBadgeConditionType.value = newBadge.condition_type
+      editBadgeConditionValue.value = newBadge.condition_value
+    }
+  },
+  { immediate: true },
+)
 </script>
 
 <template>

src/admin/problemset/components/EditProblemModal.vue

@@ -1,5 +1,14 @@
 <script setup lang="ts">
-import { NModal, NForm, NFormItem, NInput, NInputNumber, NSwitch, NButton, NFlex } from "naive-ui"
+import {
+  NModal,
+  NForm,
+  NFormItem,
+  NInput,
+  NInputNumber,
+  NSwitch,
+  NButton,
+  NFlex,
+} from "naive-ui"
 import { ProblemSetProblem } from "utils/types"
 
 interface Props {
@@ -9,12 +18,15 @@ interface Props {
 
 interface Emits {
   (e: "update:show", value: boolean): void
-  (e: "confirm", data: {
-    order: number
-    is_required: boolean
-    score: number
-    hint: string
-  }): void
+  (
+    e: "confirm",
+    data: {
+      order: number
+      is_required: boolean
+      score: number
+      hint: string
+    },
+  ): void
 }
 
 const props = defineProps<Props>()
@@ -30,7 +42,7 @@ function handleConfirm() {
     order: editProblemOrder.value,
     is_required: editProblemRequired.value,
     score: editProblemScore.value,
-    hint: editProblemHint.value,
+    hint: editProblemHint.value || "",
   })
 }
 
@@ -39,14 +51,18 @@ function handleCancel() {
 }
 
 // 当问题数据变化时，更新表单数据
-watch(() => props.problem, (newProblem) => {
-  if (newProblem) {
-    editProblemOrder.value = newProblem.order
-    editProblemRequired.value = newProblem.is_required
-    editProblemScore.value = newProblem.score
-    editProblemHint.value = newProblem.hint
-  }
-}, { immediate: true })
+watch(
+  () => props.problem,
+  (newProblem) => {
+    if (newProblem) {
+      editProblemOrder.value = newProblem.order
+      editProblemRequired.value = newProblem.is_required
+      editProblemScore.value = newProblem.score
+      editProblemHint.value = newProblem.hint || ""
+    }
+  },
+  { immediate: true },
+)
 </script>
 
 <template>

src/admin/problemset/components/ProblemManagement.vue

@@ -19,11 +19,7 @@ defineEmits<Emits>()
 
 <template>
   <div>
-    <n-flex
-      justify="space-between"
-      align="center"
-      style="margin-bottom: 16px"
-    >
+    <n-flex justify="space-between" align="center" style="margin-bottom: 16px">
       <h3>题目列表</h3>
       <n-button type="primary" @click="$emit('add-problem')">
         添加题目

src/admin/problemset/components/ProgressManagement.vue

@@ -60,11 +60,7 @@ const progressColumns = [
 
 <template>
   <div>
-    <n-flex
-      justify="space-between"
-      align="center"
-      style="margin-bottom: 16px"
-    >
+    <n-flex justify="space-between" align="center" style="margin-bottom: 16px">
       <h3>用户进度</h3>
     </n-flex>
     <n-data-table :columns="progressColumns" :data="progress" />

src/admin/problemset/detail.vue

@@ -242,18 +242,15 @@ onMounted(() => {
       v-model:show="showAddProblemModal"
       @confirm="handleAddProblem"
     />
-    
+
     <EditProblemModal
       v-model:show="showEditProblemModal"
       :problem="editingProblem"
       @confirm="handleEditProblem"
     />
-    
-    <AddBadgeModal
-      v-model:show="showAddBadgeModal"
-      @confirm="handleAddBadge"
-    />
-    
+
+    <AddBadgeModal v-model:show="showAddBadgeModal" @confirm="handleAddBadge" />
+
     <EditBadgeModal
       v-model:show="showEditBadgeModal"
       :badge="editingBadge"

src/admin/problemset/list.vue

@@ -148,7 +148,10 @@ watchDebounced(() => query.keyword, listProblemSets, {
 })
 
 // 监听其他查询条件变化
-watch(() => [query.page, query.limit, query.difficulty, query.status], listProblemSets)
+watch(
+  () => [query.page, query.limit, query.difficulty, query.status],
+  listProblemSets,
+)
 </script>
 
 <template>

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>

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"
 
 // ==================== 类型定义 ====================

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 },

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>

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>

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({

src/shared/components/FlowchartEditor/CustomNode.vue

@@ -215,7 +215,6 @@ onUnmounted(() => {
   filter: brightness(1.1);
 }
 
-
 /* 节点内容区域 */
 .node-content {
   position: relative;

src/shared/components/Header.vue

@@ -95,7 +95,8 @@ const menus = computed<MenuOption[]>(() => [
     icon: renderIcon("streamline-emojis:blossom"),
   },
   {
-    label: () => h(RouterLink, { to: "/problemset" }, { default: () => "题单" }),
+    label: () =>
+      h(RouterLink, { to: "/problemset" }, { default: () => "题单" }),
     key: "problemset",
     icon: renderIcon("streamline-emojis:green-book"),
   },

src/shared/components/UserBadge.vue

@@ -1,26 +1,30 @@
 <template>
-  <n-tooltip trigger="hover" :show-arrow="false">
+  <n-popover trigger="hover" placement="top">
     <template #trigger>
       <div class="badge-container">
-        <img 
-          :src="badge.badge.icon" 
+        <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>
+    <n-card size="small" class="badge-popover">
+      <n-flex vertical>
+        <n-text strong>{{ badge.badge.name }}</n-text>
+        <n-tag type="info"> 获得条件：{{ getConditionText() }} </n-tag>
+        <n-text depth="3">
+          获得时间：{{ parseTime(badge.earned_time, "YYYY-MM-DD HH:mm:ss") }}
+        </n-text>
+      </n-flex>
+    </n-card>
+  </n-popover>
 </template>
 
 <script setup lang="ts">
 import { UserBadge } from "utils/types"
-
+import { parseTime } from "utils/functions"
 interface Props {
   badge: UserBadge
 }
@@ -30,17 +34,22 @@ const props = defineProps<Props>()
 function handleImageError(event: Event) {
   const img = event.target as HTMLImageElement
   // 如果图片加载失败，显示默认图标
-  img.src = '/badge-1.png' // 使用默认徽章图标
+  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'
-  })
+function getConditionText() {
+  const { condition_type, condition_value } = props.badge.badge
+
+  switch (condition_type) {
+    case "all_problems":
+      return "完成所有题目"
+    case "problem_count":
+      return `完成 ${condition_value} 道题目`
+    case "score":
+      return `获得 ${condition_value} 分`
+    default:
+      return "未知条件"
+  }
 }
 </script>
 
@@ -49,6 +58,8 @@ function formatTime(date: Date) {
   position: relative;
   display: inline-block;
   cursor: pointer;
+  width: 50px;
+  height: 50px;
 }
 
 .badge-icon {
@@ -66,27 +77,11 @@ function formatTime(date: Date) {
   box-shadow: 0 4px 12px rgba(24, 144, 255, 0.3);
 }
 
-
-.badge-tooltip {
-  max-width: 250px;
+.badge-popover {
+  max-width: 280px;
 }
 
-.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;
+.badge-popover .n-space {
+  gap: 6px;
 }
 </style>

src/shared/composables/useMermaid.ts

@@ -3,7 +3,7 @@ import { getRandomId } from "utils/functions"
 export function useMermaid() {
   // 渲染状态
   const renderError = ref<string | null>(null)
-  
+
   // 动态导入 mermaid
   let mermaid: any = null
 
@@ -22,7 +22,10 @@ export function useMermaid() {
   }
 
   // 渲染流程图的函数
-  const renderFlowchart = async (container: HTMLElement | null, mermaidCode: string) => {
+  const renderFlowchart = async (
+    container: HTMLElement | null,
+    mermaidCode: string,
+  ) => {
     try {
       renderError.value = null
 
@@ -37,7 +40,9 @@ export function useMermaid() {
       }
     } catch (error) {
       renderError.value =
-        error instanceof Error ? error.message : "流程图渲染失败，请检查代码格式"
+        error instanceof Error
+          ? error.message
+          : "流程图渲染失败，请检查代码格式"
     }
   }
 

src/utils/functions.ts

@@ -231,7 +231,7 @@ export async function copyToClipboard(text: string): Promise<boolean> {
 export function getRandomId() {
   const nanoid = customAlphabet("0123456789abcdefghijklmnopqrstuvwxyz")
   return nanoid()
-} 
+}
 
 // function getChromeVersion() {
 //   var raw = navigator.userAgent.match(/Chrom(e|ium)\/([0-9]+)\./)

src/utils/types.ts

@@ -610,5 +610,3 @@ export interface DetailsData {
 }
 
 export type Grade = "S" | "A" | "B" | "C"
-
-