From df24bf7f5442a5529f8731e6fe1ea18c1ff6cec0 Mon Sep 17 00:00:00 2001
From: yuetsh <517252939@qq.com>
Date: Thu, 23 Oct 2025 23:20:00 +0800
Subject: [PATCH] update

---
 .../problemset/components/AddBadgeModal.vue   |  12 -
 .../problemset/components/AddProblemModal.vue |  11 -
 .../problemset/components/BadgeManagement.vue |   2 +-
 .../problemset/components/EditBadgeModal.vue  |  11 -
 .../components/EditProblemModal.vue           |  10 -
 .../problemset/components/ProblemSetInfo.vue  |   1 -
 .../components/ProgressManagement.vue         |   2 +-
 src/admin/problemset/list.vue                 |   9 +-
 src/oj/api.ts                                 |   5 +
 src/oj/problem/components/ProblemContent.vue  |  40 +--
 src/oj/problem/detail.vue                     |  34 ++-
 .../components/ProblemSetHeader.vue           | 106 +++++++
 .../components/ProblemSetProblemsList.vue     |  81 +++++
 .../components/UserProgressView.vue           | 157 ++++++++++
 src/oj/problemset/detail.vue                  | 175 +++--------
 src/oj/problemset/list.vue                    | 283 +++++++++---------
 src/shared/components/UserBadge.vue           |   4 +-
 src/utils/types.ts                            |   7 +
 18 files changed, 591 insertions(+), 359 deletions(-)
 create mode 100644 src/oj/problemset/components/ProblemSetHeader.vue
 create mode 100644 src/oj/problemset/components/ProblemSetProblemsList.vue
 create mode 100644 src/oj/problemset/components/UserProgressView.vue

diff --git a/src/admin/problemset/components/AddBadgeModal.vue b/src/admin/problemset/components/AddBadgeModal.vue
index e66f8ea..714f4d6 100644
--- a/src/admin/problemset/components/AddBadgeModal.vue
+++ b/src/admin/problemset/components/AddBadgeModal.vue
@@ -1,16 +1,4 @@
 <script setup lang="ts">
-import {
-  NModal,
-  NForm,
-  NFormItem,
-  NInput,
-  NInputNumber,
-  NSelect,
-  NButton,
-  NFlex,
-  NImage,
-} from "naive-ui"
-
 interface Props {
   show: boolean
 }
diff --git a/src/admin/problemset/components/AddProblemModal.vue b/src/admin/problemset/components/AddProblemModal.vue
index 076ab91..90cfece 100644
--- a/src/admin/problemset/components/AddProblemModal.vue
+++ b/src/admin/problemset/components/AddProblemModal.vue
@@ -1,15 +1,4 @@
 <script setup lang="ts">
-import {
-  NModal,
-  NForm,
-  NFormItem,
-  NInput,
-  NInputNumber,
-  NSwitch,
-  NButton,
-  NFlex,
-} from "naive-ui"
-
 interface Props {
   show: boolean
 }
diff --git a/src/admin/problemset/components/BadgeManagement.vue b/src/admin/problemset/components/BadgeManagement.vue
index 0b33b46..74d2852 100644
--- a/src/admin/problemset/components/BadgeManagement.vue
+++ b/src/admin/problemset/components/BadgeManagement.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { h } from "vue"
-import { NDataTable, NButton, NFlex, NImage } from "naive-ui"
 import { ProblemSetBadge } from "utils/types"
+import { NButton, NImage } from "naive-ui"
 
 interface Props {
   badges: ProblemSetBadge[]
diff --git a/src/admin/problemset/components/EditBadgeModal.vue b/src/admin/problemset/components/EditBadgeModal.vue
index c3a3f13..5c5c1f3 100644
--- a/src/admin/problemset/components/EditBadgeModal.vue
+++ b/src/admin/problemset/components/EditBadgeModal.vue
@@ -1,15 +1,4 @@
 <script setup lang="ts">
-import {
-  NModal,
-  NForm,
-  NFormItem,
-  NInput,
-  NInputNumber,
-  NSelect,
-  NButton,
-  NFlex,
-  NImage,
-} from "naive-ui"
 import { ProblemSetBadge } from "utils/types"
 
 interface Props {
diff --git a/src/admin/problemset/components/EditProblemModal.vue b/src/admin/problemset/components/EditProblemModal.vue
index a2b8d61..1dc0cc5 100644
--- a/src/admin/problemset/components/EditProblemModal.vue
+++ b/src/admin/problemset/components/EditProblemModal.vue
@@ -1,14 +1,4 @@
 <script setup lang="ts">
-import {
-  NModal,
-  NForm,
-  NFormItem,
-  NInput,
-  NInputNumber,
-  NSwitch,
-  NButton,
-  NFlex,
-} from "naive-ui"
 import { ProblemSetProblem } from "utils/types"
 
 interface Props {
diff --git a/src/admin/problemset/components/ProblemSetInfo.vue b/src/admin/problemset/components/ProblemSetInfo.vue
index d5a1cc2..44289f3 100644
--- a/src/admin/problemset/components/ProblemSetInfo.vue
+++ b/src/admin/problemset/components/ProblemSetInfo.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { NCard, NTag, NButton, NFlex } from "naive-ui"
 import { parseTime } from "utils/functions"
 import { ProblemSet } from "utils/types"
 
diff --git a/src/admin/problemset/components/ProgressManagement.vue b/src/admin/problemset/components/ProgressManagement.vue
index 89ef374..281e828 100644
--- a/src/admin/problemset/components/ProgressManagement.vue
+++ b/src/admin/problemset/components/ProgressManagement.vue
@@ -31,7 +31,7 @@ const progressColumns = [
     title: "进度",
     key: "progress_percentage",
     width: 100,
-    render: (row: ProblemSetProgress) => `${row.progress_percentage}%`,
+    render: (row: ProblemSetProgress) => `${row.progress_percentage.toFixed(0)}%`,
   },
   {
     title: "是否完成",
diff --git a/src/admin/problemset/list.vue b/src/admin/problemset/list.vue
index daea15b..e11a7d8 100644
--- a/src/admin/problemset/list.vue
+++ b/src/admin/problemset/list.vue
@@ -1,16 +1,11 @@
 <script setup lang="ts">
-import { NSwitch, NSelect, NTag } from "naive-ui"
 import Pagination from "shared/components/Pagination.vue"
 import { usePagination } from "shared/composables/pagination"
 import { parseTime } from "utils/functions"
 import { ProblemSetList } from "utils/types"
-import {
-  getProblemSetList,
-  toggleProblemSetVisible,
-  updateProblemSetStatus,
-  deleteProblemSet,
-} from "../api"
+import { getProblemSetList, toggleProblemSetVisible } from "../api"
 import Actions from "./components/Actions.vue"
+import { NTag, NSwitch } from "naive-ui"
 
 const total = ref(0)
 const problemSets = ref<ProblemSetList[]>([])
diff --git a/src/oj/api.ts b/src/oj/api.ts
index d6449ea..dac4b0d 100644
--- a/src/oj/api.ts
+++ b/src/oj/api.ts
@@ -359,3 +359,8 @@ export function getUserBadges() {
 export function getProblemSetBadges(problemSetId: number) {
   return http.get(`problemset/${problemSetId}/badges`)
 }
+
+// 获取题单用户进度列表
+export function getProblemSetUserProgress(problemSetId: number) {
+  return http.get(`problemset/${problemSetId}/users_progress`)
+}
diff --git a/src/oj/problem/components/ProblemContent.vue b/src/oj/problem/components/ProblemContent.vue
index 072abce..0a1b543 100644
--- a/src/oj/problem/components/ProblemContent.vue
+++ b/src/oj/problem/components/ProblemContent.vue
@@ -18,10 +18,13 @@ type Sample = Problem["samples"][number] & {
 const theme = useThemeVars()
 const style = computed(() => "color: " + theme.value.primaryColor)
 
+const route = useRoute()
 const codeStore = useCodeStore()
 const problemStore = useProblemStore()
 const { problem } = storeToRefs(problemStore)
 
+const problemSetId = computed(() => route.params.problemSetId)
+
 // 判断用户是否尝试过但未通过
 // my_status === 0: 已通过
 // my_status !== 0 && my_status !== null: 尝试过但未通过
@@ -106,24 +109,27 @@ function type(status: ProblemStatus) {
 
 <template>
   <div v-if="problem" class="problemContent">
-    <!-- 已通过 -->
-    <n-alert
-      class="status-alert"
-      v-if="problem.my_status === 0"
-      type="success"
-      title="🎉 本 题 已 经 被 你 解 决 啦"
-    >
-    </n-alert>
+    <template v-if="!problemSetId">
+      <!-- 已通过 -->
+      <n-alert
+        class="status-alert"
+        v-if="problem.my_status === 0"
+        type="success"
+        title="🎉 本 题 已 经 被 你 解 决 啦"
+      >
+      </n-alert>
+
+      <!-- 尝试过但未通过 -->
+      <n-alert
+        class="status-alert"
+        v-else-if="hasTriedButNotPassed"
+        type="warning"
+        title="💪 你已经尝试过这道题，但还没有通过"
+      >
+        不要放弃！仔细检查代码逻辑，或者寻求 AI 的帮助获取灵感。
+      </n-alert>
+    </template>
 
-    <!-- 尝试过但未通过 -->
-    <n-alert
-      class="status-alert"
-      v-else-if="hasTriedButNotPassed"
-      type="warning"
-      title="💪 你已经尝试过这道题，但还没有通过"
-    >
-      不要放弃！仔细检查代码逻辑，或者寻求 AI 的帮助获取灵感。
-    </n-alert>
     <n-flex align="center">
       <n-tag>{{ problem._id }}</n-tag>
       <h2 class="problemTitle">{{ problem.title }}</h2>
diff --git a/src/oj/problem/detail.vue b/src/oj/problem/detail.vue
index c4d9807..71def80 100644
--- a/src/oj/problem/detail.vue
+++ b/src/oj/problem/detail.vue
@@ -130,13 +130,26 @@ watch(isMobile, (value) => {
           >
             <ProblemFlowchart />
           </n-tab-pane>
-          <n-tab-pane name="info" tab="题目统计">
+          <n-tab-pane
+            name="info"
+            tab="题目统计"
+            :disabled="!!props.problemSetId"
+          >
             <ProblemInfo />
           </n-tab-pane>
-          <n-tab-pane v-if="!props.contestID" name="comment" tab="题目点评">
+          <n-tab-pane
+            v-if="!props.contestID"
+            name="comment"
+            tab="题目点评"
+            :disabled="!!props.problemSetId"
+          >
             <ProblemComment />
           </n-tab-pane>
-          <n-tab-pane name="submission" tab="我的提交">
+          <n-tab-pane
+            name="submission"
+            tab="我的提交"
+            :disabled="!!props.problemSetId"
+          >
             <ProblemSubmission />
           </n-tab-pane>
         </n-tabs>
@@ -151,13 +164,22 @@ watch(isMobile, (value) => {
         <n-tab-pane name="editor" tab="代码">
           <component :is="inProblem ? ProblemEditor : ContestEditor" />
         </n-tab-pane>
-        <n-tab-pane name="info" tab="统计">
+        <n-tab-pane name="info" tab="统计" :disabled="!!props.problemSetId">
           <ProblemInfo />
         </n-tab-pane>
-        <n-tab-pane v-if="!props.contestID" name="comment" tab="点评">
+        <n-tab-pane
+          v-if="!props.contestID"
+          name="comment"
+          tab="点评"
+          :disabled="!!props.problemSetId"
+        >
           <ProblemComment />
         </n-tab-pane>
-        <n-tab-pane name="submission" tab="提交">
+        <n-tab-pane
+          name="submission"
+          tab="提交"
+          :disabled="!!props.problemSetId"
+        >
           <ProblemSubmission />
         </n-tab-pane>
       </n-tabs>
diff --git a/src/oj/problemset/components/ProblemSetHeader.vue b/src/oj/problemset/components/ProblemSetHeader.vue
new file mode 100644
index 0000000..45b7e97
--- /dev/null
+++ b/src/oj/problemset/components/ProblemSetHeader.vue
@@ -0,0 +1,106 @@
+<script setup lang="ts">
+import { Icon } from "@iconify/vue"
+import { ProblemSet, UserBadge as UserBadgeType } from "utils/types"
+import UserBadge from "shared/components/UserBadge.vue"
+
+interface Props {
+  problemSet: ProblemSet
+  isJoined: boolean
+  isJoining: boolean
+  userBadges: UserBadgeType[]
+}
+
+interface Emits {
+  (e: 'join'): void
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<Emits>()
+
+function getDifficultyTag(difficulty: string) {
+  const difficultyMap: Record<
+    string,
+    { type: "success" | "warning" | "error" | "default"; text: string }
+  > = {
+    Easy: { type: "success", text: "简单" },
+    Medium: { type: "warning", text: "中等" },
+    Hard: { type: "error", text: "困难" },
+  }
+  return difficultyMap[difficulty] || { type: "default", text: "未知" }
+}
+
+function getProgressPercentage() {
+  if (!props.problemSet) return 0
+  return Math.round(
+    (props.problemSet.completed_count / props.problemSet.problems_count) * 100,
+  )
+}
+
+function handleJoin() {
+  emit('join')
+}
+</script>
+
+<template>
+  <n-card style="margin-bottom: 24px;">
+    <n-flex justify="space-between" align="center">
+      <n-flex align="center">
+        <n-tag type="warning" v-if="problemSet.status === 'archived'">
+          已归档
+        </n-tag>
+        <n-tag :type="getDifficultyTag(problemSet.difficulty).type">
+          {{ getDifficultyTag(problemSet.difficulty).text }}
+        </n-tag>
+        <n-h2 style="margin: 0">{{ problemSet.title }}</n-h2>
+        <n-tooltip trigger="hover" v-if="problemSet.description">
+          <template #trigger>
+            <Icon width="20" icon="emojione:information" />
+          </template>
+          {{ problemSet.description }}
+        </n-tooltip>
+      </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>
+          <n-text>
+            {{ problemSet.completed_count }} / {{ problemSet.problems_count }}
+          </n-text>
+        </n-flex>
+        <n-progress
+          v-if="isJoined"
+          :percentage="getProgressPercentage()"
+          :height="8"
+          :border-radius="4"
+          style="width: 200px"
+        />
+        <n-button
+          v-if="!isJoined"
+          type="primary"
+          size="large"
+          :loading="isJoining"
+          @click="handleJoin"
+        >
+          加入题单
+        </n-button>
+        <n-tag v-else type="success" size="large">
+          <template #icon>
+            <Icon icon="material-symbols:check-circle" />
+          </template>
+          已加入
+        </n-tag>
+      </n-flex>
+    </n-flex>
+  </n-card>
+</template>
diff --git a/src/oj/problemset/components/ProblemSetProblemsList.vue b/src/oj/problemset/components/ProblemSetProblemsList.vue
new file mode 100644
index 0000000..67de4f2
--- /dev/null
+++ b/src/oj/problemset/components/ProblemSetProblemsList.vue
@@ -0,0 +1,81 @@
+<script setup lang="ts">
+import { Icon } from "@iconify/vue"
+import { ProblemSetProblem } from "utils/types"
+import { DIFFICULTY } from "utils/constants"
+import { getTagColor } from "utils/functions"
+import { useBreakpoints } from "shared/composables/breakpoints"
+
+interface Props {
+  problems: ProblemSetProblem[]
+  isJoined: boolean
+}
+
+interface Emits {
+  (e: 'problem-click', problemId: string): void
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<Emits>()
+
+const { isDesktop } = useBreakpoints()
+
+function handleProblemClick(problemId: string) {
+  emit('problem-click', problemId)
+}
+</script>
+
+<template>
+  <div>
+    <n-grid :cols="isDesktop ? 4 : 1" :x-gap="16" :y-gap="16">
+      <n-grid-item
+        v-for="(problemSetProblem, index) in problems"
+        :key="problemSetProblem.id"
+      >
+        <n-card
+          hoverable
+          @click="handleProblemClick(problemSetProblem.problem._id)"
+          style="cursor: pointer"
+        >
+          <n-flex align="center">
+            <Icon
+              style="margin-right: 10px"
+              width="48"
+              icon="noto:check-mark-button"
+              v-if="problemSetProblem.is_completed"
+            />
+
+            <n-flex vertical style="flex: 1">
+              <n-flex align="center">
+                <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-flex>
+            </n-flex>
+          </n-flex>
+        </n-card>
+      </n-grid-item>
+    </n-grid>
+    <div class="tip">
+      <n-text depth="3">题目完成后会自动返回题单页面</n-text>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.tip {
+  padding-top: 24px;
+  text-align: center;
+}
+</style>
diff --git a/src/oj/problemset/components/UserProgressView.vue b/src/oj/problemset/components/UserProgressView.vue
new file mode 100644
index 0000000..5ec2a21
--- /dev/null
+++ b/src/oj/problemset/components/UserProgressView.vue
@@ -0,0 +1,157 @@
+<script setup lang="ts">
+import { h, computed, ref, onMounted } from "vue"
+import { Icon } from "@iconify/vue"
+import { parseTime } from "utils/functions"
+import { ProblemSetProgress } from "utils/types"
+import { getProblemSetUserProgress } from "../../api"
+import { NP, NProgress, NTag, useMessage } from "naive-ui"
+
+const message = useMessage()
+
+const route = useRoute()
+const problemSetId = computed(() => Number(route.params.problemSetId))
+const progress = ref<ProblemSetProgress[]>([])
+const loading = ref(false)
+
+// 加载用户进度数据
+async function loadUserProgress() {
+  loading.value = true
+  try {
+    const res = await getProblemSetUserProgress(problemSetId.value)
+    progress.value = res.data
+  } catch (err: any) {
+    message.error("加载用户进度失败：" + (err.data || "未知错误"))
+  } finally {
+    loading.value = false
+  }
+}
+
+// 计算统计数据
+const stats = computed(() => {
+  const total = progress.value.length
+  const completed = progress.value.filter((p) => p.is_completed).length
+  const avgProgress =
+    total > 0
+      ? progress.value.reduce((sum, p) => sum + p.progress_percentage, 0) /
+        total
+      : 0
+
+  return {
+    total,
+    completed,
+    avgProgress: Math.round(avgProgress),
+  }
+})
+
+onMounted(loadUserProgress)
+
+// 定义表格列
+const progressColumns = [
+  {
+    title: "排名",
+    key: "rank",
+    width: 80,
+    render: (row: ProblemSetProgress, index: number) => index + 1,
+  },
+  {
+    title: "用户",
+    key: "user.username",
+    width: 120,
+    render: (row: ProblemSetProgress) => row.user.username,
+  },
+  {
+    title: "加入时间",
+    key: "join_time",
+    width: 180,
+    render: (row: ProblemSetProgress) =>
+      parseTime(row.join_time, "YYYY-MM-DD HH:mm:ss"),
+  },
+  {
+    title: "已完成数量",
+    key: "completed_problems_count",
+    width: 100,
+  },
+  {
+    title: "已完成题目",
+    key: "completed_problems",
+    width: 300,
+    render: (row: ProblemSetProgress) => {
+      return h("div", { style: "max-height: 120px; overflow-y: auto" }, [
+        h(
+          "div",
+          { style: "display: flex; flex-wrap: wrap; gap: 4px" },
+          row.completed_problems.map((problem: any) =>
+            h(
+              NTag,
+              {
+                type: "success",
+                size: "small",
+                style: "margin: 2px",
+              },
+              `${problem._id}: ${problem.title}`,
+            ),
+          ),
+        ),
+      ])
+    },
+  },
+  {
+    title: "进度",
+    key: "progress_percentage",
+    width: 120,
+    render: (row: ProblemSetProgress) => {
+      return `${row.progress_percentage.toFixed(0)}%`
+    },
+  },
+  {
+    title: "状态",
+    key: "is_completed",
+    width: 100,
+    render: (row: ProblemSetProgress) => {
+      if (row.is_completed) {
+        return h(NTag, { type: "success" }, "已完成")
+      } else {
+        return h(NTag, { type: "warning" }, "进行中")
+      }
+    },
+  },
+]
+
+</script>
+
+<template>
+  <div>
+    <n-flex justify="space-between" align="center" style="margin-bottom: 16px">
+      <n-h3 style="margin: 0">用户进度</n-h3>
+      <n-text depth="3">共 {{ stats.total }} 人参与</n-text>
+    </n-flex>
+
+    <!-- 统计信息卡片 -->
+    <n-grid :cols="3" :x-gap="16" style="margin-bottom: 16px">
+      <n-grid-item>
+        <n-card size="small">
+          <n-statistic label="总参与人数" :value="stats.total" />
+        </n-card>
+      </n-grid-item>
+      <n-grid-item>
+        <n-card size="small">
+          <n-statistic label="已完成人数" :value="stats.completed" />
+        </n-card>
+      </n-grid-item>
+      <n-grid-item>
+        <n-card size="small">
+          <n-statistic label="平均进度" :value="stats.avgProgress.toFixed(0) + '%'" />
+        </n-card>
+      </n-grid-item>
+    </n-grid>
+
+    <n-data-table
+      :columns="progressColumns"
+      :data="progress"
+      :loading="loading"
+      :pagination="false"
+      :bordered="false"
+      :single-line="false"
+    />
+  </div>
+</template>
diff --git a/src/oj/problemset/detail.vue b/src/oj/problemset/detail.vue
index b01011f..bdcd12a 100644
--- a/src/oj/problemset/detail.vue
+++ b/src/oj/problemset/detail.vue
@@ -1,28 +1,27 @@
 <script setup lang="ts">
-import { Icon } from "@iconify/vue"
 import {
   getProblemSetDetail,
   getProblemSetProblems,
   joinProblemSet,
   getUserBadges,
 } from "../api"
-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"
+import ProblemSetHeader from "./components/ProblemSetHeader.vue"
+import ProblemSetProblemsList from "./components/ProblemSetProblemsList.vue"
+import UserProgressView from "./components/UserProgressView.vue"
+import { useUserStore } from "shared/store/user"
 
 const route = useRoute()
 const router = useRouter()
 const message = useMessage()
 
-const { isDesktop } = useBreakpoints()
 const { celebrate } = useFireworks()
+const userStore = useUserStore()
 
 const problemSetId = computed(() => Number(route.params.problemSetId))
 
@@ -31,25 +30,7 @@ const problems = ref<ProblemSetProblem[]>([])
 const isJoined = ref(false)
 const isJoining = ref(false)
 const userBadges = ref<UserBadgeType[]>([])
-
-function getDifficultyTag(difficulty: string) {
-  const difficultyMap: Record<
-    string,
-    { type: "success" | "warning" | "error" | "default"; text: string }
-  > = {
-    Easy: { type: "success", text: "简单" },
-    Medium: { type: "warning", text: "中等" },
-    Hard: { type: "error", text: "困难" },
-  }
-  return difficultyMap[difficulty] || { type: "default", text: "未知" }
-}
-
-function getProgressPercentage() {
-  if (!problemSet.value) return 0
-  return Math.round(
-    (problemSet.value.completed_count / problemSet.value.problems_count) * 100,
-  )
-}
+const activeTab = ref("problems")
 
 async function loadProblemSetDetail() {
   const res = await getProblemSetDetail(problemSetId.value)
@@ -112,123 +93,43 @@ async function handleJoinProblemSet() {
   }
 }
 
+const showTabs = computed(
+  () =>
+    userStore.isSuperAdmin ||
+    (isJoined.value && problemSet.value?.user_progress?.is_completed),
+)
+
 onMounted(init)
 </script>
 
 <template>
   <div v-if="problemSet">
-    <n-card style="margin-bottom: 24px">
-      <n-flex justify="space-between" align="center">
-        <n-flex align="center">
-          <n-tag type="warning" v-if="problemSet.status === 'archived'">
-            已归档
-          </n-tag>
-          <n-tag :type="getDifficultyTag(problemSet.difficulty).type">
-            {{ getDifficultyTag(problemSet.difficulty).text }}
-          </n-tag>
-          <n-h2 style="margin: 0">{{ problemSet.title }}</n-h2>
-          <n-tooltip trigger="hover" v-if="problemSet.description">
-            <template #trigger>
-              <Icon width="20" icon="emojione:information" />
-            </template>
-            {{ problemSet.description }}
-          </n-tooltip>
-        </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>
-            <n-text>
-              {{ problemSet.completed_count }} / {{ problemSet.problems_count }}
-            </n-text>
-          </n-flex>
-          <n-progress
-            v-if="isJoined"
-            :percentage="getProgressPercentage()"
-            :height="8"
-            :border-radius="4"
-            style="width: 200px"
-          />
-          <n-button
-            v-if="!isJoined"
-            type="primary"
-            size="large"
-            :loading="isJoining"
-            @click="handleJoinProblemSet"
-          >
-            加入题单
-          </n-button>
-          <n-tag v-else type="success" size="large">
-            <template #icon>
-              <Icon icon="material-symbols:check-circle" />
-            </template>
-            已加入
-          </n-tag>
-        </n-flex>
-      </n-flex>
-    </n-card>
-    <n-grid :cols="isDesktop ? 4 : 1" :x-gap="16" :y-gap="16">
-      <n-grid-item
-        v-for="(problemSetProblem, index) in problems"
-        :key="problemSetProblem.id"
-      >
-        <n-card
-          hoverable
-          @click="handleProblemClick(problemSetProblem.problem._id)"
-          style="cursor: pointer"
-        >
-          <n-flex align="center">
-            <Icon
-              style="margin-right: 10px"
-              width="48"
-              icon="noto:check-mark-button"
-              v-if="problemSetProblem.is_completed"
-            />
-
-            <n-flex vertical style="flex: 1">
-              <n-flex align="center">
-                <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-flex>
-            </n-flex>
-          </n-flex>
-        </n-card>
-      </n-grid-item>
-    </n-grid>
-
-    <div class="tip">
-      <n-text>题目完成后会自动返回题单页面</n-text>
-    </div>
+    <ProblemSetHeader
+      :problem-set="problemSet"
+      :is-joined="isJoined"
+      :is-joining="isJoining"
+      :user-badges="userBadges"
+      @join="handleJoinProblemSet"
+    />
+    <n-tabs v-if="showTabs" v-model:value="activeTab" animated>
+      <n-tab-pane name="problems" tab="题目列表">
+        <ProblemSetProblemsList
+          :problems="problems"
+          :is-joined="isJoined"
+          @problem-click="handleProblemClick"
+        />
+      </n-tab-pane>
+      <n-tab-pane name="progress" tab="用户进度">
+        <UserProgressView />
+      </n-tab-pane>
+    </n-tabs>
+    <ProblemSetProblemsList
+      v-else
+      :problems="problems"
+      :is-joined="isJoined"
+      @problem-click="handleProblemClick"
+    />
   </div>
 </template>
 
-<style scoped>
-.tip {
-  padding-top: 24px;
-  text-align: center;
-}
-</style>
+<style scoped></style>
diff --git a/src/oj/problemset/list.vue b/src/oj/problemset/list.vue
index 173fecb..d853982 100644
--- a/src/oj/problemset/list.vue
+++ b/src/oj/problemset/list.vue
@@ -104,157 +104,154 @@ watch(
 </script>
 
 <template>
-  <div>
-    <n-flex vertical size="large">
-      <n-space>
-        <n-space align="center">
-          <n-text>难度：</n-text>
-          <n-select
-            v-model:value="query.difficulty"
-            :options="difficultyOptions"
-            placeholder="选择难度"
-            style="width: 120px"
-            clearable
-          />
-        </n-space>
-        <n-space align="center">
-          <n-text>状态：</n-text>
-          <n-select
-            v-model:value="query.status"
-            :options="statusOptions"
-            placeholder="选择状态"
-            style="width: 120px"
-            clearable
-          />
-        </n-space>
-        <n-input
-          v-model:value="query.keyword"
-          placeholder="搜索题单..."
+  <n-flex v-if="problemSets.length > 0" vertical size="large">
+    <n-space>
+      <n-space align="center">
+        <n-text>难度：</n-text>
+        <n-select
+          v-model:value="query.difficulty"
+          :options="difficultyOptions"
+          placeholder="选择难度"
+          style="width: 120px"
           clearable
-          @clear="clearQuery"
-          style="width: 200px"
         />
       </n-space>
+      <n-space align="center">
+        <n-text>状态：</n-text>
+        <n-select
+          v-model:value="query.status"
+          :options="statusOptions"
+          placeholder="选择状态"
+          style="width: 120px"
+          clearable
+        />
+      </n-space>
+      <n-input
+        v-model:value="query.keyword"
+        placeholder="搜索题单..."
+        clearable
+        @clear="clearQuery"
+        style="width: 200px"
+      />
+    </n-space>
 
-      <n-grid :cols="isDesktop ? 4 : 1" :x-gap="16" :y-gap="16">
-        <n-grid-item v-for="problemSet in problemSets" :key="problemSet.id">
-          <n-card
-            hoverable
-            @click="goToProblemSet(problemSet.id)"
-            style="cursor: pointer"
-          >
-            <template #header>
-              <n-flex justify="space-between" align="center">
-                <n-text strong>{{ problemSet.title }}</n-text>
-                <n-tag :type="getDifficultyTag(problemSet.difficulty).type">
-                  {{ getDifficultyTag(problemSet.difficulty).text }}
+    <n-grid :cols="isDesktop ? 3 : 1" :x-gap="16" :y-gap="16">
+      <n-grid-item v-for="problemSet in problemSets" :key="problemSet.id">
+        <n-card
+          hoverable
+          @click="goToProblemSet(problemSet.id)"
+          style="cursor: pointer"
+        >
+          <template #header>
+            <n-flex justify="space-between" align="center">
+              <n-text strong>{{ problemSet.title }}</n-text>
+              <n-tag :type="getDifficultyTag(problemSet.difficulty).type">
+                {{ getDifficultyTag(problemSet.difficulty).text }}
+              </n-tag>
+            </n-flex>
+          </template>
+          <n-flex vertical size="large">
+            <n-flex justify="space-between" align="center">
+              <n-flex>
+                <Icon width="20" icon="streamline-emojis:blossom" />
+                <n-text>{{ problemSet.problems_count }} 道题目</n-text>
+              </n-flex>
+
+              <n-flex align="center" style="height: 28px">
+                <!-- 用户进度显示 -->
+                <n-progress
+                  v-if="
+                    problemSet.user_progress?.is_joined &&
+                    !problemSet.user_progress?.is_completed
+                  "
+                  type="line"
+                  :percentage="
+                    Math.round(problemSet.user_progress.progress_percentage)
+                  "
+                  :height="4"
+                  :border-radius="2"
+                  style="width: 100px"
+                  :color="
+                    getProgressColor(
+                      problemSet.user_progress.progress_percentage,
+                    )
+                  "
+                />
+                <n-tag type="warning" v-if="problemSet.status === 'archived'">
+                  已归档
+                </n-tag>
+                <n-tag
+                  v-if="
+                    problemSet.user_progress?.is_joined &&
+                    !problemSet.user_progress?.is_completed
+                  "
+                  type="warning"
+                >
+                  已加入
+                </n-tag>
+                <n-tag
+                  v-if="problemSet.user_progress?.is_completed"
+                  type="error"
+                >
+                  已完成
                 </n-tag>
               </n-flex>
-            </template>
-            <n-flex vertical size="large">
-              <n-flex justify="space-between" align="center">
-                <n-flex>
-                  <Icon width="20" icon="streamline-emojis:blossom" />
-                  <n-text>{{ problemSet.problems_count }} 道题目</n-text>
-                </n-flex>
-
-                <n-flex align="center" size="small">
-                  <n-tag type="warning" v-if="problemSet.status === 'archived'">
-                    已归档
-                  </n-tag>
-                  <n-tag
-                    v-if="problemSet.user_progress?.is_joined"
-                    type="success"
-                    size="small"
-                  >
-                    <template #icon>
-                      <Icon icon="material-symbols:check-circle" width="12" />
-                    </template>
-                    已加入
-                  </n-tag>
-                </n-flex>
-              </n-flex>
-
-              <!-- 用户进度显示 -->
-              <div v-if="problemSet.user_progress?.is_joined">
-                <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 }}
-                  </n-text>
-                  <n-progress
-                    type="line"
-                    :percentage="
-                      Math.round(problemSet.user_progress.progress_percentage)
-                    "
-                    :height="4"
-                    :border-radius="2"
-                    style="width: 100px"
-                    :color="
-                      getProgressColor(
-                        problemSet.user_progress.progress_percentage,
-                      )
-                    "
-                  />
-                </n-flex>
-              </div>
-
-              <!-- 奖章显示 -->
-              <div v-if="problemSet.badges && problemSet.badges.length > 0">
-                <n-flex align="center" justify="space-between">
-                  <n-text depth="3">
-                    创建于
-                    {{ parseTime(problemSet.create_time, "YYYY-MM-DD") }}
-                  </n-text>
-                  <n-flex>
-                    <n-tooltip
-                      v-for="badge in problemSet.badges"
-                      :key="badge.id"
-                      trigger="hover"
-                    >
-                      <template #trigger>
-                        <n-image
-                          :src="badge.icon"
-                          :alt="badge.name"
-                          width="24"
-                          height="24"
-                          object-fit="cover"
-                        />
-                      </template>
-                      <n-flex vertical size="small">
-                        <span style="font-weight: bold"
-                          >徽章: {{ badge.name }}</span
-                        >
-                        <span>
-                          获取条件:
-                          {{
-                            getConditionText(
-                              badge.condition_type,
-                              badge.condition_value,
-                            )
-                          }}
-                        </span>
-                      </n-flex>
-                    </n-tooltip>
-                  </n-flex>
-                </n-flex>
-              </div>
             </n-flex>
-          </n-card>
-        </n-grid-item>
-      </n-grid>
 
-      <Pagination
-        :total="total"
-        v-model:limit="query.limit"
-        v-model:page="query.page"
-      />
-    </n-flex>
-  </div>
+            <!-- 奖章显示 -->
+            <n-flex
+              v-if="problemSet.badges && problemSet.badges.length > 0"
+              align="center"
+              justify="space-between"
+            >
+              <n-text depth="3">
+                创建于
+                {{ parseTime(problemSet.create_time, "YYYY-MM-DD") }}
+              </n-text>
+              <n-flex>
+                <n-tooltip
+                  v-for="badge in problemSet.badges"
+                  :key="badge.id"
+                  trigger="hover"
+                >
+                  <template #trigger>
+                    <n-image
+                      :src="badge.icon"
+                      :alt="badge.name"
+                      width="24"
+                      height="24"
+                      object-fit="cover"
+                    />
+                  </template>
+                  <n-flex vertical size="small">
+                    <span style="font-weight: bold">
+                      徽章: {{ badge.name }}
+                    </span>
+                    <span>
+                      获取条件:
+                      {{
+                        getConditionText(
+                          badge.condition_type,
+                          badge.condition_value,
+                        )
+                      }}
+                    </span>
+                  </n-flex>
+                </n-tooltip>
+              </n-flex>
+            </n-flex>
+          </n-flex>
+        </n-card>
+      </n-grid-item>
+    </n-grid>
+
+    <Pagination
+      :total="total"
+      v-model:limit="query.limit"
+      v-model:page="query.page"
+    />
+  </n-flex>
+  <n-empty v-else></n-empty>
 </template>
 
 <style scoped></style>
diff --git a/src/shared/components/UserBadge.vue b/src/shared/components/UserBadge.vue
index c3e3448..bb5b715 100644
--- a/src/shared/components/UserBadge.vue
+++ b/src/shared/components/UserBadge.vue
@@ -58,8 +58,8 @@ function getConditionText() {
   position: relative;
   display: inline-block;
   cursor: pointer;
-  width: 50px;
-  height: 50px;
+  width: 44px;
+  height: 44px;
 }
 
 .badge-icon {
diff --git a/src/utils/types.ts b/src/utils/types.ts
index c2a1585..dc2f09b 100644
--- a/src/utils/types.ts
+++ b/src/utils/types.ts
@@ -251,6 +251,12 @@ export interface UserBadge {
   earned_time: Date
 }
 
+export interface CompletedProblem {
+  id: number
+  _id: string
+  title: string
+}
+
 export interface ProblemSetProgress {
   id: number
   problemset: ProblemSetList
@@ -260,6 +266,7 @@ export interface ProblemSetProgress {
   total_problems_count: number
   progress_percentage: number
   is_completed: boolean
+  completed_problems: CompletedProblem[]
 }
 
 export interface CreateProblemSetData {