feat(后台): 侧栏分组带图标、可收起，加顶栏；所有后台页面统一页头

- 侧栏按 概览 / 教学内容 / 学情分析 / 站点管理 分组，去掉超管菜单里的重复项；
  菜单项的角色与路由守卫一一对应，没有题目权限的教师不再看到点了就被踢回首页的「题目」
- 顶栏：面包屑、回到前台、明暗切换、用户菜单（退出登录）；窄屏侧栏自动收起
- 新增 PageHeader：标题 + 右侧主操作 + 下方筛选栏，编辑页带返回按钮
- 卡点分析 / 年度趋势 / 标签管理从题目列表的按钮挪进侧栏
- 首页改成统计卡片 + 班级排名卡片；设置页按钮移到卡片右上角
- 题目、比赛、题单、用户列表的「选项」列固定在右侧，不再被挤出屏幕

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

apps/web/src/admin/problemset/detail.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
+import PageHeader from "admin/components/PageHeader.vue"
 import { errorMessage } from "utils/api"
-import { NTabPane, NTabs, NButton, NFlex } from "naive-ui"
+import { NTabPane, NTabs, NButton } from "naive-ui"
 import type {
   AdminProblemSet,
   AdminProblemSetProblem,
@@ -200,20 +201,21 @@ onMounted(() => {
 
 <template>
   <div v-if="problemSet">
-    <n-flex class="titleWrapper" justify="space-between" align="center">
-      <h2 class="title">{{ problemSet.title }}</h2>
-      <n-button
-        type="primary"
-        @click="
-          router.push({
-            name: 'admin problemset edit',
-            params: { problemSetId },
-          })
-        "
-      >
-        编辑题单
-      </n-button>
-    </n-flex>
+    <PageHeader :title="problemSet.title" :back="{ name: 'admin problemset list' }">
+      <template #actions>
+        <n-button
+          type="primary"
+          @click="
+            router.push({
+              name: 'admin problemset edit',
+              params: { problemSetId },
+            })
+          "
+        >
+          编辑题单
+        </n-button>
+      </template>
+    </PageHeader>
 
     <ProblemSetInfo :problem-set="problemSet" />
 
@@ -257,13 +259,3 @@ onMounted(() => {
     />
   </div>
 </template>
-
-<style scoped>
-.titleWrapper {
-  margin-bottom: 16px;
-}
-
-.title {
-  margin: 0;
-}
-</style>

apps/web/src/admin/problemset/edit.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import PageHeader from "admin/components/PageHeader.vue"
 import { errorMessage } from "utils/api"
 import type { CreateProblemSetData, EditProblemSetData } from "utils/types"
 import { fromPickerValue, toPickerValue } from "utils/functions"
@@ -101,7 +102,14 @@ onMounted(() => {
 
 <template>
   <div>
-    <h2 class="title">{{ isEdit ? "编辑题单" : "创建题单" }}</h2>
+    <PageHeader
+      :title="isEdit ? '编辑题单' : '新建题单'"
+      :back="
+        isEdit
+          ? { name: 'admin problemset detail', params: { problemSetId } }
+          : { name: 'admin problemset list' }
+      "
+    />
 
     <n-form :model="formData" label-placement="top">
       <n-flex>
@@ -158,9 +166,3 @@ onMounted(() => {
     </n-form>
   </div>
 </template>
-
-<style scoped>
-.title {
-  margin: 0 0 16px 0;
-}
-</style>

apps/web/src/admin/problemset/list.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import PageHeader from "admin/components/PageHeader.vue"
 import Pagination from "shared/components/Pagination.vue"
 import { usePagination } from "shared/composables/pagination"
 import { parseTime } from "utils/functions"
@@ -96,6 +97,7 @@ const columns: DataTableColumn<AdminProblemSet>[] = [
   {
     title: "选项",
     key: "actions",
+    fixed: "right",
     width: 300,
     render: (row) =>
       h(Actions, {
@@ -142,53 +144,36 @@ watch(() => [query.page, query.limit, query.difficulty, query.status], listProbl
 </script>
 
 <template>
-  <n-flex class="titleWrapper" justify="space-between">
-    <n-flex align="center">
-      <h2 class="title">题单管理</h2>
+  <PageHeader title="题单列表">
+    <template #actions>
       <n-button type="primary" @click="$router.push({ name: 'admin problemset create' })">
         新建题单
       </n-button>
-    </n-flex>
-    <n-flex align="center">
-      <n-flex align="center">
-        <span>难度：</span>
-        <n-select
-          v-model:value="query.difficulty"
-          :options="difficultyOptions"
-          placeholder="选择难度"
-          style="width: 120px"
-          clearable
-        />
-      </n-flex>
-      <n-flex align="center">
-        <span>状态：</span>
-        <n-select
-          v-model:value="query.status"
-          :options="statusOptions"
-          placeholder="选择状态"
-          style="width: 120px"
-          clearable
-        />
-      </n-flex>
+    </template>
+    <template #filters>
       <n-input
         v-model:value="query.keyword"
         placeholder="输入标题关键字"
         clearable
         @clear="clearQuery"
-        style="width: 200px"
+        style="width: 220px"
       />
-    </n-flex>
-  </n-flex>
+      <n-select
+        v-model:value="query.difficulty"
+        :options="difficultyOptions"
+        placeholder="全部难度"
+        style="width: 120px"
+        clearable
+      />
+      <n-select
+        v-model:value="query.status"
+        :options="statusOptions"
+        placeholder="全部状态"
+        style="width: 120px"
+        clearable
+      />
+    </template>
+  </PageHeader>
   <n-data-table striped :columns="columns" :data="problemSets" />
   <Pagination :total="total" v-model:limit="query.limit" v-model:page="query.page" />
 </template>
-
-<style scoped>
-.titleWrapper {
-  margin-bottom: 16px;
-}
-
-.title {
-  margin: 0;
-}
-</style>