update

src/admin/problem/list.vue

@@ -150,7 +150,7 @@ watch(() => [query.page, query.limit, query.author], listProblems)
         type="primary"
         @click="selectProblems"
       >
-        从题库中选择
+        从题目中选择
       </n-button>
       <n-flex align="center" v-if="!props.contestID">
         <span>出题人</span>

src/oj/problemset/detail.vue

@@ -116,117 +116,119 @@ onMounted(init)
 </script>
 
 <template>
-  <n-card v-if="problemSet" style="margin-bottom: 24px">
+  <div v-if="problemSet">
-    <n-flex justify="space-between" align="center">
+    <n-card style="margin-bottom: 24px">
-      <n-flex align="center">
+      <n-flex justify="space-between" 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 v-if="problemSet" :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
+          <n-tag type="warning" v-if="problemSet.status === 'archived'">
-            style="margin-right: 12px"
+            已归档
-            width="50"
+          </n-tag>
-            icon="noto:check-mark-button"
+          <n-tag :type="getDifficultyTag(problemSet.difficulty).type">
-            v-if="problemSetProblem.is_completed"
+            {{ 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 vertical style="flex: 1">
-            <n-flex align="center">
+              <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">
+                <n-h4 style="margin: 0">
-                {{ problemSetProblem.problem.title }}
+                  {{ problemSetProblem.problem.title }}
-              </n-h4>
+                </n-h4>
-            </n-flex>
+              </n-flex>
 
-            <n-flex align="center" size="small">
+              <n-flex align="center" size="small">
-              <n-tag
+                <n-tag
-                :type="getTagColor(problemSetProblem.problem.difficulty)"
+                  :type="getTagColor(problemSetProblem.problem.difficulty)"
-                size="small"
+                  size="small"
-              >
+                >
-                {{ DIFFICULTY[problemSetProblem.problem.difficulty] }}
+                  {{ DIFFICULTY[problemSetProblem.problem.difficulty] }}
-              </n-tag>
+                </n-tag>
-              <n-text type="info"> 分数：{{ problemSetProblem.score }} </n-text>
+                <n-text type="info">分数：{{ problemSetProblem.score }}</n-text>
-              <n-text v-if="!problemSetProblem.is_required"> （选做） </n-text>
+                <n-text v-if="!problemSetProblem.is_required">（选做）</n-text>
+              </n-flex>
             </n-flex>
           </n-flex>
-        </n-flex>
+        </n-card>
-      </n-card>
+      </n-grid-item>
-    </n-grid-item>
+    </n-grid>
-  </n-grid>
 
-  <div class="tip">
+    <div class="tip">
-    <n-text :deep="3">* 题目完成后会自动返回题单页面</n-text>
+      <n-text>题目完成后会自动返回题单页面</n-text>
+    </div>
   </div>
 </template>
 
 <style scoped>
 .tip {
-  padding: 24px;
+  padding-top: 24px;
   text-align: center;
 }
 </style>

src/shared/components/Header.vue

@@ -90,7 +90,7 @@ const menus = computed<MenuOption[]>(() => [
     icon: renderIcon("streamline-emojis:snake"),
   },
   {
-    label: () => h(RouterLink, { to: "/" }, { default: () => "题库" }),
+    label: () => h(RouterLink, { to: "/" }, { default: () => "题目" }),
     key: "problem",
     icon: renderIcon("streamline-emojis:blossom"),
   },