diff --git a/apps/api/src/routes/contest.ts b/apps/api/src/routes/contest.ts
index 05df784..d64462f 100644
--- a/apps/api/src/routes/contest.ts
+++ b/apps/api/src/routes/contest.ts
@@ -245,6 +245,9 @@ contestRoutes.get(
             showFlowchart: problem.showFlowchart,
             hasAstRules: problem.astRules !== null,
             myStatus: myStatusOf(statuses, problem.id),
+            // 按人数是公开题库列表的列；比赛题表看的是榜单，不下发
+            solvedUsers: 0,
+            triedUsers: 0,
           }) satisfies ProblemListItem,
       ),
     )
diff --git a/apps/api/src/routes/problem.ts b/apps/api/src/routes/problem.ts
index de0cf70..974477a 100644
--- a/apps/api/src/routes/problem.ts
+++ b/apps/api/src/routes/problem.ts
@@ -1,4 +1,13 @@
-import type { ProblemAuthor, ProblemDetail, ProblemList, ProblemListItem, Tag } from "@oj2/contract"
+import {
+  problemListSortSchema,
+  problemTypeFilterSchema,
+  type ProblemAuthor,
+  type ProblemDetail,
+  type ProblemList,
+  type ProblemListItem,
+  type ProblemProgress,
+  type Tag,
+} from "@oj2/contract"
 import {
   and,
   asc,
@@ -21,6 +30,11 @@ import { db, schema } from "../db"
 import { astRequirements } from "../judge/ast"
 import { failure, success } from "../http"
 import { JudgeStatus } from "../judge/status"
+import {
+  buildProblemProgress,
+  problemStates,
+  problemUserCounts,
+} from "../services/problem-progress"
 import {
   asFilterValue,
   countFailedSubmissions,
@@ -67,6 +81,9 @@ async function getProblemTags(problemIds: number[]) {
   return result
 }
 
+type ProblemStates = Awaited<ReturnType<typeof problemStates>> | null
+type UserCounts = Awaited<ReturnType<typeof problemUserCounts>>
+
 function listItem(
   row: {
     problem: typeof schema.problem.$inferSelect
@@ -75,26 +92,43 @@ function listItem(
   },
   tags: Map<number, string[]>,
   statuses: Record<string, unknown>,
+  states: ProblemStates,
+  counts: UserCounts,
 ) {
   const status = asRecord(statuses[String(row.problem.id)]).status
+  const id = row.problem.id
   return {
-    id: row.problem.id,
+    id,
     _id: row.problem.displayId,
     title: row.problem.title,
     submissionNumber: row.problem.submissionNumber,
     acceptedNumber: row.problem.acceptedNumber,
     difficulty: row.problem.difficulty,
     createdBy: sampleUser(row.user, row.realName),
-    tags: tags.get(row.problem.id) ?? [],
+    tags: tags.get(id) ?? [],
     contestId: row.problem.contestId,
     allowFlowchart: row.problem.allowFlowchart,
     showFlowchart: row.problem.showFlowchart,
     hasAstRules: row.problem.astRules !== null,
-    myStatus: typeof status === "number" ? status : null,
+    // 流程图评到 A / S 也打勾：problemStates 已经把它算进 solved
+    myStatus: states?.solved.has(id)
+      ? JudgeStatus.ACCEPTED
+      : typeof status === "number"
+        ? status
+        : null,
+    solvedUsers: counts.get(id)?.solved ?? 0,
+    triedUsers: counts.get(id)?.tried ?? 0,
   } satisfies ProblemListItem
 }
 
+/** 题号排序：先按长度再按字面，1001 < 1100 < P026 < SQL09，不会排成 1001、1100、11、2 */
+const displayIdOrder = [
+  asc(sql`length(${schema.problem.displayId})`),
+  asc(schema.problem.displayId),
+]
+
 problemRoutes.get("/problems", optionalAuth, async (c) => {
+  const user = c.get("user")
   const limit = queryInteger(c.req.query("limit"), 20, { min: 1, max: 250 })
   const offset = queryInteger(c.req.query("offset"), 0, { min: 0 })
   const filters = [eq(schema.problem.visible, true), isNull(schema.problem.contestId)]
@@ -102,6 +136,9 @@ problemRoutes.get("/problems", optionalAuth, async (c) => {
   const keyword = c.req.query("keyword")?.trim()
   const difficulty = c.req.query("difficulty")?.trim()
   const tag = c.req.query("tag")?.trim()
+  const type = problemTypeFilterSchema.safeParse(c.req.query("type")).data
+  // 没登录时「只看没做完」在前端是灰的；直接拼地址来的就当没开
+  const undone = c.req.query("undone") === "1" && !!user
   if (author) filters.push(eq(schema.user.username, author))
   if (keyword)
     filters.push(
@@ -123,31 +160,32 @@ problemRoutes.get("/problems", optionalAuth, async (c) => {
       ),
     )
   }
+  if (type === "reference") filters.push(eq(schema.problem.showFlowchart, true))
+  if (type === "flowchart") filters.push(eq(schema.problem.allowFlowchart, true))
+  if (type === "ast") filters.push(sql`${schema.problem.astRules} is not null`)
+
+  const states = user ? await problemStates(user.id) : null
+  if (undone && states && states.solved.size > 0)
+    filters.push(notInArray(schema.problem.id, [...states.solved]))
 
   const where = and(...filters)
-  const sort = c.req.query("sort")
+  // 默认：选了知识点按题号（同一系列的题挨在一起），全部题目按最新创建。
+  // 旧的排序值（最多提交、画流程图……）落到默认 —— 类型已经拆成了单独的筛选
+  const sort = problemListSortSchema.safeParse(c.req.query("sort") ?? "").data ?? ""
+  const effective = sort || (tag ? "id" : "new")
+  const allCounts = effective === "popular" ? await problemUserCounts() : null
+  const popularity = allCounts
+    ? sql`case ${schema.problem.id} ${sql.join(
+        [...allCounts].map(([id, n]) => sql`when ${id} then ${n.solved}`),
+        sql` `,
+      )} else 0 end`
+    : null
   const order =
-    sort === "flowchart"
-      ? [
-          desc(schema.problem.allowFlowchart),
-          desc(schema.problem.showFlowchart),
-          desc(schema.problem.createTime),
-        ]
-      : sort === "ast"
-        ? [desc(sql`(${schema.problem.astRules} is not null)`), desc(schema.problem.createTime)]
-        : sort === "-accepted_number"
-          ? [desc(schema.problem.acceptedNumber)]
-          : sort === "accepted_number"
-            ? [asc(schema.problem.acceptedNumber)]
-            : sort === "-submission_number"
-              ? [desc(schema.problem.submissionNumber)]
-              : sort === "submission_number"
-                ? [asc(schema.problem.submissionNumber)]
-                : sort === "difficulty"
-                  ? [asc(schema.problem.difficulty)]
-                  : sort === "create_time"
-                    ? [asc(schema.problem.createTime)]
-                    : [desc(schema.problem.createTime)]
+    effective === "id"
+      ? displayIdOrder
+      : popularity
+        ? [desc(popularity), ...displayIdOrder]
+        : [desc(schema.problem.createTime)]
   const [totalRow] = await db
     .select({ value: countDistinct(schema.problem.id) })
     .from(schema.problem)
@@ -166,16 +204,28 @@ problemRoutes.get("/problems", optionalAuth, async (c) => {
     .orderBy(...order)
     .limit(limit)
     .offset(offset)
-  const [tags, statuses] = await Promise.all([
-    getProblemTags(rows.map((row) => row.problem.id)),
-    getProblemStatuses(c.get("user")?.id),
+  const ids = rows.map((row) => row.problem.id)
+  const [tags, statuses, counts] = await Promise.all([
+    getProblemTags(ids),
+    getProblemStatuses(user?.id),
+    allCounts ?? problemUserCounts(ids),
   ])
   return success(c, {
-    results: rows.map((row) => listItem(row, tags, statuses)),
+    results: rows.map((row) => listItem(row, tags, statuses, states, counts)),
     total: totalRow?.value ?? 0,
   } satisfies ProblemList)
 })
 
+/**
+ * 题目列表顶上那行和左栏的进度。没登录给 null（前端那行换成「登录以后……」）。
+ * 注册在 /problems/:displayId 前面，不然被它吃掉。
+ */
+problemRoutes.get("/problems/progress", optionalAuth, async (c) => {
+  const user = c.get("user")
+  if (!user) return success(c, null)
+  return success(c, (await buildProblemProgress(user.id)) satisfies ProblemProgress)
+})
+
 problemRoutes.get("/problem-tags", async (c) => {
   const keyword = c.req.query("keyword")?.trim()
   // 只数公开题库里可见的题：隐藏的题和比赛题都不算，否则标签会出现在
@@ -204,12 +254,42 @@ problemRoutes.get("/problem-tags", async (c) => {
   return success(c, rows satisfies Tag[])
 })
 
-problemRoutes.get("/problems/random", async (c) => {
+/**
+ * 「随便来一道」：范围是当前知识点（不传就是全部），先挑自己还没做对的简单 / 中等题，
+ * 没有就放宽到没做对的困难题，再没有就随便一道（全做对了也给一道，不让按钮落空）。
+ */
+problemRoutes.get("/problems/random", optionalAuth, async (c) => {
+  const user = c.get("user")
+  const tag = c.req.query("tag")?.trim()
+  const states = user ? await problemStates(user.id) : null
+  const solved = states ? [...states.solved] : []
   const [row] = await db
     .select({ displayId: schema.problem.displayId })
     .from(schema.problem)
-    .where(and(eq(schema.problem.visible, true), isNull(schema.problem.contestId)))
-    .orderBy(sql`random()`)
+    .where(
+      and(
+        eq(schema.problem.visible, true),
+        isNull(schema.problem.contestId),
+        tag
+          ? inArray(
+              schema.problem.id,
+              db
+                .select({ id: schema.problemTags.problemId })
+                .from(schema.problemTags)
+                .innerJoin(
+                  schema.problemTag,
+                  eq(schema.problemTags.problemtagId, schema.problemTag.id),
+                )
+                .where(eq(schema.problemTag.name, tag)),
+            )
+          : undefined,
+      ),
+    )
+    .orderBy(
+      solved.length ? asc(inArray(schema.problem.id, solved)) : sql`1`,
+      asc(sql`${schema.problem.difficulty} = 'High'`),
+      sql`random()`,
+    )
     .limit(1)
   if (!row) return failure(c, 404, "no-problems", "No problem to pick")
   return success(c, row.displayId)
@@ -303,10 +383,11 @@ problemRoutes.get("/problems/:displayId/similar", optionalAuth, async (c) => {
       asc(schema.problem.id),
     )
     .limit(5)
-  const tags = await getProblemTags(rows.map((row) => row.problem.id))
+  const ids = rows.map((row) => row.problem.id)
+  const [tags, counts] = await Promise.all([getProblemTags(ids), problemUserCounts(ids)])
   return success(
     c,
-    rows.map((row) => listItem(row, tags, statuses)),
+    rows.map((row) => listItem(row, tags, statuses, null, counts)),
   )
 })
 
diff --git a/apps/api/src/services/problem-progress.ts b/apps/api/src/services/problem-progress.ts
new file mode 100644
index 0000000..0a78f81
--- /dev/null
+++ b/apps/api/src/services/problem-progress.ts
@@ -0,0 +1,210 @@
+import { FLOWCHART_PASS_GRADES, type ProblemProgress } from "@oj2/contract"
+import { and, asc, eq, inArray, isNull, sql } from "drizzle-orm"
+
+import { db, schema } from "../db"
+import { isAccepted, UNJUDGED_RESULTS } from "../judge/status"
+import { asRecord } from "../routes/helpers"
+import { calendarDay, dayNumber, dayText, weekStart } from "../time"
+import { accepted } from "./learning-stats"
+
+/**
+ * 一个人在公开题库里的做题状态：做对了哪些、交过哪些。
+ *
+ * 代码看 `acm_problems_status`（列表的状态列一直就是它）；画流程图的题，流程图评到
+ * A / S 也算做对、交过流程图就算交过 —— 和题单、课堂条一个口径（题目页设计文档
+ * 第 3 节决定 6）。有的题一节课全班都在画流程图，只看代码的话状态列是空的。
+ */
+export async function problemStates(userId: number) {
+  const [[profile], flowRows] = await Promise.all([
+    db
+      .select({ value: schema.userProfile.acmProblemsStatus })
+      .from(schema.userProfile)
+      .where(eq(schema.userProfile.userId, userId))
+      .limit(1),
+    db
+      .select({
+        problemId: schema.flowchartSubmission.problemId,
+        passed: sql<boolean>`bool_or(${schema.flowchartSubmission.status} = 2 and ${inArray(
+          schema.flowchartSubmission.aiGrade,
+          [...FLOWCHART_PASS_GRADES],
+        )})`,
+      })
+      .from(schema.flowchartSubmission)
+      .where(eq(schema.flowchartSubmission.userId, userId))
+      .groupBy(schema.flowchartSubmission.problemId),
+  ])
+  const solved = new Set<number>()
+  const tried = new Set<number>()
+  for (const [key, raw] of Object.entries(asRecord(asRecord(profile?.value).problems))) {
+    const id = Number(key)
+    const status = asRecord(raw).status
+    if (!Number.isInteger(id) || typeof status !== "number") continue
+    tried.add(id)
+    if (isAccepted(status)) solved.add(id)
+  }
+  for (const row of flowRows) {
+    tried.add(row.problemId)
+    if (row.passed) solved.add(row.problemId)
+  }
+  return { solved, tried }
+}
+
+/**
+ * 每道题做对 / 交过的人数，和题目页「统计」页签（`problem-stats.ts`）同一个口径：
+ * 代码提交，不算还在判的，AST_CHECK_FAILED 也是做对。不传 ids 就是全部题（排序用，全表约 85ms）。
+ */
+export async function problemUserCounts(problemIds?: number[]) {
+  const result = new Map<number, { solved: number; tried: number }>()
+  if (problemIds && problemIds.length === 0) return result
+  const rows = await db
+    .select({
+      problemId: schema.submission.problemId,
+      solved: sql<number>`count(distinct ${schema.submission.userId}) filter (where ${inArray(
+        schema.submission.result,
+        accepted,
+      )})`.mapWith(Number),
+      tried: sql<number>`count(distinct ${schema.submission.userId})`.mapWith(Number),
+    })
+    .from(schema.submission)
+    .where(
+      and(
+        isNull(schema.submission.contestId),
+        sql`${schema.submission.result} not in (${sql.join(
+          UNJUDGED_RESULTS.map((value) => sql`${value}`),
+          sql`, `,
+        )})`,
+        problemIds ? inArray(schema.submission.problemId, problemIds) : undefined,
+      ),
+    )
+    .groupBy(schema.submission.problemId)
+  for (const row of rows) result.set(row.problemId, { solved: row.solved, tried: row.tried })
+  return result
+}
+
+/**
+ * 顶行提示哪个成就。只挑做题能推动的几项（提交次数、编译错误这类不该鼓励），
+ * 隐藏成就不提示（会泄露门槛），完成比例最高的那个；一样高按下面的先后挑 ——
+ * 新生所有成就都是 0，不按先后的话会挑中「做对 1 道困难题」，把刚来的人往最难的题上引。
+ */
+const HINT_METRICS = [
+  "accepted_count",
+  "mid_ac_count",
+  "hard_ac_count",
+  "active_days",
+  "max_ac_week_streak",
+]
+
+function numberOf(metrics: Record<string, unknown>, key: string) {
+  const value = metrics[key]
+  return typeof value === "number" ? value : 0
+}
+
+export async function buildProblemProgress(userId: number): Promise<ProblemProgress> {
+  const [states, statRows, achievements, unlockedRows] = await Promise.all([
+    problemStates(userId),
+    db
+      .select({ metrics: schema.userStat.metrics })
+      .from(schema.userStat)
+      .where(eq(schema.userStat.userId, userId))
+      .limit(1),
+    db
+      .select()
+      .from(schema.achievement)
+      .where(
+        and(
+          eq(schema.achievement.visible, true),
+          eq(schema.achievement.hidden, false),
+          eq(schema.achievement.operator, "gte"),
+          inArray(schema.achievement.metric, HINT_METRICS),
+        ),
+      ),
+    db
+      .select({ id: schema.userAchievement.achievementId })
+      .from(schema.userAchievement)
+      .where(eq(schema.userAchievement.userId, userId)),
+  ])
+  const metrics = asRecord(statRows[0]?.metrics)
+
+  // 只数公开可见的题：隐藏题、比赛题在左栏里本来就不出现
+  const visibleRows = await db
+    .select({
+      id: schema.problem.id,
+      displayId: schema.problem.displayId,
+      title: schema.problem.title,
+    })
+    .from(schema.problem)
+    .where(and(eq(schema.problem.visible, true), isNull(schema.problem.contestId)))
+    .orderBy(asc(sql`length(${schema.problem.displayId})`), asc(schema.problem.displayId))
+  const visible = new Set(visibleRows.map((row) => row.id))
+  const solvedVisible = [...states.solved].filter((id) => visible.has(id))
+  const byTag: Record<string, number> = {}
+  if (solvedVisible.length > 0) {
+    const rows = await db
+      .select({
+        tagId: schema.problemTags.problemtagId,
+        n: sql<number>`count(*)`.mapWith(Number),
+      })
+      .from(schema.problemTags)
+      .where(inArray(schema.problemTags.problemId, solvedVisible))
+      .groupBy(schema.problemTags.problemtagId)
+    for (const row of rows) byTag[String(row.tagId)] = row.n
+  }
+  const almost = visibleRows
+    .filter((row) => states.tried.has(row.id) && !states.solved.has(row.id))
+    .map((row) => ({ _id: row.displayId, title: row.title }))
+
+  // 这周：_ac_per_day 的键是东八区日历日，周一起算（和周榜、连续周数同一个口径）
+  const monday = calendarDay(weekStart())
+  let weekSolved = 0
+  for (const [day, n] of Object.entries(asRecord(metrics._ac_per_day))) {
+    if (day >= monday && typeof n === "number") weekSolved += n
+  }
+  // 当前连续周数只在最近一次新通过落在本周或上周时还作数，再早就已经断了
+  const lastWeek = typeof metrics._last_ac_week === "string" ? metrics._last_ac_week : ""
+  const previousMonday = dayText(dayNumber(monday) - 7)
+  const weekStreak =
+    lastWeek === monday || lastWeek === previousMonday
+      ? numberOf(metrics, "_current_ac_week_streak")
+      : 0
+
+  const unlocked = new Set(unlockedRows.map((row) => row.id))
+  let next: ProblemProgress["next"] = null
+  let best = -1
+  for (const achievement of achievements) {
+    if (unlocked.has(achievement.id) || achievement.threshold <= 0) continue
+    // 连续周数看的是「现在连着几周」，不是历史最长：断过的人从头数
+    const progress =
+      achievement.metric === "max_ac_week_streak"
+        ? weekStreak
+        : numberOf(metrics, achievement.metric)
+    if (progress >= achievement.threshold) continue
+    const ratio = progress / achievement.threshold
+    // 一样高：先按指标先后，同一个指标挑门槛低的（「初出茅庐」而不是「渐入佳境」）
+    const order = HINT_METRICS.indexOf(achievement.metric)
+    const tie =
+      next !== null &&
+      ratio === best &&
+      (order < HINT_METRICS.indexOf(next.metric) ||
+        (achievement.metric === next.metric && achievement.threshold < next.threshold))
+    if (ratio > best || tie) {
+      best = ratio
+      next = {
+        name: achievement.name,
+        icon: achievement.icon,
+        rarity: achievement.rarity,
+        metric: achievement.metric,
+        threshold: achievement.threshold,
+        progress,
+      }
+    }
+  }
+
+  return {
+    solved: numberOf(metrics, "accepted_count"),
+    weekSolved,
+    weekStreak,
+    almost,
+    byTag,
+    next,
+  }
+}
diff --git a/apps/web/src/oj/api.ts b/apps/web/src/oj/api.ts
index 1befaf8..e69968f 100644
--- a/apps/web/src/oj/api.ts
+++ b/apps/web/src/oj/api.ts
@@ -24,6 +24,7 @@ import {
   type ProblemListItem,
   type ProblemStats,
   type ProblemList,
+  type ProblemProgress,
   type CreateFlowchartResponse,
   type FlowchartScores,
   type FlowchartList,
@@ -94,6 +95,16 @@ export async function getProblemList(
   }
 }
 
+/** 题目列表顶上那行和左栏的进度；没登录是 null */
+export function getProblemProgress() {
+  return api.get<ProblemProgress | null>("problems/progress")
+}
+
+/** 「随便来一道」：当前知识点里先挑自己没做对的简单 / 中等题，返回题号 */
+export function getRandomProblem(tag: string) {
+  return api.get<string>("problems/random", { params: tag ? { tag } : {} })
+}
+
 export function getAuthors(all = false) {
   return api.get<ProblemAuthor[]>("problem-authors", {
     params: { all: all ? "1" : "0" },
diff --git a/apps/web/src/oj/problem/components/ProblemContent.vue b/apps/web/src/oj/problem/components/ProblemContent.vue
index 5335988..4ff4666 100644
--- a/apps/web/src/oj/problem/components/ProblemContent.vue
+++ b/apps/web/src/oj/problem/components/ProblemContent.vue
@@ -164,9 +164,9 @@ const astRequirements = computed(() => Object.entries(problem.value?.astRequirem
       </div>
     </header>
 
-    <!-- 代码要求（AST 规则）放在最前面：它是硬性的判定条件，写到一半才看见就晚了 -->
+    <!-- 语法要求（AST 规则）放在最前面：它是硬性的判定条件，写到一半才看见就晚了 -->
     <div v-if="astRequirements.length > 0" class="requirements">
-      <span class="requirements-head">代码要求</span>
+      <span class="requirements-head">语法要求</span>
       <template v-for="[lang, rules] in astRequirements" :key="lang">
         <span v-if="astRequirements.length > 1" class="lang-label">{{ lang }}</span>
         <n-tag
@@ -467,7 +467,7 @@ const astRequirements = computed(() => Object.entries(problem.value?.astRequirem
   gap: 16px;
 }
 
-/* 代码要求：一行的浅绿框，硬性的判定条件，放在最前面 */
+/* 语法要求：一行的浅绿框，硬性的判定条件，放在最前面 */
 .requirements {
   padding: 8px 12px;
   border-radius: 6px;
diff --git a/apps/web/src/oj/problem/components/ProblemListTitle.vue b/apps/web/src/oj/problem/components/ProblemListTitle.vue
deleted file mode 100644
index 7841de6..0000000
--- a/apps/web/src/oj/problem/components/ProblemListTitle.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<script lang="ts" setup>
-import type { ProblemRow } from "utils/types"
-import { Icon } from "@iconify/vue"
-
-defineProps<{
-  problem: ProblemRow
-}>()
-</script>
-<template>
-  <n-flex align="center">
-    <span>{{ problem.title }}</span>
-    <Icon v-if="problem.allowFlowchart" width="18" icon="vscode-icons:file-type-drawio" />
-    <Icon v-else-if="problem.showFlowchart" width="18" icon="vscode-icons:file-type-graphql" />
-    <Icon v-if="problem.hasAstRules" width="18" icon="vscode-icons:file-type-light-todo" />
-  </n-flex>
-</template>
diff --git a/apps/web/src/oj/problem/components/ProblemTypeTag.vue b/apps/web/src/oj/problem/components/ProblemTypeTag.vue
new file mode 100644
index 0000000..b91c706
--- /dev/null
+++ b/apps/web/src/oj/problem/components/ProblemTypeTag.vue
@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import { Icon } from "@iconify/vue"
+import type { ProblemTypeFilter } from "@oj2/contract"
+import { useDark } from "@vueuse/core"
+import { useThemeVars } from "naive-ui"
+import { PROBLEM_TYPE_LABEL } from "../utils/problemType"
+
+/**
+ * 三类特殊题的小标签（设计稿「题目列表重设计 · 改版」）。轻重按对学生意味着什么分：
+ * - 画流程图：最醒目（浅紫底）—— 只有这类题能交流程图，要做的事和普通题不一样
+ * - 语法要求：蓝描边 —— 判题时会检查写法，要看得见
+ * - 有参考图：灰描边，最轻 —— 是帮助，不用提醒
+ * 都带图标和字，区分不只靠颜色。名字和题目页一致：「语法要求」。
+ */
+const props = defineProps<{ kind: ProblemTypeFilter }>()
+
+const theme = useThemeVars()
+const isDark = useDark()
+
+const ICON: Record<ProblemTypeFilter, string> = {
+  flowchart: "ph:pencil-simple-line-bold",
+  ast: "ph:code-bold",
+  reference: "ph:flow-arrow-bold",
+}
+
+const style = computed(() => {
+  const t = theme.value
+  if (props.kind === "flowchart") {
+    // 主题里没有紫色，两套手配的值，字都压到 4.5:1 以上
+    return isDark.value
+      ? { color: "#c4adf5", background: "rgba(160, 120, 240, 0.18)", borderColor: "transparent" }
+      : { color: "#5b2fa6", background: "#efe8fb", borderColor: "transparent" }
+  }
+  if (props.kind === "ast") {
+    return {
+      color: isDark.value ? t.infoColor : t.infoColorPressed,
+      background: "transparent",
+      borderColor: isDark.value ? "rgba(112, 192, 232, 0.45)" : "#b9cdee",
+    }
+  }
+  return { color: t.textColor3, background: "transparent", borderColor: t.borderColor }
+})
+</script>
+
+<template>
+  <span class="type-tag" :class="kind" :style="style">
+    <Icon :icon="ICON[props.kind]" :width="12" />{{ PROBLEM_TYPE_LABEL[props.kind] }}
+  </span>
+</template>
+
+<style scoped>
+.type-tag {
+  flex: none;
+  height: 20px;
+  box-sizing: border-box;
+  padding: 0 6px 0 5px;
+  border: 1px solid;
+  border-radius: 3px;
+  font-size: 12px;
+  line-height: 18px;
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  white-space: nowrap;
+}
+
+.type-tag.flowchart {
+  font-weight: 600;
+}
+</style>
diff --git a/apps/web/src/oj/problem/components/ProgressRow.vue b/apps/web/src/oj/problem/components/ProgressRow.vue
new file mode 100644
index 0000000..9f322d0
--- /dev/null
+++ b/apps/web/src/oj/problem/components/ProgressRow.vue
@@ -0,0 +1,235 @@
+<script setup lang="ts">
+import { Icon } from "@iconify/vue"
+import type { ProblemProgress } from "@oj2/contract"
+import { useThemeVars } from "naive-ui"
+import AchievementIcon from "shared/components/AchievementIcon.vue"
+import { useTone } from "oj/submission/composables/tone"
+
+/**
+ * 题目列表顶上那行的左半边：先说做到了什么（设计稿「题目列表重设计 · 改版」）。
+ * 做对几道 · 这周新做对几道（这周还没有就说连续几周）· 离哪个成就最近 · 有几道差一点。
+ * 没做对的题不常驻在这里：大多数学生一道「差一点」都没有（快照里 64%），常驻的话
+ * 这行就只剩一言；有的人看见一排红色也是压力。点「差一点」才弹出来看。
+ */
+const props = defineProps<{
+  progress: ProblemProgress
+  /** 一道还没做对时引去的知识点（「输出入门」），没有这个标签就是 null */
+  startTag: { name: string; problemCount: number } | null
+  compact?: boolean
+}>()
+
+const emit = defineEmits<{ selectTag: [name: string] }>()
+
+const theme = useThemeVars()
+const tone = useTone()
+
+const remaining = computed(() =>
+  props.progress.next ? props.progress.next.threshold - props.progress.next.progress : 0,
+)
+
+/** 离成就还差什么，按指标换说法 */
+const nextText = computed(() => {
+  const next = props.progress.next
+  if (!next) return ""
+  const r = remaining.value
+  switch (next.metric) {
+    case "accepted_count":
+      return next.progress === 0 ? "做对第一道题就解锁" : `再做对 ${r} 道就解锁`
+    case "mid_ac_count":
+      return `再做对 ${r} 道中等题就解锁`
+    case "hard_ac_count":
+      return `再做对 ${r} 道困难题就解锁`
+    case "active_days":
+      return `再来 ${r} 天就解锁`
+    case "max_ac_week_streak":
+      return `连续 ${next.threshold} 周有做对就解锁`
+    default:
+      return `还差 ${r} 就解锁`
+  }
+})
+
+const weekChip = computed(() => {
+  const p = props.progress
+  if (p.weekSolved > 0) return `这周 +${p.weekSolved}`
+  if (p.weekStreak >= 2) return `连续 ${p.weekStreak} 周都有做对`
+  return ""
+})
+
+// 弹层在 body 下面，样式里的 v-bind 变量够不着，主题色就地给
+const listVars = computed(() => ({
+  "--list-text": theme.value.textColor1,
+  "--list-id": theme.value.textColor3,
+  "--list-hover": theme.value.hoverColor,
+}))
+
+const fresh = computed(() => props.progress.solved === 0)
+</script>
+
+<template>
+  <div class="progress-row" :class="{ compact }">
+    <template v-if="!fresh">
+      <span class="total">
+        你做对了<b>{{ progress.solved }}</b
+        >道题
+      </span>
+      <span v-if="weekChip" class="chip">{{ weekChip }}</span>
+    </template>
+    <i v-if="!fresh && progress.next" class="sep"></i>
+    <RouterLink v-if="progress.next" to="/achievement" class="next" title="去看我的成就">
+      <AchievementIcon :icon="progress.next.icon" :size="16" />
+      <span>
+        {{ nextText }}<b>「{{ progress.next.name }}」</b>
+      </span>
+    </RouterLink>
+    <button v-if="fresh && startTag" class="start" @click="emit('selectTag', startTag.name)">
+      从「{{ startTag.name }}」开始，一共 {{ startTag.problemCount }} 道
+      <Icon icon="ph:caret-right-bold" :width="12" />
+    </button>
+    <i v-if="!fresh && progress.almost.length" class="sep"></i>
+    <n-popover v-if="!fresh && progress.almost.length" trigger="click" placement="bottom-start">
+      <template #trigger>
+        <button class="almost">
+          有 {{ progress.almost.length }} 道差一点
+          <Icon icon="ph:caret-right-bold" :width="12" />
+        </button>
+      </template>
+      <div class="almost-list" :style="listVars">
+        <RouterLink
+          v-for="p in progress.almost"
+          :key="p._id"
+          :to="'/problem/' + p._id"
+          class="almost-item"
+        >
+          <span class="id">{{ p._id }}</span>
+          {{ p.title }}
+        </RouterLink>
+      </div>
+    </n-popover>
+  </div>
+</template>
+
+<style scoped>
+.progress-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  min-width: 0;
+  white-space: nowrap;
+  font-size: 13px;
+  color: v-bind("theme.textColor2");
+}
+
+.sep {
+  flex: none;
+  width: 1px;
+  height: 14px;
+  background: v-bind("theme.dividerColor");
+}
+
+.progress-row.compact {
+  flex-wrap: wrap;
+  gap: 6px 10px;
+}
+
+.progress-row.compact .sep {
+  display: none;
+}
+
+.total {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 4px;
+}
+
+.total b {
+  font-size: 18px;
+  font-weight: 700;
+  color: v-bind("theme.successColor");
+  font-variant-numeric: tabular-nums;
+}
+
+.chip {
+  height: 24px;
+  padding: 0 9px;
+  border-radius: 12px;
+  display: inline-flex;
+  align-items: center;
+  font-weight: 600;
+  background: v-bind("tone('success').background");
+  color: v-bind("tone('success').color");
+}
+
+.next {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  color: v-bind("theme.textColor2");
+  text-decoration: none;
+}
+
+.next b {
+  font-weight: 600;
+  color: v-bind("theme.textColor1");
+}
+
+.next:hover b {
+  color: v-bind("theme.primaryColor");
+}
+
+.almost {
+  border: 0;
+  padding: 0;
+  background: transparent;
+  font: inherit;
+  color: v-bind("theme.textColor3");
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  cursor: pointer;
+}
+
+.almost:hover {
+  color: v-bind("theme.primaryColor");
+}
+
+.start {
+  height: 28px;
+  padding: 0 12px;
+  border: 0;
+  border-radius: 14px;
+  background: v-bind("theme.primaryColor");
+  color: #fff;
+  font: inherit;
+  font-weight: 600;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  cursor: pointer;
+}
+
+.almost-list {
+  display: flex;
+  flex-direction: column;
+  max-height: 320px;
+  overflow-y: auto;
+  min-width: 200px;
+}
+
+.almost-item {
+  padding: 6px 4px;
+  border-radius: 4px;
+  color: var(--list-text);
+  text-decoration: none;
+  font-size: 13px;
+}
+
+.almost-item:hover {
+  background: var(--list-hover);
+}
+
+.almost-item .id {
+  margin-right: 6px;
+  color: var(--list-id);
+  font-variant-numeric: tabular-nums;
+}
+</style>
diff --git a/apps/web/src/oj/problem/components/TagNav.vue b/apps/web/src/oj/problem/components/TagNav.vue
new file mode 100644
index 0000000..25d5158
--- /dev/null
+++ b/apps/web/src/oj/problem/components/TagNav.vue
@@ -0,0 +1,253 @@
+<script setup lang="ts">
+import { Icon } from "@iconify/vue"
+import type { Tag, TagCategory } from "@oj2/contract"
+import { useThemeVars } from "naive-ui"
+import { useTone } from "oj/submission/composables/tone"
+
+/**
+ * 题目列表左栏：知识点 / 主题，带自己的进度（设计稿「题目列表重设计 · 改版」）。
+ * 只把做到了的标出来：一道没做对过的只写题数（不写 0/108），做了一部分的写 37/96 加进度条，
+ * 全做对的写「通关」。老师、没登录的人 progress 是 null，只有题数。
+ */
+const props = defineProps<{
+  tags: Tag[]
+  /** 选中的标签名，空串是「全部题目」 */
+  selected: string
+  allCount: number
+  progress: Record<string, number> | null
+}>()
+
+const emit = defineEmits<{ select: [name: string] }>()
+
+const theme = useThemeVars()
+const tone = useTone()
+
+const mode = ref<TagCategory>("knowledge")
+// 从别处带着一个主题标签进来（?tag=周杰伦），左栏得切到「主题」才看得见它
+watch(
+  () => [props.selected, props.tags] as const,
+  ([name]) => {
+    const tag = props.tags.find((t) => t.name === name)
+    if (tag) mode.value = tag.category
+  },
+  { immediate: true },
+)
+
+// 选中的知识点在下面（「输出入门」排在第 17 个），进来时滚到看得见的地方
+const navRef = ref<HTMLElement | null>(null)
+watch(
+  () => [props.selected, props.tags.length, mode.value],
+  () =>
+    nextTick(() => navRef.value?.querySelector(".item.on")?.scrollIntoView({ block: "nearest" })),
+)
+
+function byCategory(category: TagCategory) {
+  return props.tags
+    .filter((t) => t.category === category)
+    .sort((a, b) => b.problemCount - a.problemCount)
+}
+
+const knowledge = computed(() => byCategory("knowledge"))
+const themes = computed(() => byCategory("theme"))
+const shown = computed(() => (mode.value === "knowledge" ? knowledge.value : themes.value))
+
+function solvedOf(tag: Tag) {
+  return props.progress?.[String(tag.id)] ?? 0
+}
+
+function percent(tag: Tag) {
+  // 做对 1 道也要看得见一截，不然和没做一样
+  return Math.max(3, Math.round((solvedOf(tag) / Math.max(1, tag.problemCount)) * 100))
+}
+</script>
+
+<template>
+  <aside class="tag-nav">
+    <div class="switch">
+      <button :class="{ on: mode === 'knowledge' }" @click="mode = 'knowledge'">
+        知识点 {{ knowledge.length }}
+      </button>
+      <button :class="{ on: mode === 'theme' }" @click="mode = 'theme'">
+        主题 {{ themes.length }}
+      </button>
+    </div>
+    <nav ref="navRef" class="items">
+      <button class="item flat" :class="{ on: selected === '' }" @click="emit('select', '')">
+        <span class="name">全部题目</span>
+        <span class="count">{{ allCount || "" }}</span>
+      </button>
+      <button
+        v-for="tag in shown"
+        :key="tag.id"
+        class="item"
+        :class="{ on: selected === tag.name, flat: !progress || solvedOf(tag) === 0 }"
+        @click="emit('select', tag.name)"
+      >
+        <span class="line">
+          <span class="name">{{ tag.name }}</span>
+          <span v-if="!progress || solvedOf(tag) === 0" class="count">{{ tag.problemCount }}</span>
+          <span v-else-if="solvedOf(tag) >= tag.problemCount" class="done">
+            <Icon icon="ph:check-bold" :width="12" />通关
+          </span>
+          <span v-else class="count">
+            <b>{{ solvedOf(tag) }}</b
+            >/{{ tag.problemCount }}
+          </span>
+        </span>
+        <span v-if="progress && solvedOf(tag) > 0" class="bar">
+          <span :style="{ width: percent(tag) + '%' }"></span>
+        </span>
+      </button>
+    </nav>
+  </aside>
+</template>
+
+<style scoped>
+.tag-nav {
+  width: 224px;
+  flex: none;
+  box-sizing: border-box;
+  border-right: 1px solid v-bind("theme.dividerColor");
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.switch {
+  flex: none;
+  padding: 14px 14px 8px;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+}
+
+.switch button {
+  height: 28px;
+  border: 1px solid v-bind("theme.borderColor");
+  background: transparent;
+  font: inherit;
+  font-size: 13px;
+  color: v-bind("theme.textColor2");
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.switch button:first-child {
+  border-radius: 3px 0 0 3px;
+}
+
+.switch button:last-child {
+  margin-left: -1px;
+  border-radius: 0 3px 3px 0;
+}
+
+.switch button.on {
+  position: relative;
+  z-index: 1;
+  border-color: v-bind("theme.primaryColor");
+  color: v-bind("theme.primaryColor");
+}
+
+.items {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 0 8px 12px 14px;
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+
+.item {
+  flex: none;
+  box-sizing: border-box;
+  width: 100%;
+  padding: 6px 10px 7px;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  font: inherit;
+  font-size: 14px;
+  text-align: left;
+  color: v-bind("theme.textColor2");
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  cursor: pointer;
+}
+
+.item.flat {
+  padding: 7px 10px;
+  flex-direction: row;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.item:hover {
+  background: v-bind("theme.hoverColor");
+}
+
+.item.on {
+  background: v-bind("tone('success').background");
+}
+
+.item.on .name {
+  font-weight: 600;
+  color: v-bind("tone('success').color");
+}
+
+.line {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  width: 100%;
+}
+
+.item.flat .line {
+  width: auto;
+  flex: 1;
+}
+
+.name {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.count {
+  flex: none;
+  font-size: 12px;
+  color: v-bind("theme.textColor3");
+  font-variant-numeric: tabular-nums;
+}
+
+.count b {
+  font-weight: 600;
+  color: v-bind("tone('success').color");
+}
+
+.done {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  font-size: 12px;
+  font-weight: 600;
+  color: v-bind("tone('success').color");
+}
+
+.bar {
+  display: block;
+  height: 3px;
+  border-radius: 2px;
+  overflow: hidden;
+  background: v-bind("theme.dividerColor");
+}
+
+.bar span {
+  display: block;
+  height: 3px;
+  background: v-bind("theme.successColor");
+}
+</style>
diff --git a/apps/web/src/oj/problem/list.vue b/apps/web/src/oj/problem/list.vue
index 23efbd9..0680755 100644
--- a/apps/web/src/oj/problem/list.vue
+++ b/apps/web/src/oj/problem/list.vue
@@ -1,88 +1,98 @@
 <script setup lang="ts">
 import { Icon } from "@iconify/vue"
-import { NFlex, NTag } from "naive-ui"
+import type { ProblemProgress, ProblemTypeFilter, Tag } from "@oj2/contract"
 import { useRouteQuery } from "@vueuse/router"
-import { getProblemList } from "oj/api"
+import { useThemeVars } from "naive-ui"
+import { getAuthors, getProblemList, getProblemProgress, getRandomProblem } from "oj/api"
+import { useTone } from "oj/submission/composables/tone"
 import { STORAGE_KEY } from "utils/constants"
 import storage from "utils/storage"
-import { getTagColor } from "utils/functions"
-import type { ProblemRow, Tag as ContractTag } from "utils/types"
+import type { ProblemRow } from "utils/types"
 import { getProblemTagList } from "shared/api"
 import Hitokoto from "shared/components/Hitokoto.vue"
 import Pagination from "shared/components/Pagination.vue"
 import { useBreakpoints } from "shared/composables/breakpoints"
 import { usePagination } from "shared/composables/pagination"
+import { useAuthModalStore } from "shared/store/authModal"
 import { useUserStore } from "shared/store/user"
 import ProblemStatus from "./components/ProblemStatus.vue"
-import AuthorSelect from "shared/components/AuthorSelect.vue"
-import ProblemListTitle from "./components/ProblemListTitle.vue"
-
-// 列表页的标签是个视图模型：契约的标签 + 本地的选中态
-type Tag = ContractTag & { checked: boolean }
+import ProblemTypeTag from "./components/ProblemTypeTag.vue"
+import ProgressRow from "./components/ProgressRow.vue"
+import TagNav from "./components/TagNav.vue"
+import { PROBLEM_TYPE_HINT, PROBLEM_TYPE_LABEL, problemTypes } from "./utils/problemType"
 
+/**
+ * 题目列表（设计稿「题目列表重设计」定稿 B + 改版）：左栏知识点和自己的进度，
+ * 顶上一行先说做到了什么 + 一言，标题行是选中的知识点和筛选，每题最后一列是做对 / 做过的人数。
+ * 这一页主要给学生课外自己挑题（课上找题走顶栏题号框和首页），见 docs 里的讨论记录。
+ */
 interface ProblemQuery {
   keyword: string
   difficulty: string
   tag: string
   author: string
   sort: string
+  type: string
+  /** "1" = 只看没做完。用字符串：布尔值会让地址栏常挂一个 ?undone=false */
+  undone: string
 }
 
-const difficultyOptions = [
+const DIFFICULTIES = [
   { label: "全部", value: "" },
   { label: "简单", value: "Low" },
   { label: "中等", value: "Mid" },
   { label: "困难", value: "High" },
 ]
 
-const sortOptions = [
-  { label: "最新创建", value: "" },
-  { label: "最早创建", value: "create_time" },
-  { label: "最多提交", value: "-submission_number" },
-  { label: "最少提交", value: "submission_number" },
-  { label: "最多通过", value: "-accepted_number" },
-  { label: "最少通过", value: "accepted_number" },
-  { label: "画流程图", value: "flowchart" },
-  { label: "语法检查", value: "ast" },
-]
+const TYPES: ProblemTypeFilter[] = ["reference", "flowchart", "ast"]
 
-// naive-ui 下拉菜单默认只给 7.6 个选项的高度（InternalSelectMenu 主题里的
-// height: calc(var(--n-option-height) * 7.6)），8 条排序正好多出半条，逼出一根
-// 只能滚两像素的滚动条。按实际条数放开，+8px 是菜单自己的上下内边距。
-// 注意：NSelect 没有 dropdown-style 这个 prop，写了会当普通属性掉到根节点上
-// 不起作用；控制高度只能走 peers.InternalSelectMenu。
-const sortMenuTheme = {
-  peers: {
-    InternalSelectMenu: {
-      height: `calc(var(--n-option-height) * ${sortOptions.length} + 8px)`,
-    },
-  },
-}
+/** 新生一道还没做对时，顶行引去的知识点 */
+const START_TAG = "输出入门"
 
 const router = useRouter()
-
 const userStore = useUserStore()
-
+const authStore = useAuthModalStore()
+const theme = useThemeVars()
+const tone = useTone()
 const { isDesktop, isMobile } = useBreakpoints()
 
+const { query, clearQuery } = usePagination<ProblemQuery>(
+  {
+    keyword: useRouteQuery("keyword", "").value,
+    difficulty: useRouteQuery("difficulty", "").value,
+    tag: useRouteQuery("tag", "").value,
+    author: useRouteQuery("author", "").value,
+    sort: useRouteQuery("sort", "").value,
+    type: useRouteQuery("type", "").value,
+    undone: useRouteQuery("undone", "").value,
+  },
+  { defaultLimit: 30 },
+)
+
+const undoneOn = computed({
+  get: () => query.undone === "1",
+  set: (on: boolean) => (query.undone = on ? "1" : ""),
+})
+
 const problems = ref<ProblemRow[]>([])
 const total = ref(0)
+const loaded = ref(false)
 const tags = ref<Tag[]>([])
+const allCount = ref(0)
+const progress = ref<ProblemProgress | null>(null)
 
-// 使用分页 composable
-const { query, clearQuery } = usePagination<ProblemQuery>({
-  keyword: useRouteQuery("keyword", "").value,
-  difficulty: useRouteQuery("difficulty", "").value,
-  tag: useRouteQuery("tag", "").value,
-  author: useRouteQuery("author", "").value,
-  sort: useRouteQuery("sort", "").value,
-})
+/** 老师看的是题库，没有状态列、没有个人进度（定稿「老师」那块） */
+const teacher = computed(() => userStore.isTeacherOrAbove)
+const showStatus = computed(() => userStore.isAuthed && !teacher.value)
+const mine = computed(() => (showStatus.value ? progress.value : null))
 
-// 标签在桌面上默认展开：分成「知识点」「主题」两组之后，按知识点找题成了常规入口
-// （首页、个人主页的知识点地图都链到 ?tag=），收着的话学生根本不知道能这么筛。
-// 手机上还是收起：窄屏上四十多个标签能把题目表格整个顶出屏幕。
-// 从带 ?tag= 的链接进来时一律展开，让人看得见是哪个标签在起作用
-const [showTag, toggleShowTag] = useToggle(!!query.tag || isDesktop.value)
+const tagByName = computed(() => new Map(tags.value.map((t) => [t.name, t])))
+const currentTag = computed(() => tagByName.value.get(query.tag) ?? null)
+const startTag = computed(() => tagByName.value.get(START_TAG) ?? null)
+
+const hasExtraFilter = computed(
+  () => !!(query.keyword || query.difficulty || query.author || query.type),
+)
 
 async function listProblems() {
   if (query.page < 1) query.page = 1
@@ -93,76 +103,43 @@ async function listProblems() {
     difficulty: query.difficulty,
     author: query.author,
     sort: query.sort,
+    type: query.type,
+    // 不看 isAuthed：首屏请求发出时登录信息往往还没回来，后端对没登录的人自己会忽略它
+    undone: undoneOn.value ? "1" : "",
   })
   total.value = res.total
   problems.value = res.results
+  loaded.value = true
+  if (!query.tag && !hasExtraFilter.value && !undoneOn.value) allCount.value = res.total
 }
 
-async function listTags() {
-  const res = await getProblemTagList()
-  tags.value = res.map((r: Omit<Tag, "checked">) => ({
-    ...r,
-    checked: query.tag === r.name,
-  }))
+async function loadSide() {
+  const [tagRes, progressRes] = await Promise.all([
+    getProblemTagList(),
+    userStore.isAuthed ? getProblemProgress().catch(() => null) : Promise.resolve(null),
+  ])
+  tags.value = tagRes
+  progress.value = progressRes
+  if (!allCount.value) allCount.value = (await getProblemList(0, 1, {})).total
 }
 
-// 知识点在前、主题在后；组内按题目数从多到少，最常用的「输入输出」「选择结构」
-// 排在最前面，不再和一堆游戏名按拼音混排
-const TAG_GROUPS = [
-  { category: "knowledge", label: "知识点" },
-  { category: "theme", label: "主题" },
-] as const
-
-const tagGroups = computed(() =>
-  TAG_GROUPS.map((group) => ({
-    ...group,
-    tags: tags.value
-      .filter((t) => t.category === group.category)
-      .sort((a, b) => b.problemCount - a.problemCount),
-  })).filter((group) => group.tags.length > 0),
-)
-
-function chooseTag(tag: Tag) {
-  query.tag = tag.checked ? "" : tag.name
-  tags.value = tags.value.map((t) => {
-    if (t.id === tag.id) {
-      t.checked = !t.checked
-    } else {
-      t.checked = false
-    }
-    return t
-  })
-}
-
-// 监听搜索关键词变化（防抖）
-watchDebounced(() => query.keyword, listProblems, {
-  debounce: 500,
-  maxWait: 1000,
-})
-
-// 监听其他查询条件变化
+watchDebounced(() => query.keyword, listProblems, { debounce: 500, maxWait: 1000 })
 watch(
-  () => [query.tag, query.difficulty, query.limit, query.page, query.author, query.sort],
+  () => [
+    query.tag,
+    query.difficulty,
+    query.limit,
+    query.page,
+    query.author,
+    query.sort,
+    query.type,
+    query.undone,
+  ],
   listProblems,
 )
 
-// 监听标签变化，更新标签选中状态
-watch(
-  () => query.tag,
-  () => {
-    tags.value = tags.value.map((r: Omit<Tag, "checked">) => ({
-      ...r,
-      checked: query.tag === r.name,
-    }))
-  },
-)
-
-// 这里只补「用登录框登进来」那一下：那时页面不刷新，列表还是匿名时拉的。
-//
-// 进站时的那次 listProblems 不需要它跟着再来一遍 —— 请求带 cookie（axios 开了
-// withCredentials），后端 optionalAuth 认的也是 cookie，所以首屏那一份里状态列
-// 本来就是全的。基线取 storage 里的登录态，它和 cookie 同生共死，正好用来区分
-// 「profile 回来了，还是原来那个人」和「刚登进来 / 刚退出去」。
+// 用登录框登进来（页面不刷新）、或者退出：状态列和进度都要换成另一个人的。
+// 进站那一次不用：请求带 cookie，首屏那一份本来就是全的
 let authedAtLoad: boolean = storage.get(STORAGE_KEY.AUTHED) ?? false
 watch(
   () => [userStore.isFinished, userStore.isAuthed],
@@ -170,219 +147,1062 @@ watch(
     if (!isFinished || isAuthed === authedAtLoad) return
     authedAtLoad = isAuthed
     listProblems()
+    loadSide()
   },
 )
 
 onMounted(() => {
   listProblems()
-  listTags()
+  loadSide()
 })
 
-const baseColumns: DataTableColumn<ProblemRow>[] = [
-  {
-    title: "状态",
-    key: "status",
-    width: 80,
-    align: "center",
-    render: (row) => h(ProblemStatus, { status: row.status }),
-  },
-  {
-    title: "编号",
-    key: "_id",
-    width: 100,
-  },
-  {
-    title: "题目",
-    key: "title",
-    minWidth: 200,
-    render: (row) => h(ProblemListTitle, { problem: row }),
-  },
-  {
-    title: "难度",
-    key: "difficulty",
-    width: 100,
-    render: (row) =>
-      row.difficulty ? h(NTag, { type: getTagColor(row.difficulty) }, () => row.difficulty) : null,
-  },
-  {
-    title: "标签",
-    key: "tags",
-    width: 260,
-    render: (row) => h(NFlex, () => row.tags.map((t) => h(NTag, { key: t }, () => t))),
-  },
-  {
-    title: "出题者",
-    key: "author",
-    width: 130,
-  },
-  {
-    title: "提交数",
-    key: "submissionCount",
-    align: "center",
-    width: 100,
-  },
-  {
-    title: "通过率",
-    key: "acRate",
-    width: 100,
-    align: "center",
-  },
-]
-
-// 手机上只留判断「做不做这题」要的几列，其余的挤进 390 宽的屏幕只会横向溢出
-const MOBILE_WIDTHS: Record<string, { width?: number; minWidth?: number }> = {
-  status: { width: 60 },
-  _id: { width: 72 },
-  title: { minWidth: 120 },
-  difficulty: { width: 72 },
+function selectTag(name: string) {
+  query.tag = name
 }
 
-const columns = computed(() =>
-  baseColumns
-    .filter((c: any) => {
-      if (c.key === "status" && !userStore.isAuthed) return false
-      return !isMobile.value || c.key in MOBILE_WIDTHS
-    })
-    .map((c: any) => (isMobile.value ? { ...c, ...MOBILE_WIDTHS[c.key] } : c)),
+const solvedInTag = computed(() =>
+  mine.value && currentTag.value ? (mine.value.byTag[String(currentTag.value.id)] ?? 0) : null,
 )
 
-function rowProps(row: ProblemRow) {
-  return {
-    style: "cursor: pointer",
-    onClick() {
-      router.push("/problem/" + row._id)
-    },
+/** 标题旁那句：学生看自己在这个知识点的进度，打开「只看没做完」就说还剩几道 */
+const countText = computed(() => {
+  // 全做对了（下面是空状态）就别说「还有 0 道」，照常说做对几道
+  if (undoneOn.value && mine.value && total.value > 0)
+    return { kind: "left" as const, n: total.value }
+  if (solvedInTag.value !== null && !hasExtraFilter.value && currentTag.value)
+    return {
+      kind: "mine" as const,
+      n: solvedInTag.value,
+      of: currentTag.value.problemCount,
+    }
+  return { kind: "total" as const, n: total.value }
+})
+
+// ---- 排序：默认随知识点走（选了按题号，全部按最新创建），下拉里显示的是实际生效的那个 ----
+const sortOptions = computed(() => {
+  const byId = !!query.tag
+  return [
+    { label: byId ? "按题号" : "最新创建", value: "" },
+    { label: byId ? "最新创建" : "按题号", value: byId ? "new" : "id" },
+    { label: "最多人做对", value: "popular" },
+  ]
+})
+
+// ---- 出题者 ----
+const authorOptions = ref<{ label: string; value: string }[]>([])
+async function loadAuthors(show: boolean) {
+  if (!show || authorOptions.value.length) return
+  const res = await getAuthors(false)
+  authorOptions.value = res.map((a) => ({
+    label: `${a.username}（${a.problemCount}）`,
+    value: a.username,
+  }))
+}
+
+// ---- 类型 ----
+const showTypeMenu = ref(false)
+// 弹层被传送到 body 下面，样式里的 v-bind 变量挂在页面根上、够不着它，主题色只能就地给
+const menuVars = computed(() => ({
+  "--menu-bg": theme.value.popoverColor,
+  "--menu-shadow": theme.value.boxShadow2,
+  "--menu-text": theme.value.textColor1,
+  "--menu-hint": theme.value.textColor3,
+  "--menu-hover": theme.value.hoverColor,
+  "--menu-on": tone("success").background,
+  "--menu-check": theme.value.successColor,
+}))
+// 下拉里每类后面的题数：一共三十几道，第一次打开时数一下就行
+const typeCounts = ref<Partial<Record<ProblemTypeFilter, number>>>({})
+watch(showTypeMenu, async (open) => {
+  if (!open || Object.keys(typeCounts.value).length) return
+  const counts = await Promise.all(TYPES.map((type) => getProblemList(0, 1, { type })))
+  typeCounts.value = Object.fromEntries(TYPES.map((type, i) => [type, counts[i]!.total]))
+})
+
+function pickType(value: string) {
+  query.type = value
+  showTypeMenu.value = false
+}
+
+// ---- 随便来一道 ----
+const picking = ref(false)
+async function pickRandom() {
+  picking.value = true
+  try {
+    const id = await getRandomProblem(query.tag)
+    router.push("/problem/" + id)
+  } finally {
+    picking.value = false
   }
 }
+
+// ---- 「只看没做完」下一道都没有了：说清楚为什么是空的，给两条路 ----
+const nextTag = computed(() => {
+  const p = mine.value
+  if (!p) return null
+  let best: { tag: Tag; left: number } | null = null
+  for (const tag of tags.value) {
+    if (tag.category !== "knowledge" || tag.name === query.tag) continue
+    const left = tag.problemCount - (p.byTag[String(tag.id)] ?? 0)
+    if (left <= 0) continue
+    // 先挑做过一些的（接着练），都没碰过就挑题最多的
+    const started = (p.byTag[String(tag.id)] ?? 0) > 0
+    const bestStarted = best ? (p.byTag[String(best.tag.id)] ?? 0) > 0 : false
+    if (!best || (started && !bestStarted) || (started === bestStarted && left > best.left))
+      best = { tag, left }
+  }
+  return best
+})
+const allDone = computed(() => loaded.value && undoneOn.value && total.value === 0 && !!mine.value)
+
+function knowledgeOf(row: ProblemRow) {
+  return row.tags.filter((name) => tagByName.value.get(name)?.category === "knowledge").join(" · ")
+}
+
+function mustDo(row: ProblemRow) {
+  return row.tags.includes("必会题")
+}
+
+const DIFFICULTY_TONE = { 简单: "success", 中等: "warning", 困难: "error" } as const
+
+function difficultyStyle(row: ProblemRow) {
+  if (!row.difficulty) return {}
+  const t = tone(DIFFICULTY_TONE[row.difficulty])
+  return { color: t.color, background: t.background }
+}
+
+const [showMobileFilters, toggleMobileFilters] = useToggle(false)
+
+// 手机上知识点横着滑：带着 ?tag= 进来、或者点了靠后的知识点，把它滑到看得见的地方
+const chipsRef = ref<HTMLElement | null>(null)
+watch(
+  () => [query.tag, tags.value.length],
+  () =>
+    nextTick(() =>
+      chipsRef.value
+        ?.querySelector(".m-chip.on")
+        ?.scrollIntoView({ block: "nearest", inline: "center" }),
+    ),
+)
+
+const gridColumns = computed(() =>
+  showStatus.value
+    ? "40px 64px minmax(0, 1fr) 190px 64px 128px"
+    : "64px minmax(0, 1fr) 190px 64px 128px",
+)
 </script>
 
 <template>
-  <n-flex vertical size="large">
-    <div class="problem-list-toolbar">
-      <n-space>
-        <n-form :show-feedback="false" inline label-placement="left">
-          <n-form-item label="难度">
-            <n-select
-              style="width: 80px"
-              v-model:value="query.difficulty"
-              :options="difficultyOptions"
-            />
-          </n-form-item>
-          <n-form-item label="出题者">
-            <AuthorSelect v-model:value="query.author" />
-          </n-form-item>
-        </n-form>
-        <n-form :show-feedback="false" inline label-placement="left">
-          <n-form-item label="排序">
-            <n-select
-              style="width: 120px"
-              v-model:value="query.sort"
-              :options="sortOptions"
-              :theme-overrides="sortMenuTheme"
-            />
-          </n-form-item>
-          <n-form-item>
-            <n-input
-              clearable
-              style="width: 160px"
-              v-model:value="query.keyword"
-              placeholder="题号或标题"
-            />
-          </n-form-item>
-        </n-form>
-        <n-form :show-feedback="false" inline label-placement="left">
-          <n-form-item>
-            <n-button @click="clearQuery" quaternary>重置</n-button>
-          </n-form-item>
-          <n-form-item>
-            <n-button @click="toggleShowTag()" quaternary icon-placement="right">
-              <template #icon>
-                <Icon v-if="showTag" icon="ph:caret-up"></Icon>
-                <Icon v-else icon="ph:caret-down"></Icon>
-              </template>
-              标签
-            </n-button>
-          </n-form-item>
-          <n-form-item v-if="query.tag && !showTag">
-            <n-tag type="success" closable @close="query.tag = ''">{{ query.tag }}</n-tag>
-          </n-form-item>
-        </n-form>
-      </n-space>
-      <Hitokoto v-if="isDesktop" class="problem-list-hitokoto" />
-    </div>
-    <n-collapse-transition :show="showTag">
-      <div class="tag-groups">
-        <div v-for="group in tagGroups" :key="group.category" class="tag-group">
-          <n-text depth="3" class="tag-group-label">{{ group.label }}</n-text>
-          <n-flex>
-            <n-tag
-              v-for="tag in group.tags"
-              :closable="tag.checked"
-              @close="chooseTag(tag)"
-              @click="chooseTag(tag)"
-              :key="tag.id"
-              :type="tag.checked ? 'success' : 'default'"
-              class="tag-chip"
+  <div class="page" :class="{ mobile: isMobile }">
+    <!-- ================= 桌面 ================= -->
+    <div v-if="isDesktop" class="split">
+      <TagNav
+        :tags="tags"
+        :selected="query.tag"
+        :all-count="allCount"
+        :progress="mine?.byTag ?? null"
+        @select="selectTag"
+      />
+      <section class="main">
+        <div class="top">
+          <ProgressRow v-if="mine" :progress="mine" :start-tag="startTag" @select-tag="selectTag" />
+          <div v-else-if="!userStore.isAuthed && userStore.isFinished" class="anon">
+            登录以后，左边每个知识点会显示你做对了几道
+            <button class="link" @click="authStore.openLoginModal()">登录</button>
+          </div>
+          <div class="spacer"></div>
+          <Hitokoto class="hitokoto" />
+        </div>
+
+        <div class="titlebar">
+          <h1>{{ query.tag || "全部题目" }}</h1>
+          <span class="count">
+            <template v-if="countText.kind === 'left'">
+              还有 <b class="plain">{{ countText.n }}</b> 道没做对
+            </template>
+            <template v-else-if="countText.kind === 'mine'">
+              你做对 <b>{{ countText.n }}</b> / {{ countText.of }}
+            </template>
+            <template v-else>{{ countText.n }} 道</template>
+          </span>
+          <button class="random" :disabled="picking" @click="pickRandom">
+            <Icon icon="ph:dice-five-bold" :width="15" />随便来一道
+          </button>
+          <div class="spacer"></div>
+          <n-input
+            v-model:value="query.keyword"
+            class="w-search"
+            size="small"
+            clearable
+            placeholder="题号或标题"
+          >
+            <template #prefix><Icon icon="ph:magnifying-glass" /></template>
+          </n-input>
+          <div class="segmented">
+            <button
+              v-for="d in DIFFICULTIES"
+              :key="d.value"
+              :class="{ on: query.difficulty === d.value }"
+              @click="query.difficulty = d.value"
             >
-              {{ tag.name }}
-            </n-tag>
-          </n-flex>
+              {{ d.label }}
+            </button>
+          </div>
+          <n-popover
+            v-model:show="showTypeMenu"
+            trigger="click"
+            placement="bottom-start"
+            :show-arrow="false"
+            raw
+          >
+            <template #trigger>
+              <button class="select" :class="{ on: query.type }">
+                <span>{{
+                  query.type ? PROBLEM_TYPE_LABEL[query.type as ProblemTypeFilter] : "全部类型"
+                }}</span>
+                <Icon icon="ph:caret-down-bold" :width="12" />
+              </button>
+            </template>
+            <div class="type-menu" :style="menuVars">
+              <button :class="{ on: !query.type }" @click="pickType('')">
+                <span class="check"><Icon v-if="!query.type" icon="ph:check-bold" /></span>
+                <span class="body"><span class="label">全部类型</span></span>
+              </button>
+              <button
+                v-for="kind in TYPES"
+                :key="kind"
+                :class="{ on: query.type === kind }"
+                @click="pickType(kind)"
+              >
+                <span class="check"><Icon v-if="query.type === kind" icon="ph:check-bold" /></span>
+                <span class="body">
+                  <span class="label-line">
+                    <ProblemTypeTag :kind="kind" />
+                    <span v-if="typeCounts[kind] !== undefined" class="n"
+                      >{{ typeCounts[kind] }} 道</span
+                    >
+                  </span>
+                  <span class="hint">{{ PROBLEM_TYPE_HINT[kind] }}</span>
+                </span>
+              </button>
+            </div>
+          </n-popover>
+          <n-select
+            :value="query.author || null"
+            class="w-author"
+            size="small"
+            placeholder="出题者"
+            clearable
+            filterable
+            :consistent-menu-width="false"
+            :options="authorOptions"
+            @update:show="loadAuthors"
+            @update:value="(v: string | null) => (query.author = v ?? '')"
+          />
+          <n-select
+            v-model:value="query.sort"
+            class="w-sort"
+            size="small"
+            :consistent-menu-width="false"
+            :options="sortOptions"
+          />
+          <span class="vsep"></span>
+          <label
+            class="undone"
+            :class="{ disabled: !userStore.isAuthed }"
+            :title="userStore.isAuthed ? '做对的题藏起来' : '登录后才能用'"
+          >
+            <n-switch v-model:value="undoneOn" size="small" :disabled="!userStore.isAuthed" />
+            只看没做完
+          </label>
+        </div>
+
+        <div class="table">
+          <div class="thead" :style="{ gridTemplateColumns: gridColumns }">
+            <div v-if="showStatus" class="center">状态</div>
+            <div>题号</div>
+            <div>题目</div>
+            <div>知识点</div>
+            <div>难度</div>
+            <div>做对 / 做过</div>
+          </div>
+          <div class="rows">
+            <RouterLink
+              v-for="row in problems"
+              :key="row.id"
+              :to="'/problem/' + row._id"
+              class="row"
+              :style="{ gridTemplateColumns: gridColumns }"
+            >
+              <div v-if="showStatus" class="center"><ProblemStatus :status="row.status" /></div>
+              <div class="id">{{ row._id }}</div>
+              <div class="title">
+                <span class="text">{{ row.title }}</span>
+                <span v-if="mustDo(row)" class="must">必会</span>
+                <ProblemTypeTag v-for="kind in problemTypes(row)" :key="kind" :kind="kind" />
+              </div>
+              <div class="knowledge">{{ knowledgeOf(row) || "—" }}</div>
+              <div>
+                <span v-if="row.difficulty" class="difficulty" :style="difficultyStyle(row)">
+                  {{ row.difficulty }}
+                </span>
+              </div>
+              <div class="people">
+                <b>{{ row.solvedUsers }}</b> / {{ row.triedUsers }} 人
+              </div>
+            </RouterLink>
+
+            <div v-if="allDone" class="empty">
+              <span class="empty-icon"><Icon icon="ph:check-bold" :width="26" /></span>
+              <b v-if="currentTag"
+                >{{ currentTag.name }}的 {{ currentTag.problemCount }} 道你都做对了</b
+              >
+              <b v-else>这里的题你都做对了</b>
+              <span class="sub">关掉「只看没做完」能看回这些题</span>
+              <div class="empty-actions">
+                <n-button v-if="nextTag" type="primary" @click="selectTag(nextTag.tag.name)">
+                  接着练「{{ nextTag.tag.name }}」（还有 {{ nextTag.left }} 道）
+                </n-button>
+                <n-button @click="undoneOn = false">关掉只看没做完</n-button>
+              </div>
+            </div>
+            <div v-else-if="loaded && !problems.length" class="empty">
+              <b>没有符合条件的题</b>
+              <n-button size="small" @click="clearQuery">清空筛选</n-button>
+            </div>
+          </div>
+          <!-- Pagination 根上自带 width: 100%，内边距得加在外面一层，不然右边溢出被截掉 -->
+          <div class="pager">
+            <Pagination :total="total" v-model:limit="query.limit" v-model:page="query.page" />
+          </div>
+        </div>
+      </section>
+    </div>
+
+    <!-- ================= 手机 ================= -->
+    <template v-else>
+      <div v-if="mine" class="m-progress">
+        <ProgressRow :progress="mine" :start-tag="startTag" compact @select-tag="selectTag" />
+      </div>
+      <div ref="chipsRef" class="m-chips">
+        <button class="m-chip" :class="{ on: !query.tag }" @click="selectTag('')">
+          全部<span>{{ allCount || "" }}</span>
+        </button>
+        <button
+          v-for="tag in tags
+            .filter((t) => t.category === 'knowledge')
+            .sort((a, b) => b.problemCount - a.problemCount)"
+          :key="tag.id"
+          class="m-chip"
+          :class="{ on: query.tag === tag.name }"
+          @click="selectTag(tag.name)"
+        >
+          {{ tag.name }}
+          <span v-if="mine && (mine.byTag[String(tag.id)] ?? 0) >= tag.problemCount" class="done">
+            <Icon icon="ph:check-bold" :width="11" />
+          </span>
+          <span v-else-if="mine && (mine.byTag[String(tag.id)] ?? 0) > 0">
+            {{ mine.byTag[String(tag.id)] }}/{{ tag.problemCount }}
+          </span>
+          <span v-else>{{ tag.problemCount }}</span>
+        </button>
+      </div>
+      <div class="m-title">
+        <div class="m-heading">
+          <h1>{{ query.tag || "全部题目" }}</h1>
+          <span class="count">
+            <template v-if="countText.kind === 'left'">还有 {{ countText.n }} 道没做对</template>
+            <template v-else-if="countText.kind === 'mine'">
+              {{ countText.of }} 道 · 你做对 {{ countText.n }} 道
+            </template>
+            <template v-else>{{ countText.n }} 道</template>
+          </span>
+        </div>
+        <button class="random" :disabled="picking" @click="pickRandom">
+          <Icon icon="ph:dice-five-bold" :width="15" />随便来一道
+        </button>
+        <button class="m-filter" :class="{ on: showMobileFilters }" @click="toggleMobileFilters()">
+          <Icon icon="ph:funnel-simple-bold" :width="14" />筛选
+        </button>
+      </div>
+      <div v-if="showMobileFilters" class="m-panel">
+        <n-input v-model:value="query.keyword" size="small" clearable placeholder="题号或标题" />
+        <div class="segmented">
+          <button
+            v-for="d in DIFFICULTIES"
+            :key="d.value"
+            :class="{ on: query.difficulty === d.value }"
+            @click="query.difficulty = d.value"
+          >
+            {{ d.label }}
+          </button>
+        </div>
+        <n-select
+          :value="query.type || null"
+          size="small"
+          placeholder="全部类型"
+          clearable
+          :options="TYPES.map((k) => ({ label: PROBLEM_TYPE_LABEL[k], value: k }))"
+          @update:value="(v: string | null) => (query.type = v ?? '')"
+        />
+        <n-select
+          :value="query.author || null"
+          size="small"
+          placeholder="出题者"
+          clearable
+          filterable
+          :options="authorOptions"
+          @update:show="loadAuthors"
+          @update:value="(v: string | null) => (query.author = v ?? '')"
+        />
+        <n-select v-model:value="query.sort" size="small" :options="sortOptions" />
+        <label class="undone" :class="{ disabled: !userStore.isAuthed }">
+          <n-switch v-model:value="undoneOn" size="small" :disabled="!userStore.isAuthed" />
+          只看没做完
+        </label>
+      </div>
+      <div class="m-rows">
+        <RouterLink v-for="row in problems" :key="row.id" :to="'/problem/' + row._id" class="m-row">
+          <span class="m-status"><ProblemStatus v-if="showStatus" :status="row.status" /></span>
+          <span class="id">{{ row._id }}</span>
+          <span class="m-main">
+            <span class="m-name">
+              <span class="text">{{ row.title }}</span>
+              <span v-if="mustDo(row)" class="must">必会</span>
+            </span>
+            <span class="m-meta">
+              <span v-if="row.difficulty" class="difficulty" :style="difficultyStyle(row)">
+                {{ row.difficulty }}
+              </span>
+              <ProblemTypeTag v-for="kind in problemTypes(row)" :key="kind" :kind="kind" />
+              <span class="people">{{ row.solvedUsers }} / {{ row.triedUsers }} 人做对</span>
+            </span>
+          </span>
+        </RouterLink>
+        <div v-if="allDone" class="empty">
+          <b>这里的题你都做对了</b>
+          <n-button size="small" @click="undoneOn = false">关掉只看没做完</n-button>
+        </div>
+        <div v-else-if="loaded && !problems.length" class="empty">
+          <b>没有符合条件的题</b>
+          <n-button size="small" @click="clearQuery">清空筛选</n-button>
         </div>
       </div>
-    </n-collapse-transition>
-    <n-data-table :bordered="false" :data="problems" :columns="columns" :row-props="rowProps" />
-  </n-flex>
-  <Pagination :total="total" v-model:limit="query.limit" v-model:page="query.page" />
+      <Pagination :total="total" v-model:limit="query.limit" v-model:page="query.page" />
+    </template>
+  </div>
 </template>
 
 <style scoped>
-.problem-list-toolbar {
-  display: grid;
-  grid-template-columns: minmax(0, auto) minmax(250px, 1fr);
-  align-items: start;
-  gap: 12px 16px;
-}
-
-.problem-list-toolbar :deep(.n-space) {
-  min-width: 0;
-}
-
-.problem-list-hitokoto {
-  justify-self: end;
-  width: 100%;
-  max-width: 720px;
-  min-width: 0;
-}
-
-.tag-groups {
+/* 铺满顶栏以下：和提交列表一样用负边距吃掉外层 16px 的内边距（顶栏 56） */
+.page {
+  margin: -16px;
+  height: calc(100vh - 56px);
   display: flex;
   flex-direction: column;
-  gap: 10px;
+  background: v-bind("theme.cardColor");
+  color: v-bind("theme.textColor1");
 }
 
-.tag-group {
-  display: grid;
-  grid-template-columns: 48px minmax(0, 1fr);
-  align-items: start;
-  gap: 8px;
+.page.mobile {
+  height: auto;
 }
 
-.tag-group-label {
+.split {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+}
+
+.main {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.top {
+  height: 52px;
+  flex: none;
+  box-sizing: border-box;
+  padding: 0 24px;
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  border-bottom: 1px solid v-bind("theme.dividerColor");
+}
+
+.spacer {
+  flex: 1;
+}
+
+.hitokoto {
+  flex: 0 1 420px;
+  max-width: 420px;
   font-size: 13px;
-  line-height: 28px;
 }
 
-.tag-chip {
+.anon {
+  font-size: 13px;
+  color: v-bind("theme.textColor2");
+  white-space: nowrap;
+}
+
+.link {
+  border: 0;
+  padding: 0;
+  margin-left: 8px;
+  background: transparent;
+  font: inherit;
+  font-weight: 600;
+  color: v-bind("theme.primaryColor");
   cursor: pointer;
 }
 
-@media (max-width: 768px) {
-  .problem-list-toolbar {
-    grid-template-columns: minmax(0, 1fr);
-  }
+/* 1280 宽（机房 1280×1024）也要一行放下：左栏 224 之后只剩 1008，控件宽度是按它掐的，
+   加东西之前先在 1280 下看一眼「只看没做完」还在不在 */
+.titlebar {
+  height: 56px;
+  flex: none;
+  box-sizing: border-box;
+  padding: 0 24px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  white-space: nowrap;
+}
 
-  .problem-list-toolbar :deep(.n-space) {
-    width: 100%;
-  }
+.titlebar h1 {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 700;
+}
+
+.count {
+  font-size: 13px;
+  color: v-bind("theme.textColor3");
+}
+
+.count b {
+  font-weight: 600;
+  color: v-bind("theme.successColor");
+}
+
+.count b.plain {
+  color: v-bind("theme.textColor2");
+}
+
+.random {
+  height: 28px;
+  flex: none;
+  box-sizing: border-box;
+  margin-left: 4px;
+  padding: 0 9px 0 7px;
+  border: 1px solid v-bind("theme.primaryColorSuppl");
+  border-radius: 14px;
+  background: transparent;
+  font: inherit;
+  font-size: 13px;
+  color: v-bind("tone('success').color");
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  cursor: pointer;
+}
+
+.random:hover {
+  background: v-bind("tone('success').background");
+}
+
+.random:disabled {
+  cursor: wait;
+  opacity: 0.7;
+}
+
+.w-search {
+  flex: 0 1 132px;
+  min-width: 100px;
+}
+
+.w-author {
+  width: 92px;
+  flex: none;
+}
+
+.w-sort {
+  width: 96px;
+  flex: none;
+}
+
+.segmented {
+  display: flex;
+  flex: none;
+}
+
+.segmented button {
+  height: 28px;
+  padding: 0 10px;
+  margin-left: -1px;
+  border: 1px solid v-bind("theme.borderColor");
+  background: transparent;
+  font: inherit;
+  font-size: 13px;
+  color: v-bind("theme.textColor2");
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.segmented button:first-child {
+  margin-left: 0;
+  border-radius: 3px 0 0 3px;
+}
+
+.segmented button:last-child {
+  border-radius: 0 3px 3px 0;
+}
+
+.segmented button.on {
+  position: relative;
+  z-index: 1;
+  border-color: v-bind("theme.primaryColor");
+  color: v-bind("theme.primaryColor");
+}
+
+.select {
+  width: 96px;
+  height: 28px;
+  flex: none;
+  box-sizing: border-box;
+  padding: 0 8px 0 10px;
+  border: 1px solid v-bind("theme.borderColor");
+  border-radius: 3px;
+  background: transparent;
+  font: inherit;
+  font-size: 13px;
+  color: v-bind("theme.textColor1");
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 4px;
+  cursor: pointer;
+}
+
+.select span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.select svg {
+  flex: none;
+  color: v-bind("theme.textColor3");
+}
+
+.select.on {
+  border-color: v-bind("theme.primaryColor");
+  color: v-bind("tone('success').color");
+}
+
+.type-menu {
+  width: 300px;
+  box-sizing: border-box;
+  padding: 4px 0;
+  border-radius: 6px;
+  background: var(--menu-bg);
+  box-shadow: var(--menu-shadow);
+}
+
+.type-menu button {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 8px 12px;
+  border: 0;
+  background: transparent;
+  font: inherit;
+  text-align: left;
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  cursor: pointer;
+  color: var(--menu-text);
+}
+
+.type-menu button:hover {
+  background: var(--menu-hover);
+}
+
+.type-menu button.on {
+  background: var(--menu-on);
+}
+
+.type-menu .check {
+  width: 14px;
+  flex: none;
+  padding-top: 2px;
+  color: var(--menu-check);
+}
+
+.type-menu .body {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 4px;
+}
+
+.type-menu .label-line {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.type-menu .n {
+  font-size: 12px;
+  color: var(--menu-hint);
+  font-variant-numeric: tabular-nums;
+}
+
+.type-menu .label {
+  font-size: 13px;
+}
+
+.type-menu .hint {
+  font-size: 12px;
+  line-height: 17px;
+  color: var(--menu-hint);
+  white-space: normal;
+}
+
+.vsep {
+  width: 1px;
+  height: 20px;
+  margin: 0 2px;
+  flex: none;
+  background: v-bind("theme.dividerColor");
+}
+
+.undone {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex: none;
+  font-size: 13px;
+  color: v-bind("theme.textColor2");
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.undone.disabled {
+  color: v-bind("theme.textColorDisabled");
+  cursor: not-allowed;
+}
+
+.table {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.thead,
+.row {
+  box-sizing: border-box;
+  padding: 0 24px;
+  display: grid;
+  column-gap: 16px;
+  align-items: center;
+}
+
+.thead {
+  height: 36px;
+  flex: none;
+  font-size: 12px;
+  font-weight: 600;
+  color: v-bind("theme.textColor3");
+  background: v-bind("theme.tableHeaderColor");
+  border-bottom: 1px solid v-bind("theme.dividerColor");
+}
+
+.rows {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+}
+
+.row {
+  height: 40px;
+  border-bottom: 1px solid v-bind("theme.dividerColor");
+  color: v-bind("theme.textColor1");
+  text-decoration: none;
+}
+
+.row:hover {
+  background: v-bind("theme.hoverColor");
+}
+
+.center {
+  display: flex;
+  justify-content: center;
+  text-align: center;
+}
+
+.id {
+  color: v-bind("theme.textColor3");
+  font-variant-numeric: tabular-nums;
+}
+
+.title {
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.text {
+  min-width: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.must {
+  flex: none;
+  height: 20px;
+  box-sizing: border-box;
+  padding: 0 6px;
+  border: 1px solid v-bind("theme.warningColorSuppl");
+  border-radius: 3px;
+  font-size: 12px;
+  line-height: 18px;
+  color: v-bind("tone('warning').color");
+}
+
+.knowledge {
+  font-size: 13px;
+  color: v-bind("theme.textColor3");
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.difficulty {
+  height: 22px;
+  padding: 0 7px;
+  border-radius: 3px;
+  font-size: 12px;
+  display: inline-flex;
+  align-items: center;
+}
+
+.people {
+  font-size: 13px;
+  color: v-bind("theme.textColor3");
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+.people b {
+  font-weight: 600;
+  color: v-bind("theme.textColor2");
+}
+
+.pager {
+  flex: none;
+  padding: 0 24px;
+  border-top: 1px solid v-bind("theme.dividerColor");
+}
+
+.pager :deep(.margin) {
+  margin: 10px 0;
+}
+
+.empty {
+  padding: 56px 24px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+  font-size: 14px;
+}
+
+.empty b {
+  font-size: 16px;
+}
+
+.empty .sub {
+  font-size: 13px;
+  color: v-bind("theme.textColor3");
+}
+
+.empty-icon {
+  width: 52px;
+  height: 52px;
+  border-radius: 26px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: v-bind("theme.successColor");
+  background: v-bind("tone('success').background");
+}
+
+.empty-actions {
+  display: flex;
+  gap: 8px;
+  margin-top: 6px;
+}
+
+/* ---------- 手机 ---------- */
+.m-progress {
+  padding: 12px 16px 0;
+}
+
+.m-chips {
+  padding: 14px 0 0 16px;
+  display: flex;
+  gap: 8px;
+  overflow-x: auto;
+  white-space: nowrap;
+  scrollbar-width: none;
+}
+
+.m-chip {
+  height: 32px;
+  flex: none;
+  box-sizing: border-box;
+  padding: 0 12px;
+  border: 1px solid v-bind("theme.borderColor");
+  border-radius: 16px;
+  background: transparent;
+  font: inherit;
+  font-size: 13px;
+  color: v-bind("theme.textColor2");
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.m-chip span {
+  color: v-bind("theme.textColor3");
+}
+
+.m-chip .done {
+  display: inline-flex;
+  color: v-bind("theme.successColor");
+}
+
+.m-chip.on {
+  border-color: v-bind("theme.primaryColor");
+  background: v-bind("tone('success').background");
+  color: v-bind("tone('success').color");
+  font-weight: 600;
+}
+
+.m-title {
+  padding: 14px 16px 10px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  border-bottom: 1px solid v-bind("theme.dividerColor");
+}
+
+.m-heading {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.m-heading h1 {
+  margin: 0;
+  font-size: 18px;
+}
+
+.m-heading .count {
+  font-size: 12px;
+}
+
+.m-title .random {
+  height: 34px;
+  border-radius: 17px;
+}
+
+.m-filter {
+  height: 34px;
+  padding: 0 12px;
+  border: 1px solid v-bind("theme.borderColor");
+  border-radius: 17px;
+  background: transparent;
+  font: inherit;
+  font-size: 13px;
+  color: v-bind("theme.textColor2");
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.m-filter.on {
+  border-color: v-bind("theme.primaryColor");
+  color: v-bind("tone('success').color");
+}
+
+.m-panel {
+  padding: 10px 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  border-bottom: 1px solid v-bind("theme.dividerColor");
+}
+
+.m-row {
+  box-sizing: border-box;
+  min-height: 58px;
+  padding: 9px 16px;
+  display: grid;
+  grid-template-columns: 20px 44px minmax(0, 1fr);
+  column-gap: 8px;
+  align-items: center;
+  border-bottom: 1px solid v-bind("theme.dividerColor");
+  color: v-bind("theme.textColor1");
+  text-decoration: none;
+}
+
+.m-row .id {
+  font-size: 13px;
+}
+
+.m-status {
+  display: flex;
+}
+
+.m-main {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.m-name {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+}
+
+.m-meta {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-wrap: wrap;
+}
+
+.m-meta .difficulty {
+  height: 20px;
+  padding: 0 6px;
+}
+
+.m-meta .people {
+  font-size: 12px;
 }
 </style>
diff --git a/apps/web/src/oj/problem/utils/problemType.ts b/apps/web/src/oj/problem/utils/problemType.ts
new file mode 100644
index 0000000..9fc73f5
--- /dev/null
+++ b/apps/web/src/oj/problem/utils/problemType.ts
@@ -0,0 +1,28 @@
+import type { ProblemTypeFilter } from "@oj2/contract"
+
+/** 名字和题目页一致：「语法要求」（题目页原来叫「代码要求」，一起改了） */
+export const PROBLEM_TYPE_LABEL: Record<ProblemTypeFilter, string> = {
+  flowchart: "画流程图",
+  ast: "语法要求",
+  reference: "有参考图",
+}
+
+/** 「全部类型」下拉里每项下面那句话 */
+export const PROBLEM_TYPE_HINT: Record<ProblemTypeFilter, string> = {
+  reference: "题目里附了老师画好的流程图，照着写代码",
+  flowchart: "除了写代码，也可以交流程图；评到 A 或 S 级算做对",
+  ast: "要求用（或者不能用）某种写法，交了会检查",
+}
+
+/** 一道题挂哪几个标签，从醒目到轻：画流程图 → 语法要求 → 有参考图 */
+export function problemTypes(problem: {
+  allowFlowchart: boolean
+  hasAstRules: boolean
+  showFlowchart: boolean
+}): ProblemTypeFilter[] {
+  const kinds: ProblemTypeFilter[] = []
+  if (problem.allowFlowchart) kinds.push("flowchart")
+  if (problem.hasAstRules) kinds.push("ast")
+  if (problem.showFlowchart) kinds.push("reference")
+  return kinds
+}
diff --git a/apps/web/src/oj/transforms.ts b/apps/web/src/oj/transforms.ts
index b5507e1..fc94c04 100644
--- a/apps/web/src/oj/transforms.ts
+++ b/apps/web/src/oj/transforms.ts
@@ -23,5 +23,7 @@ export function toProblemRow(result: ProblemListItem): ProblemRow {
     allowFlowchart: result.allowFlowchart,
     showFlowchart: result.showFlowchart,
     hasAstRules: result.hasAstRules,
+    solvedUsers: result.solvedUsers,
+    triedUsers: result.triedUsers,
   }
 }
diff --git a/apps/web/src/utils/types.ts b/apps/web/src/utils/types.ts
index 673d812..f612404 100644
--- a/apps/web/src/utils/types.ts
+++ b/apps/web/src/utils/types.ts
@@ -167,6 +167,8 @@ export interface ProblemRow {
   allowFlowchart: boolean
   showFlowchart: boolean
   hasAstRules: boolean
+  solvedUsers: number
+  triedUsers: number
 }
 
 export interface AdminProblemRow {
diff --git a/packages/contract/src/problem.ts b/packages/contract/src/problem.ts
index 2bb678d..b07ad38 100644
--- a/packages/contract/src/problem.ts
+++ b/packages/contract/src/problem.ts
@@ -1,5 +1,6 @@
 import { z } from "zod"
 
+import { achievementRaritySchema } from "./achievement"
 import { paginatedSchema, sampleUserSchema } from "./common"
 import { judgeStatusSchema } from "./judge-status"
 import { problemLanguageSchema } from "./language"
@@ -423,11 +424,52 @@ export const problemListItemSchema = z.object({
   allowFlowchart: z.boolean(),
   showFlowchart: z.boolean(),
   hasAstRules: z.boolean(),
+  /** 0 = 做对了。画流程图的题，流程图评到 A / S 也给 0（和题单、课堂条一个口径） */
   myStatus: z.number().int().nullable(),
+  /**
+   * 做对的人 / 交过的人，和题目页「统计」页签同一个口径（代码提交、不算还在判的）。
+   * 代替原来的提交数和按提交算的通过率：1044 按提交算只有 69%，按人算 817 / 826
+   */
+  solvedUsers: z.number().int(),
+  triedUsers: z.number().int(),
 })
 
 export const problemListSchema = paginatedSchema(problemListItemSchema)
 
+/** 题目列表「全部类型」下拉：有参考图 / 画流程图 / 语法要求 */
+export const problemTypeFilterSchema = z.enum(["reference", "flowchart", "ast"])
+
+/** 题目列表的排序。空串是默认：选了知识点按题号，全部题目按最新创建 */
+export const problemListSortSchema = z.enum(["", "id", "new", "popular"])
+
+/**
+ * 题目列表顶上那行和左栏的进度。**只说做到了什么**：做对几道、这周新做对几道、
+ * 离哪个成就最近；没做对的只给一个数（「有 n 道差一点」），不列出来。
+ */
+export const problemProgressSchema = z.object({
+  /** 做对的题数，和成就的「AC 题目数」同一个数（不含比赛），这样「再做对 n 道」加得上 */
+  solved: z.number().int(),
+  /** 本周（东八区周一起）新做对几道 */
+  weekSolved: z.number().int(),
+  /** 连续几周都有新做对（到本周或上周为止；断了就是 0） */
+  weekStreak: z.number().int(),
+  /** 交过、还没做对的公开题。只在点「有 n 道差一点」时弹出来看，不常驻在页面上 */
+  almost: z.array(z.object({ _id: z.string(), title: z.string() })),
+  /** 标签 id → 这个标签下做对了几道（只数公开可见的题） */
+  byTag: z.record(z.string(), z.number().int()),
+  /** 离得最近的下一个成就；全拿到了、或者没有能提示的为 null */
+  next: z
+    .object({
+      name: z.string(),
+      icon: z.string(),
+      rarity: achievementRaritySchema,
+      metric: z.string(),
+      threshold: z.number().int(),
+      progress: z.number().int(),
+    })
+    .nullable(),
+})
+
 /**
  * 标签分两类：`knowledge` 是知识点（循环结构、字符串……），`theme` 是题目的
  * 题材（LOL、周杰伦、哈利波特……）。两类原来混在一起，题目列表上四十多个标签
@@ -504,6 +546,9 @@ export type AstRequirements = z.infer<typeof astRequirementsSchema>
 export type ProblemDifficulty = z.infer<typeof problemDifficultySchema>
 export type ProblemListItem = z.infer<typeof problemListItemSchema>
 export type ProblemList = z.infer<typeof problemListSchema>
+export type ProblemTypeFilter = z.infer<typeof problemTypeFilterSchema>
+export type ProblemListSort = z.infer<typeof problemListSortSchema>
+export type ProblemProgress = z.infer<typeof problemProgressSchema>
 export type Tag = z.infer<typeof tagSchema>
 export type TagCategory = z.infer<typeof tagCategorySchema>
 export type ProblemAuthor = z.infer<typeof problemAuthorSchema>