From e368ed3eca44665b45c4fa18d58df1693ecf73bc Mon Sep 17 00:00:00 2001
From: yuetsh <517252939@qq.com>
Date: Tue, 13 Oct 2026 00:03:37 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E4=B8=AA=E4=BA=BA=E4=B8=BB=E9=A1=B5):=20?=
 =?UTF-8?q?=E4=B8=BB=E9=A1=B5=E6=94=B9=E6=88=90=E5=90=8D=E7=89=87=20+=20?=
 =?UTF-8?q?=E4=B8=A4=E6=A0=8F=EF=BC=8C=E5=81=9A=E5=AF=B9=E7=9A=84=E9=A2=98?=
 =?UTF-8?q?=E6=8C=89=E5=A4=A9=E5=B8=A6=E9=A2=98=E5=90=8D=EF=BC=9B=E8=AE=BE?=
 =?UTF-8?q?=E7=BD=AE=E5=B9=B6=E8=BF=9B=E4=B8=BB=E9=A1=B5=EF=BC=8C=E7=82=B9?=
 =?UTF-8?q?=E5=A4=B4=E5=83=8F=E6=8D=A2=E5=A4=B4=E5=83=8F=E3=80=81=E7=82=B9?=
 =?UTF-8?q?=E7=AC=94=E6=94=B9=E7=AD=BE=E5=90=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 名片：头像、班级、签名、做对几道 / 本班第几 / 成就，底下一排四个时间（第一次提交、最近一次提交、距上次提交、学习天数）
- 做对的题按日期或按知识点，能搜；最上面一行是交过还没做对的
- 知识点本人和老师看得到；同学看多一张「你和他」
- 老师看学生：看他的智能分析 / 看他的提交 /「⋯」不计入排名、清空签名
- 换头像弹框：拖圆圈选一块，看领奖台和排名里多大，可退回名字的字
- 去掉「我的设置」页和下拉菜单里那一项；手机三个页签

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 apps/web/src/oj/api.ts                        |  12 +-
 .../oj/user/components/AchievementCard.vue    | 133 ++++
 .../oj/user/components/AvatarCropModal.vue    | 391 +++++++++++
 .../src/oj/user/components/KnowledgeMap.vue   | 199 ++++--
 .../src/oj/user/components/ProfileCard.vue    | 633 ++++++++++++++++++
 .../web/src/oj/user/components/SolvedCard.vue | 446 ++++++++++++
 .../web/src/oj/user/components/VersusCard.vue | 108 +++
 apps/web/src/oj/user/index.vue                | 420 ++++--------
 apps/web/src/routes.ts                        |   5 -
 apps/web/src/shared/components/Header.vue     |   6 -
 10 files changed, 1983 insertions(+), 370 deletions(-)
 create mode 100644 apps/web/src/oj/user/components/AchievementCard.vue
 create mode 100644 apps/web/src/oj/user/components/AvatarCropModal.vue
 create mode 100644 apps/web/src/oj/user/components/ProfileCard.vue
 create mode 100644 apps/web/src/oj/user/components/SolvedCard.vue
 create mode 100644 apps/web/src/oj/user/components/VersusCard.vue

diff --git a/apps/web/src/oj/api.ts b/apps/web/src/oj/api.ts
index b6ec85f..2efd412 100644
--- a/apps/web/src/oj/api.ts
+++ b/apps/web/src/oj/api.ts
@@ -9,7 +9,7 @@ import {
   type ContestClassView,
   type ContestScoreboard,
   type FormatCodeResponse,
-  type Metrics,
+  type ProfileOverview,
   type TutorialSummary,
   type Tutorial,
   type ClassActivity,
@@ -395,8 +395,14 @@ export function setReaction(problemID: number, type: ReactionKey) {
   return api.post<ReactionState>(`problems/${problemID}/reaction`, { type })
 }
 
-export function getMetrics(userid: number) {
-  return api.get<Metrics>(`users/${userid}/metrics`)
+/** 个人主页那一页的数据：做对的题、四个时间、本班第几、成就，本人和老师多拿知识点和没做对的题 */
+export function getProfileOverview(username: string) {
+  return api.get<ProfileOverview>(`profiles/${encodeURIComponent(username)}/overview`)
+}
+
+/** 不用图片了，退回默认头像（名字的字） */
+export function resetAvatar() {
+  return api.delete<{ avatar: string }>("me/avatar")
 }
 
 export function getTutorial(id: number) {
diff --git a/apps/web/src/oj/user/components/AchievementCard.vue b/apps/web/src/oj/user/components/AchievementCard.vue
new file mode 100644
index 0000000..daefb09
--- /dev/null
+++ b/apps/web/src/oj/user/components/AchievementCard.vue
@@ -0,0 +1,133 @@
+<script setup lang="ts">
+import type { ProfileOverview } from "@oj2/contract"
+import { useThemeVars } from "naive-ui"
+import AchievementIcon from "shared/components/AchievementIcon.vue"
+import { RARITY_COLOR } from "utils/constants"
+import { parseTime } from "utils/functions"
+
+/** 拿到的成就一个一个摆出来，新的在前；全部 41 个（含没拿到的）在成就页 */
+const props = defineProps<{
+  achievements: ProfileOverview["achievements"]
+  username: string
+  /** 看的是别人：「全部成就」带上他的名字 */
+  other: boolean
+  compact?: boolean
+}>()
+
+const theme = useThemeVars()
+const allLink = computed(() => ({
+  path: "/achievement",
+  query: props.other ? { name: props.username } : {},
+}))
+</script>
+
+<template>
+  <section class="card" :class="{ compact }">
+    <h3>
+      成就 <small>{{ achievements.unlocked.length }} / {{ achievements.total }}</small>
+      <span class="grow"></span>
+      <router-link :to="allLink" class="link">全部成就 ›</router-link>
+    </h3>
+    <div v-if="achievements.unlocked.length" class="grid">
+      <n-tooltip v-for="item in achievements.unlocked" :key="item.id" :delay="200">
+        <template #trigger>
+          <span class="medal">
+            <span class="ring" :style="{ '--rarity': RARITY_COLOR[item.rarity] }">
+              <AchievementIcon :icon="item.icon" :size="26" />
+            </span>
+            <span class="name">{{ item.name }}</span>
+          </span>
+        </template>
+        {{ item.description }} · {{ parseTime(item.unlockTime, "YYYY年M月D日") }}
+      </n-tooltip>
+    </div>
+    <div v-else class="empty">还没有成就</div>
+  </section>
+</template>
+
+<style scoped>
+.card {
+  padding: 14px 18px 16px;
+  border: 1px solid v-bind("theme.borderColor");
+  border-radius: var(--oj-radius);
+  background: v-bind("theme.cardColor");
+}
+
+h3 {
+  margin: 0;
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  font-size: var(--oj-fs-h2);
+}
+
+h3 small {
+  font-size: var(--oj-fs-sec);
+  font-weight: 400;
+  color: v-bind("theme.textColor3");
+}
+
+.grow {
+  flex: 1;
+}
+
+.link {
+  font-size: var(--oj-fs-meta);
+  font-weight: 400;
+  color: #18a058;
+  text-decoration: none;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+  row-gap: 14px;
+  margin-top: 12px;
+}
+
+.medal {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  cursor: default;
+}
+
+.ring {
+  width: 40px;
+  height: 40px;
+  box-sizing: border-box;
+  border-radius: 50%;
+  border: 2px solid var(--rarity);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.name {
+  max-width: 100%;
+  font-size: 12px;
+  line-height: 16px;
+  text-align: center;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.empty {
+  padding: 16px 0 4px;
+  font-size: var(--oj-fs-sec);
+  color: v-bind("theme.textColor3");
+}
+
+.compact {
+  padding: 4px 0 0;
+  border: 0;
+  border-radius: 0;
+  background: none;
+}
+
+.compact .grid {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+</style>
diff --git a/apps/web/src/oj/user/components/AvatarCropModal.vue b/apps/web/src/oj/user/components/AvatarCropModal.vue
new file mode 100644
index 0000000..091f98c
--- /dev/null
+++ b/apps/web/src/oj/user/components/AvatarCropModal.vue
@@ -0,0 +1,391 @@
+<script setup lang="ts">
+import { Icon } from "@iconify/vue"
+import { useThemeVars } from "naive-ui"
+import { resetAvatar, uploadAvatar } from "oj/api"
+import RankAvatar from "oj/rank/components/RankAvatar.vue"
+import { useUserStore } from "shared/store/user"
+
+/**
+ * 换头像（设置并进主页之后的入口）：选一张图，拖圆圈选一块，旁边就是它在领奖台、
+ * 排名里的大小；也能退回「名字的字」。
+ *
+ * 裁剪在浏览器里做完、只传一张 256×256 的 JPEG 上去 —— 原来直接传原图、靠
+ * object-fit 居中截，脸常常被截掉一半；手机拍的照片也动辄好几 MB，过不了 2 MB 的限制。
+ */
+const props = defineProps<{ username: string; avatar: string | null }>()
+const emit = defineEmits<{ changed: [] }>()
+const show = defineModel<boolean>("show", { required: true })
+
+const theme = useThemeVars()
+const message = useMessage()
+const userStore = useUserStore()
+
+const STAGE = 280
+const OUTPUT = 256
+
+const fileInput = useTemplateRef<HTMLInputElement>("fileInput")
+const src = ref("")
+let image: HTMLImageElement | null = null
+/** 图片在 280×280 舞台里的位置（等比缩放、居中） */
+const fit = reactive({ x: 0, y: 0, w: 0, h: 0, scale: 1 })
+/** 圆圈：圆心和半径，舞台坐标 */
+const circle = reactive({ cx: 0, cy: 0, r: 0 })
+const saving = ref(false)
+
+const maxR = computed(() => Math.min(fit.w, fit.h) / 2)
+const minR = computed(() => Math.min(24, maxR.value))
+
+function clamp() {
+  circle.r = Math.min(maxR.value, Math.max(minR.value, circle.r))
+  circle.cx = Math.min(fit.x + fit.w - circle.r, Math.max(fit.x + circle.r, circle.cx))
+  circle.cy = Math.min(fit.y + fit.h - circle.r, Math.max(fit.y + circle.r, circle.cy))
+}
+
+function pick() {
+  fileInput.value?.click()
+}
+
+function clear() {
+  if (src.value) URL.revokeObjectURL(src.value)
+  src.value = ""
+  image = null
+}
+
+watch(show, (open) => {
+  if (!open) clear()
+})
+onBeforeUnmount(clear)
+
+function onFile(event: Event) {
+  const input = event.target as HTMLInputElement
+  const file = input.files?.[0]
+  input.value = ""
+  if (!file) return
+  if (!file.type.startsWith("image/")) {
+    message.warning("要选一张图片")
+    return
+  }
+  const url = URL.createObjectURL(file)
+  const img = new Image()
+  img.onload = () => {
+    clear()
+    image = img
+    src.value = url
+    const scale = Math.min(STAGE / img.naturalWidth, STAGE / img.naturalHeight)
+    fit.scale = scale
+    fit.w = img.naturalWidth * scale
+    fit.h = img.naturalHeight * scale
+    fit.x = (STAGE - fit.w) / 2
+    fit.y = (STAGE - fit.h) / 2
+    circle.cx = STAGE / 2
+    circle.cy = STAGE / 2
+    circle.r = maxR.value * 0.9
+    clamp()
+  }
+  img.onerror = () => {
+    URL.revokeObjectURL(url)
+    message.warning("这张图打不开，换一张试试")
+  }
+  img.src = url
+}
+
+let drag: { x: number; y: number; cx: number; cy: number } | null = null
+
+function onDown(event: PointerEvent) {
+  ;(event.currentTarget as HTMLElement).setPointerCapture(event.pointerId)
+  drag = { x: event.clientX, y: event.clientY, cx: circle.cx, cy: circle.cy }
+}
+
+function onMove(event: PointerEvent) {
+  if (!drag) return
+  circle.cx = drag.cx + event.clientX - drag.x
+  circle.cy = drag.cy + event.clientY - drag.y
+  clamp()
+}
+
+function onUp() {
+  drag = null
+}
+
+function onWheel(event: WheelEvent) {
+  circle.r -= event.deltaY * 0.1
+  clamp()
+}
+
+/** 「大小」滑块：0–100 对应最小到最大的半径 */
+const size = computed({
+  get: () =>
+    maxR.value > minR.value
+      ? Math.round(((circle.r - minR.value) / (maxR.value - minR.value)) * 100)
+      : 100,
+  set: (value: number) => {
+    circle.r = minR.value + ((maxR.value - minR.value) * value) / 100
+    clamp()
+  },
+})
+
+/** 预览：同一块按目标大小缩放，用背景图画，不用再开一个 canvas */
+function previewStyle(px: number) {
+  const k = px / (circle.r * 2)
+  return {
+    width: `${px}px`,
+    height: `${px}px`,
+    backgroundImage: `url(${src.value})`,
+    backgroundSize: `${fit.w * k}px ${fit.h * k}px`,
+    backgroundPosition: `${-(circle.cx - circle.r - fit.x) * k}px ${-(circle.cy - circle.r - fit.y) * k}px`,
+  }
+}
+
+async function save() {
+  if (!image) return
+  const canvas = document.createElement("canvas")
+  canvas.width = OUTPUT
+  canvas.height = OUTPUT
+  const ctx = canvas.getContext("2d")!
+  // 透明底的 PNG 存成 JPEG 会变黑，先铺白
+  ctx.fillStyle = "#ffffff"
+  ctx.fillRect(0, 0, OUTPUT, OUTPUT)
+  const side = (circle.r * 2) / fit.scale
+  ctx.drawImage(
+    image,
+    (circle.cx - circle.r - fit.x) / fit.scale,
+    (circle.cy - circle.r - fit.y) / fit.scale,
+    side,
+    side,
+    0,
+    0,
+    OUTPUT,
+    OUTPUT,
+  )
+  const blob = await new Promise<Blob | null>((resolve) =>
+    canvas.toBlob(resolve, "image/jpeg", 0.9),
+  )
+  if (!blob) {
+    message.error("没处理好这张图，换一张试试")
+    return
+  }
+  saving.value = true
+  try {
+    await uploadAvatar(new File([blob], "avatar.jpg", { type: "image/jpeg" }))
+    message.success("头像换好了")
+    userStore.getMyProfile()
+    emit("changed")
+    show.value = false
+  } catch {
+    message.error("没传上去，再试一次")
+  } finally {
+    saving.value = false
+  }
+}
+
+async function useLetter() {
+  saving.value = true
+  try {
+    await resetAvatar()
+    message.success("改成名字的字了")
+    userStore.getMyProfile()
+    emit("changed")
+    show.value = false
+  } catch {
+    message.error("没改成，再试一次")
+  } finally {
+    saving.value = false
+  }
+}
+</script>
+
+<template>
+  <n-modal
+    v-model:show="show"
+    preset="card"
+    title="换头像"
+    :style="{ width: '520px', maxWidth: 'calc(100vw - 32px)' }"
+    :bordered="false"
+  >
+    <input ref="fileInput" type="file" accept="image/*" hidden @change="onFile" />
+    <div class="body">
+      <div
+        v-if="src"
+        class="stage"
+        :style="{ width: `${STAGE}px`, height: `${STAGE}px` }"
+        @wheel.prevent="onWheel"
+      >
+        <img
+          :src="src"
+          alt=""
+          draggable="false"
+          :style="{
+            left: `${fit.x}px`,
+            top: `${fit.y}px`,
+            width: `${fit.w}px`,
+            height: `${fit.h}px`,
+          }"
+        />
+        <span
+          class="circle"
+          role="slider"
+          aria-label="拖动选一块"
+          :aria-valuenow="size"
+          :style="{
+            left: `${circle.cx - circle.r}px`,
+            top: `${circle.cy - circle.r}px`,
+            width: `${circle.r * 2}px`,
+            height: `${circle.r * 2}px`,
+          }"
+          @pointerdown="onDown"
+          @pointermove="onMove"
+          @pointerup="onUp"
+          @pointercancel="onUp"
+        ></span>
+      </div>
+      <button v-else type="button" class="stage empty" @click="pick">
+        <RankAvatar :username="username" :avatar="avatar" :size="160" me />
+        <span class="pick"><Icon icon="ph:image" :width="18" />选一张图片</span>
+      </button>
+
+      <div class="side">
+        <template v-if="src">
+          <span class="muted">拖动圆圈选一块</span>
+          <span class="preview"><span class="dot" :style="previewStyle(56)"></span>领奖台</span>
+          <span class="preview"><span class="dot" :style="previewStyle(28)"></span>排名、顶栏</span>
+          <label class="size">
+            <span class="muted">大小</span>
+            <n-slider v-model:value="size" :step="1" :tooltip="false" />
+          </label>
+          <n-button size="small" class="fit" @click="pick">
+            <template #icon><Icon icon="ph:image" /></template>换一张
+          </n-button>
+        </template>
+        <template v-else>
+          <span class="preview">
+            <RankAvatar :username="username" :avatar="avatar" :size="56" me />领奖台
+          </span>
+          <span class="preview">
+            <RankAvatar :username="username" :avatar="avatar" :size="28" me />排名、顶栏
+          </span>
+        </template>
+        <a
+          v-if="avatar || src"
+          href="#"
+          class="link"
+          :class="{ disabled: saving }"
+          @click.prevent="!saving && useLetter()"
+        >
+          不用图片，用名字的字
+        </a>
+      </div>
+    </div>
+    <template #footer>
+      <div class="footer">
+        <n-button @click="show = false">取消</n-button>
+        <n-button type="primary" :disabled="!src" :loading="saving" @click="save">
+          用这张
+        </n-button>
+      </div>
+    </template>
+  </n-modal>
+</template>
+
+<style scoped>
+.body {
+  display: flex;
+  gap: 22px;
+  flex-wrap: wrap;
+}
+
+.stage {
+  position: relative;
+  flex-shrink: 0;
+  overflow: hidden;
+  border-radius: 6px;
+  background: v-bind("theme.actionColor");
+  touch-action: none;
+  user-select: none;
+}
+
+.stage img {
+  position: absolute;
+  pointer-events: none;
+}
+
+.circle {
+  position: absolute;
+  box-sizing: border-box;
+  border: 2px solid #ffffff;
+  border-radius: 50%;
+  box-shadow: 0 0 0 600px rgba(0, 0, 0, 0.5);
+  cursor: move;
+}
+
+.stage.empty {
+  width: 280px;
+  height: 280px;
+  border: 1px dashed v-bind("theme.borderColor");
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+  cursor: pointer;
+  font: inherit;
+}
+
+.pick {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  color: #18a058;
+  font-size: var(--oj-fs-sec);
+}
+
+.side {
+  flex: 1;
+  min-width: 160px;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  font-size: var(--oj-fs-meta);
+}
+
+.muted {
+  color: v-bind("theme.textColor3");
+}
+
+.preview {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  color: v-bind("theme.textColor3");
+}
+
+.dot {
+  flex-shrink: 0;
+  border-radius: 50%;
+  background-repeat: no-repeat;
+}
+
+.size {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.fit {
+  align-self: flex-start;
+}
+
+.link {
+  color: #18a058;
+  text-decoration: none;
+}
+
+.link.disabled {
+  opacity: 0.5;
+}
+
+.footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+}
+</style>
diff --git a/apps/web/src/oj/user/components/KnowledgeMap.vue b/apps/web/src/oj/user/components/KnowledgeMap.vue
index 28717a6..0061def 100644
--- a/apps/web/src/oj/user/components/KnowledgeMap.vue
+++ b/apps/web/src/oj/user/components/KnowledgeMap.vue
@@ -1,30 +1,33 @@
 <script setup lang="ts">
-import { getKnowledgeMap } from "oj/api"
+import { useThemeVars } from "naive-ui"
 import { levelName, MAX_LEVEL, remainingToNext, tagLink } from "oj/user/knowledge"
 import type { KnowledgeLevel, KnowledgeMap } from "utils/types"
 
 /**
- * 个人主页上的知识点地图：「我学会了什么」，只和自己比。
+ * 个人主页上的知识点地图：「学会了什么」，只和自己比。
  *
- * 只在看**自己的**主页时挂（index.vue 判断），不开放给别人看 —— 开放了它就成了
- * 另一张排行榜，基础弱的学生最不想被看到的就是这个。
+ * 本人和老师看得到，同学看不到（后端 /profiles/:username/overview 裁）—— 开放给同学
+ * 它就成了另一张排行榜，基础弱的学生最不想被看到的就是这个。
  */
-const map = ref<KnowledgeMap | null>(null)
+const props = defineProps<{
+  map: KnowledgeMap
+  /** 老师在看：标题不带「我的」，称呼用「他」 */
+  teacher?: boolean
+  compact?: boolean
+}>()
 
-onMounted(async () => {
-  map.value = await getKnowledgeMap().catch(() => null)
-})
+const theme = useThemeVars()
 
 const learned = computed(() =>
-  (map.value?.tags ?? [])
+  props.map.tags
     .filter((tag) => tag.level >= 1)
     .sort((a, b) => b.level - a.level || b.solved - a.solved),
 )
 
-/** 班里同学在学、自己还没碰过的。别的（比如 Python 班的「C 语言」）不列 */
+/** 班里同学在学、他还没碰过的。别的（比如 Python 班的「C 语言」）不列 */
 const untouched = computed(() => {
-  const touched = new Set(map.value?.classTouched ?? [])
-  return (map.value?.tags ?? []).filter((tag) => tag.level === 0 && touched.has(tag.name))
+  const touched = new Set(props.map.classTouched)
+  return props.map.tags.filter((tag) => tag.level === 0 && touched.has(tag.name))
 })
 
 function progress(tag: KnowledgeLevel) {
@@ -34,65 +37,71 @@ function progress(tag: KnowledgeLevel) {
 
 function hint(tag: KnowledgeLevel) {
   const left = remainingToNext(tag)
-  if (left === null) return `做对了 ${tag.solved} 道，已经精通了`
+  if (left === null) return `做对 ${tag.solved} 道 · 已经精通`
   return `做对 ${tag.solved} 道 · 再做 ${left} 道到「${levelName(tag.level + 1)}」`
 }
 </script>
 
 <template>
-  <n-card v-if="map && (learned.length || untouched.length)" class="knowledge" title="我的知识点">
-    <template #header-extra>
-      <n-text depth="3" class="meta">入门 → 会了 → 熟练 → 精通</n-text>
-    </template>
-    <n-flex vertical :size="14">
-      <router-link v-for="tag in learned" :key="tag.name" :to="tagLink(tag.name)" class="row">
-        <div class="head">
-          <span class="name">{{ tag.name }}</span>
-          <span class="dots" :title="levelName(tag.level)">
-            <span v-for="i in MAX_LEVEL" :key="i" class="dot" :class="{ on: i <= tag.level }" />
-          </span>
-          <span class="level">{{ levelName(tag.level) }}</span>
-          <n-tag
-            v-if="tag.level > tag.levelAtWeekStart"
-            size="small"
-            type="success"
-            :bordered="false"
-          >
-            本周升级
-          </n-tag>
-        </div>
-        <n-progress
-          type="line"
-          :percentage="progress(tag)"
-          :show-indicator="false"
-          :height="6"
-          status="success"
-        />
-        <n-text depth="3" class="meta">{{ hint(tag) }}</n-text>
-      </router-link>
+  <section class="card" :class="{ compact }">
+    <h3 v-if="!compact">
+      {{ teacher ? "知识点" : "我的知识点" }}
+      <small v-if="!teacher">只有你和老师看得到</small>
+    </h3>
+    <router-link v-for="tag in learned" :key="tag.name" :to="tagLink(tag.name)" class="row">
+      <span class="head">
+        <span class="name">{{ tag.name }}</span>
+        <span class="dots" :title="levelName(tag.level)">
+          <i v-for="i in MAX_LEVEL" :key="i" :class="{ on: i <= tag.level }"></i>
+        </span>
+        <span class="level">{{ levelName(tag.level) }}</span>
+        <span v-if="tag.level > tag.levelAtWeekStart" class="up">这周升了</span>
+      </span>
+      <span class="track"><b :style="{ width: `${progress(tag)}%` }"></b></span>
+      <span class="meta">{{ hint(tag) }}</span>
+    </router-link>
+    <div v-if="!learned.length && !untouched.length" class="meta empty">还没做对带知识点的题</div>
 
-      <div v-if="untouched.length">
-        <n-text depth="3" class="meta">班里同学在学、你还没碰过：</n-text>
-        <n-flex :size="8" style="margin-top: 6px">
-          <router-link v-for="tag in untouched" :key="tag.name" :to="tagLink(tag.name)">
-            <n-tag size="small">{{ tag.name }}</n-tag>
-          </router-link>
-        </n-flex>
+    <div v-if="untouched.length" class="untouched">
+      <span class="meta">班里在学、{{ teacher ? "他" : "你" }}还没碰过</span>
+      <div class="tags">
+        <router-link v-for="tag in untouched" :key="tag.name" :to="tagLink(tag.name)" class="tag">
+          {{ tag.name }}
+        </router-link>
       </div>
-    </n-flex>
-  </n-card>
+    </div>
+  </section>
 </template>
 
 <style scoped>
-.knowledge {
-  max-width: 760px;
-  margin: var(--oj-gap) auto 0;
+.card {
+  padding: 14px 18px 12px;
+  display: flex;
+  flex-direction: column;
+  border: 1px solid v-bind("theme.borderColor");
+  border-radius: var(--oj-radius);
+  background: v-bind("theme.cardColor");
+}
+
+h3 {
+  margin: 0 0 4px;
+  font-size: var(--oj-fs-h2);
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+}
+
+h3 small {
+  font-size: var(--oj-fs-meta);
+  font-weight: 400;
+  color: v-bind("theme.textColor3");
 }
 
 .row {
   display: flex;
   flex-direction: column;
   gap: 4px;
+  padding: 7px 0;
   color: inherit;
   text-decoration: none;
 }
@@ -104,8 +113,12 @@ function hint(tag: KnowledgeLevel) {
 }
 
 .name {
+  width: 72px;
+  font-size: var(--oj-fs-sec);
   font-weight: 500;
-  min-width: 5em;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .dots {
@@ -113,23 +126,87 @@ function hint(tag: KnowledgeLevel) {
   gap: 3px;
 }
 
-.dot {
+.dots i {
+  display: block;
   width: 8px;
   height: 8px;
   border-radius: 50%;
-  background-color: rgba(128, 128, 128, 0.25);
+  background: v-bind("theme.dividerColor");
 }
 
-.dot.on {
-  background-color: #18a058;
+.dots i.on {
+  background: #18a058;
 }
 
 .level {
-  font-size: var(--oj-fs-sec);
+  font-size: var(--oj-fs-meta);
   color: #18a058;
 }
 
+.up {
+  padding: 1px 6px;
+  border-radius: 4px;
+  background: rgba(24, 160, 88, 0.12);
+  color: #18a058;
+  font-size: 12px;
+}
+
+.track {
+  display: block;
+  height: 6px;
+  border-radius: 3px;
+  background: v-bind("theme.dividerColor");
+  overflow: hidden;
+}
+
+.track b {
+  display: block;
+  height: 6px;
+  border-radius: 3px;
+  background: #18a058;
+}
+
 .meta {
+  font-size: 12px;
+  color: v-bind("theme.textColor3");
+}
+
+.empty {
+  padding: 12px 0;
+  font-size: var(--oj-fs-sec);
+}
+
+.untouched {
+  margin-top: 6px;
+  padding-top: 10px;
+  border-top: 1px solid v-bind("theme.dividerColor");
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.tag {
+  display: inline-flex;
+  align-items: center;
+  height: 26px;
+  padding: 0 10px;
+  border: 1px dashed v-bind("theme.borderColor");
+  border-radius: 13px;
   font-size: var(--oj-fs-meta);
+  color: v-bind("theme.textColor2");
+  text-decoration: none;
+}
+
+.compact {
+  padding: 4px 0 0;
+  border: 0;
+  border-radius: 0;
+  background: none;
 }
 </style>
diff --git a/apps/web/src/oj/user/components/ProfileCard.vue b/apps/web/src/oj/user/components/ProfileCard.vue
new file mode 100644
index 0000000..59be83f
--- /dev/null
+++ b/apps/web/src/oj/user/components/ProfileCard.vue
@@ -0,0 +1,633 @@
+<script setup lang="ts">
+import { MOOD_MAX, STUDENT_ROLES, type ProfileOverview } from "@oj2/contract"
+import { Icon } from "@iconify/vue"
+import { useThemeVars } from "naive-ui"
+import { clearMood, setRankHidden, updateProfile } from "oj/api"
+import RankAvatar from "oj/rank/components/RankAvatar.vue"
+import { classLabel } from "oj/submission/utils"
+import UserName from "shared/components/UserName.vue"
+import { useUserStore } from "shared/store/user"
+import { durationToDays, parseTime } from "utils/functions"
+import type { Profile } from "utils/types"
+import AvatarCropModal from "./AvatarCropModal.vue"
+
+/**
+ * 个人主页顶上那张名片（设计稿「我的主页与设置」定稿）：头像、名字、班级、签名、三个数，
+ * 底下一排四个时间。设置并进了这里 —— 自己的主页上点头像换头像、点笔改签名，
+ * 没有单独的设置页了。
+ */
+const props = defineProps<{
+  profile: Profile
+  overview: ProfileOverview
+  isSelf: boolean
+  /** 老师在看学生：三个数的最后一格换成「交过还没做对」，按钮换成看他的… */
+  teacherView: boolean
+  compact?: boolean
+}>()
+const emit = defineEmits<{ changed: [] }>()
+
+const theme = useThemeVars()
+const message = useMessage()
+const dialog = useDialog()
+const userStore = useUserStore()
+
+const username = computed(() => props.profile.user.username)
+const avatar = computed(() =>
+  props.profile.avatar.endsWith("/default.png") ? null : props.profile.avatar,
+)
+const isStudent = computed(() =>
+  (STUDENT_ROLES as readonly string[]).includes(props.profile.user.adminType),
+)
+
+interface Stat {
+  big: string | number
+  unit: string
+  sub: string
+  warn?: boolean
+  link?: { text: string; to: string }
+}
+
+const stats = computed(() => {
+  const o = props.overview
+  const list: Stat[] = [{ big: o.solved.length, unit: "道", sub: "做对" }]
+  if (o.classRank)
+    list.push({
+      big: `第 ${o.classRank.rank}`,
+      unit: "名",
+      sub: props.compact ? `本班 ${o.classRank.total} 人` : `本班 · 这学期 ${o.classRank.total} 人`,
+      link: props.isSelf ? { text: "看排名 ›", to: "/rank" } : undefined,
+    })
+  else if (o.rankHidden) list.push({ big: "不计入", unit: "排名", sub: "本班 · 这学期" })
+  if (props.teacherView)
+    list.push({ big: o.unsolved?.length ?? 0, unit: "道", sub: "交过还没做对", warn: true })
+  else
+    list.push({
+      big: o.achievements.unlocked.length,
+      unit: "个",
+      sub: `成就 · 一共 ${o.achievements.total} 个`,
+    })
+  return list
+})
+
+const times = computed(() => {
+  const o = props.overview
+  if (!o.firstSubmissionAt || !o.latestSubmissionAt) return []
+  return [
+    { label: "第一次提交", value: parseTime(o.firstSubmissionAt) },
+    { label: "最近一次提交", value: parseTime(o.latestSubmissionAt) },
+    {
+      label: "距上次提交",
+      // durationToDays 给的是「13天」「1月2天」，和旁边「13 天」对齐，数字和单位之间空一格
+      value: durationToDays(o.latestSubmissionAt, o.now).replace(/(\d)(?=[年月天])/g, "$1 "),
+    },
+    { label: "学习天数", value: `${o.activeDays} 天` },
+  ]
+})
+
+// ---------- 改签名（就地） ----------
+const editing = ref(false)
+const draft = ref("")
+const saving = ref(false)
+
+function startEdit() {
+  draft.value = props.profile.mood ?? ""
+  editing.value = true
+}
+
+async function saveMood() {
+  const mood = draft.value.trim()
+  if (mood.length > MOOD_MAX) {
+    message.warning(`个性签名最多 ${MOOD_MAX} 个字`)
+    return
+  }
+  saving.value = true
+  try {
+    await updateProfile({ mood })
+    if (userStore.profile) userStore.profile.mood = mood || null
+    editing.value = false
+    message.success(mood ? "签名改好了" : "签名清空了")
+    emit("changed")
+  } catch {
+    message.error("没保存上，再试一次")
+  } finally {
+    saving.value = false
+  }
+}
+
+// ---------- 换头像 ----------
+const cropping = ref(false)
+
+// ---------- 老师的「⋯」 ----------
+const menu = computed(() => {
+  const items = []
+  if (isStudent.value) {
+    items.push({
+      key: "hidden",
+      label: props.overview.rankHidden ? "恢复计入排名" : "不计入排名",
+    })
+    items.push({ key: "mood", label: "清空个性签名", disabled: !props.profile.mood })
+  }
+  if (userStore.isSuperAdmin) items.push({ key: "admin", label: "在后台找这个人" })
+  return items
+})
+
+const router = useRouter()
+
+function onMenu(key: string) {
+  const id = props.profile.user.id
+  if (key === "admin") {
+    router.push({ name: "admin user list", query: { keyword: username.value } })
+  } else if (key === "hidden") {
+    const hide = !props.overview.rankHidden
+    setRankHidden(id, hide)
+      .then(() => {
+        message.success(hide ? "已设成不计入排名" : "已恢复计入排名")
+        emit("changed")
+      })
+      .catch(() => message.error("没改成，再试一次"))
+  } else if (key === "mood") {
+    dialog.warning({
+      title: "清空个性签名",
+      content: `「${props.profile.mood}」会被清掉，他之后还能重新写。`,
+      positiveText: "清空",
+      negativeText: "取消",
+      onPositiveClick: () =>
+        clearMood(id)
+          .then(() => {
+            message.success("签名清空了")
+            emit("changed")
+          })
+          .catch(() => message.error("没清掉，再试一次")),
+    })
+  }
+}
+</script>
+
+<template>
+  <section class="card" :class="{ compact }">
+    <div class="top">
+      <div class="who">
+        <button
+          v-if="isSelf"
+          type="button"
+          class="avatar-btn"
+          aria-label="换头像"
+          @click="cropping = true"
+        >
+          <RankAvatar :username="username" :avatar="avatar" :size="compact ? 64 : 96" me />
+          <span class="avatar-hover"><Icon icon="ph:camera" :width="20" />换头像</span>
+          <span class="avatar-badge"><Icon icon="ph:camera" :width="compact ? 14 : 16" /></span>
+        </button>
+        <RankAvatar v-else :username="username" :avatar="avatar" :size="compact ? 64 : 96" />
+
+        <div class="info">
+          <div class="name-line">
+            <UserName :username="username" class="name" />
+            <span v-if="profile.user.className" class="muted">
+              {{ classLabel(profile.user.className) }}
+            </span>
+          </div>
+
+          <form v-if="editing" class="mood-edit" @submit.prevent="saveMood">
+            <n-input
+              v-model:value="draft"
+              :maxlength="MOOD_MAX"
+              show-count
+              clearable
+              autofocus
+              placeholder="写点什么，让大家认识你"
+              aria-label="个性签名"
+            />
+            <n-button type="primary" attr-type="submit" :loading="saving">保存</n-button>
+            <n-button @click="editing = false">取消</n-button>
+          </form>
+          <template v-else-if="isSelf">
+            <span v-if="profile.mood" class="mood">
+              {{ profile.mood }}
+              <button type="button" class="icon-btn" aria-label="改个性签名" @click="startEdit">
+                <Icon icon="ph:pencil-simple" :width="16" />
+              </button>
+            </span>
+            <button v-else type="button" class="write-mood" @click="startEdit">
+              <Icon icon="ph:pencil-simple" :width="14" />写一句个性签名
+            </button>
+          </template>
+          <span v-else-if="profile.mood" class="mood">{{ profile.mood }}</span>
+          <span v-else-if="teacherView" class="mood faint">没写个性签名</span>
+
+          <div v-if="!compact && (isSelf || teacherView)" class="actions">
+            <template v-if="isSelf">
+              <n-button size="small" @click="router.push('/ai-analysis')">
+                <template #icon><Icon icon="ph:sparkle" /></template>智能分析
+              </n-button>
+              <n-button size="small" @click="router.push('/submission?myself=1')">
+                <template #icon><Icon icon="ph:list-checks" /></template>我的提交
+              </n-button>
+            </template>
+            <template v-else>
+              <n-button
+                size="small"
+                type="primary"
+                @click="router.push({ name: 'ai', query: { username } })"
+              >
+                <template #icon><Icon icon="ph:sparkle" /></template>看他的智能分析
+              </n-button>
+              <n-button
+                size="small"
+                @click="
+                  router.push({ path: '/submission', query: { username, exactUsername: '1' } })
+                "
+              >
+                <template #icon><Icon icon="ph:list-checks" /></template>看他的提交
+              </n-button>
+              <n-dropdown v-if="menu.length" :options="menu" trigger="click" @select="onMenu">
+                <n-button size="small" aria-label="更多">
+                  <template #icon><Icon icon="ph:dots-three-bold" /></template>
+                </n-button>
+              </n-dropdown>
+            </template>
+          </div>
+        </div>
+      </div>
+
+      <div class="stats">
+        <div v-for="item in stats" :key="item.sub" class="stat">
+          <div class="num">
+            <b :class="{ warn: item.warn }">{{ item.big }}</b>
+            <span>{{ item.unit }}</span>
+          </div>
+          <div class="sub">{{ item.sub }}</div>
+          <router-link v-if="item.link && !compact" :to="item.link.to" class="link">
+            {{ item.link.text }}
+          </router-link>
+        </div>
+      </div>
+    </div>
+
+    <div v-if="times.length" class="times">
+      <div v-for="item in times" :key="item.label" class="time">
+        <span class="muted">{{ item.label }}</span>
+        <b>{{ item.value }}</b>
+      </div>
+    </div>
+    <div v-else class="times empty muted">还没交过题</div>
+
+    <div v-if="compact && (isSelf || teacherView)" class="actions wide">
+      <template v-if="isSelf">
+        <n-button @click="router.push('/ai-analysis')">
+          <template #icon><Icon icon="ph:sparkle" /></template>智能分析
+        </n-button>
+        <n-button @click="router.push('/submission?myself=1')">
+          <template #icon><Icon icon="ph:list-checks" /></template>我的提交
+        </n-button>
+      </template>
+      <template v-else>
+        <n-button type="primary" @click="router.push({ name: 'ai', query: { username } })">
+          看他的智能分析
+        </n-button>
+        <n-button
+          @click="router.push({ path: '/submission', query: { username, exactUsername: '1' } })"
+        >
+          看他的提交
+        </n-button>
+      </template>
+    </div>
+
+    <AvatarCropModal
+      v-if="isSelf"
+      v-model:show="cropping"
+      :username="username"
+      :avatar="avatar"
+      @changed="emit('changed')"
+    />
+  </section>
+</template>
+
+<style scoped>
+.card {
+  padding: 22px 24px 18px;
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+  border: 1px solid v-bind("theme.borderColor");
+  border-radius: var(--oj-radius);
+  background: v-bind("theme.cardColor");
+}
+
+.top {
+  display: flex;
+  align-items: center;
+  gap: 22px;
+}
+
+.who {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 22px;
+}
+
+.avatar-btn {
+  position: relative;
+  flex-shrink: 0;
+  padding: 0;
+  border: 0;
+  background: none;
+  border-radius: 50%;
+  cursor: pointer;
+}
+
+.avatar-hover {
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  background: rgba(0, 0, 0, 0.45);
+  color: #ffffff;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 2px;
+  font-size: var(--oj-fs-meta);
+  opacity: 0;
+  transition: opacity 0.15s;
+}
+
+.avatar-btn:hover .avatar-hover,
+.avatar-btn:focus-visible .avatar-hover {
+  opacity: 1;
+}
+
+.avatar-badge {
+  position: absolute;
+  right: -2px;
+  bottom: -2px;
+  width: 32px;
+  height: 32px;
+  box-sizing: border-box;
+  border-radius: 50%;
+  border: 1px solid v-bind("theme.borderColor");
+  background: v-bind("theme.cardColor");
+  color: v-bind("theme.textColor2");
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.info {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 6px;
+}
+
+.name-line {
+  display: flex;
+  align-items: baseline;
+  gap: 12px;
+  max-width: 100%;
+}
+
+.name {
+  font-size: var(--oj-fs-title);
+}
+
+.name :deep(.name) {
+  font-weight: 700;
+}
+
+.muted {
+  font-size: var(--oj-fs-sec);
+  color: v-bind("theme.textColor3");
+  white-space: nowrap;
+}
+
+.mood {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  max-width: 100%;
+  font-size: var(--oj-fs-body);
+  color: v-bind("theme.textColor2");
+  word-break: break-all;
+}
+
+.mood.faint {
+  color: v-bind("theme.textColor3");
+}
+
+.icon-btn {
+  flex-shrink: 0;
+  display: inline-flex;
+  padding: 4px;
+  border: 0;
+  border-radius: 4px;
+  background: none;
+  color: v-bind("theme.textColor3");
+  cursor: pointer;
+}
+
+.icon-btn:hover {
+  color: #18a058;
+  background: rgba(24, 160, 88, 0.1);
+}
+
+.write-mood {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 30px;
+  padding: 0 12px;
+  border: 1px dashed rgba(24, 160, 88, 0.5);
+  border-radius: 15px;
+  background: none;
+  color: #18a058;
+  font: inherit;
+  font-size: var(--oj-fs-sec);
+  cursor: pointer;
+}
+
+.mood-edit {
+  display: flex;
+  gap: 8px;
+  width: 440px;
+  max-width: 100%;
+}
+
+.actions {
+  display: flex;
+  gap: 8px;
+  margin-top: 6px;
+}
+
+.stats {
+  display: flex;
+  align-items: flex-start;
+}
+
+.stat {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 0 24px;
+  border-left: 1px solid v-bind("theme.dividerColor");
+  white-space: nowrap;
+}
+
+.stat:first-child {
+  border-left: 0;
+}
+
+.num {
+  display: flex;
+  align-items: baseline;
+  gap: 4px;
+}
+
+.num b {
+  font-size: 30px;
+  line-height: 38px;
+  font-variant-numeric: tabular-nums;
+}
+
+.num b.warn {
+  color: #c27c0e;
+}
+
+.num span {
+  font-size: var(--oj-fs-body);
+}
+
+.sub {
+  font-size: var(--oj-fs-meta);
+  color: v-bind("theme.textColor3");
+}
+
+.link {
+  font-size: var(--oj-fs-meta);
+  color: #18a058;
+  text-decoration: none;
+}
+
+.times {
+  display: flex;
+  flex-wrap: wrap;
+  row-gap: 12px;
+  padding: 14px 0 0 118px;
+  border-top: 1px solid v-bind("theme.dividerColor");
+}
+
+.times.empty {
+  font-size: var(--oj-fs-sec);
+}
+
+.time {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 0 20px;
+  border-left: 1px solid v-bind("theme.dividerColor");
+}
+
+.time:first-child {
+  padding-left: 0;
+  border-left: 0;
+}
+
+.time .muted {
+  font-size: var(--oj-fs-meta);
+}
+
+.time b {
+  font-size: var(--oj-fs-body);
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+/* 手机：名片竖着排，三个数一排一个框，四个时间两两一排 */
+.compact {
+  padding: 18px 16px 16px;
+  gap: 12px;
+}
+
+.compact .top {
+  flex-direction: column;
+  align-items: stretch;
+  gap: 12px;
+}
+
+.compact .who {
+  gap: 14px;
+  align-items: flex-start;
+}
+
+.compact .name-line {
+  flex-direction: column;
+  gap: 2px;
+}
+
+.compact .name {
+  font-size: 20px;
+}
+
+.compact .mood-edit {
+  flex-wrap: wrap;
+}
+
+.compact .avatar-badge {
+  width: 26px;
+  height: 26px;
+  right: -4px;
+  bottom: -4px;
+}
+
+.compact .stats {
+  border: 1px solid v-bind("theme.borderColor");
+  border-radius: var(--oj-radius);
+  padding: 10px 0 8px;
+}
+
+.compact .stat {
+  flex: 1;
+  align-items: center;
+  padding: 0 4px;
+}
+
+.compact .num b {
+  font-size: 22px;
+  line-height: 28px;
+}
+
+.compact .num span {
+  font-size: var(--oj-fs-meta);
+}
+
+.compact .sub {
+  font-size: 12px;
+  white-space: normal;
+  text-align: center;
+}
+
+.compact .times {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 10px 16px;
+  padding: 2px 4px 0;
+  border-top: 0;
+}
+
+.compact .time {
+  padding: 0;
+  border-left: 0;
+}
+
+.actions.wide {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  margin-top: 0;
+}
+</style>
diff --git a/apps/web/src/oj/user/components/SolvedCard.vue b/apps/web/src/oj/user/components/SolvedCard.vue
new file mode 100644
index 0000000..0bb2aba
--- /dev/null
+++ b/apps/web/src/oj/user/components/SolvedCard.vue
@@ -0,0 +1,446 @@
+<script setup lang="ts">
+import type { ProfileSolved, ProfileUnsolved } from "@oj2/contract"
+import { Icon } from "@iconify/vue"
+import { useThemeVars } from "naive-ui"
+import { dayLabel } from "oj/ai/utils"
+import { parseTime } from "utils/functions"
+
+/**
+ * 做对的题：按天一行（或按知识点一行），一道题一块，带题名 —— 原来是一墙题号按钮，
+ * 学生认不得题号。最上面一行是交过还没做对的（本人叫「差一点」，老师看叫「还没做对」）。
+ */
+const props = defineProps<{
+  solved: ProfileSolved[]
+  /** 本人和老师才有；同学看是 null */
+  unsolved: ProfileUnsolved[] | null
+  title: string
+  /** 老师在看这个学生：没做对的题点进去看他的提交 */
+  username?: string
+  compact?: boolean
+}>()
+
+const theme = useThemeVars()
+
+/** 一行最多先露几道，多的点「还有 N 道」 */
+const PER_ROW = 12
+/** 先露几行，「看更早的」一次再加这么多 */
+const ROWS = 6
+
+const mode = ref<"day" | "tag">("day")
+const keyword = ref("")
+const rowLimit = ref(ROWS)
+const opened = ref(new Set<string>())
+
+watch([mode, keyword], () => {
+  rowLimit.value = ROWS
+  opened.value = new Set()
+})
+
+const filtered = computed(() => {
+  const word = keyword.value.trim().toLowerCase()
+  if (!word) return props.solved
+  return props.solved.filter(
+    (item) =>
+      item.displayId.toLowerCase().includes(word) || item.title.toLowerCase().includes(word),
+  )
+})
+
+interface Row {
+  key: string
+  label: string
+  sub: string
+  items: ProfileSolved[]
+}
+
+const rows = computed<Row[]>(() => {
+  const groups = new Map<string, ProfileSolved[]>()
+  if (mode.value === "day") {
+    for (const item of filtered.value) {
+      const day = parseTime(item.solvedAt, "YYYY-MM-DD")
+      const list = groups.get(day)
+      if (list) list.push(item)
+      else groups.set(day, [item])
+    }
+    return [...groups].map(([day, items]) => {
+      const { date, weekday } = dayLabel(day)
+      return { key: day, label: date, sub: weekday, items }
+    })
+  }
+  for (const item of filtered.value) {
+    for (const tag of item.tags.length ? item.tags : ["其他"]) {
+      const list = groups.get(tag)
+      if (list) list.push(item)
+      else groups.set(tag, [item])
+    }
+  }
+  return [...groups]
+    .map(([tag, items]) => ({ key: tag, label: tag, sub: "", items }))
+    .sort(
+      (a, b) =>
+        Number(a.key === "其他") - Number(b.key === "其他") || b.items.length - a.items.length,
+    )
+})
+
+/** 搜的时候全摊开，不再收着 */
+const searching = computed(() => !!keyword.value.trim())
+const shownRows = computed(() =>
+  searching.value ? rows.value : rows.value.slice(0, rowLimit.value),
+)
+
+function itemsOf(row: Row) {
+  return searching.value || opened.value.has(row.key) ? row.items : row.items.slice(0, PER_ROW)
+}
+
+function open(row: Row) {
+  opened.value = new Set([...opened.value, row.key])
+}
+
+function unsolvedLink(item: ProfileUnsolved) {
+  return props.username
+    ? {
+        path: "/submission",
+        query: { problem: item.displayId, username: props.username, exactUsername: "1" },
+      }
+    : `/problem/${item.displayId}`
+}
+</script>
+
+<template>
+  <section class="card" :class="{ compact }">
+    <div class="head">
+      <h3>
+        {{ title }} <small>{{ solved.length }} 道</small>
+      </h3>
+      <span class="grow"></span>
+      <n-input
+        v-if="solved.length"
+        v-model:value="keyword"
+        class="search"
+        clearable
+        placeholder="搜题号或题目"
+        aria-label="搜题号或题目"
+      >
+        <template #prefix><Icon icon="ph:magnifying-glass" /></template>
+      </n-input>
+      <div v-if="solved.length" class="seg" role="group" aria-label="怎么排">
+        <button type="button" :class="{ on: mode === 'day' }" @click="mode = 'day'">按日期</button>
+        <button type="button" :class="{ on: mode === 'tag' }" @click="mode = 'tag'">
+          按知识点
+        </button>
+      </div>
+    </div>
+
+    <div v-if="unsolved?.length && !searching" class="row">
+      <div class="label warn">{{ username ? "还没做对" : "差一点" }}</div>
+      <div class="chips">
+        <router-link
+          v-for="item in unsolved"
+          :key="item.displayId"
+          :to="unsolvedLink(item)"
+          class="chip stuck"
+        >
+          <span class="id">{{ item.displayId }}</span>
+          <span class="t">{{ item.title }}</span>
+          <span class="s">交了 {{ item.attempts }} 次</span>
+        </router-link>
+      </div>
+      <div class="count">{{ unsolved.length }} 道</div>
+    </div>
+
+    <div v-for="row in shownRows" :key="row.key" class="row">
+      <div class="label">
+        <b>{{ row.label }}</b> <span v-if="row.sub" class="sub">{{ row.sub }}</span>
+      </div>
+      <div class="chips">
+        <router-link
+          v-for="item in itemsOf(row)"
+          :key="item.displayId"
+          :to="`/problem/${item.displayId}`"
+          class="chip ok"
+        >
+          <span class="id">{{ item.displayId }}</span>
+          <span class="t">{{ item.title }}</span>
+        </router-link>
+        <button
+          v-if="itemsOf(row).length < row.items.length"
+          type="button"
+          class="chip more"
+          @click="open(row)"
+        >
+          还有 {{ row.items.length - PER_ROW }} 道 <Icon icon="ph:caret-down" />
+        </button>
+      </div>
+      <div class="count">{{ row.items.length }} 道</div>
+    </div>
+
+    <div v-if="!searching && rows.length > rowLimit" class="foot">
+      <button type="button" class="more-link" @click="rowLimit += ROWS">
+        {{ mode === "day" ? "看更早的" : "看更多" }} <Icon icon="ph:caret-down" />
+      </button>
+    </div>
+    <div v-if="searching && !rows.length" class="empty">没有对得上的题</div>
+    <div v-if="!solved.length" class="empty">还没做对过题</div>
+  </section>
+</template>
+
+<style scoped>
+.card {
+  padding: 14px 20px 10px;
+  border: 1px solid v-bind("theme.borderColor");
+  border-radius: var(--oj-radius);
+  background: v-bind("theme.cardColor");
+}
+
+.head {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 8px;
+  flex-wrap: wrap;
+}
+
+h3 {
+  margin: 0;
+  font-size: var(--oj-fs-h2);
+}
+
+h3 small {
+  font-size: var(--oj-fs-sec);
+  font-weight: 400;
+  color: v-bind("theme.textColor3");
+}
+
+.grow {
+  flex: 1;
+}
+
+.search {
+  width: 200px;
+}
+
+.seg {
+  display: inline-flex;
+  height: var(--oj-ctrl-h);
+  border: 1px solid v-bind("theme.borderColor");
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.seg button {
+  padding: 0 12px;
+  border: 0;
+  border-left: 1px solid v-bind("theme.borderColor");
+  background: v-bind("theme.cardColor");
+  color: v-bind("theme.textColor2");
+  font: inherit;
+  font-size: var(--oj-fs-sec);
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.seg button:first-child {
+  border-left: 0;
+}
+
+.seg button.on {
+  background: rgba(24, 160, 88, 0.12);
+  color: #18a058;
+  font-weight: 600;
+}
+
+.row {
+  display: flex;
+  gap: 12px;
+  padding: 10px 0;
+  border-top: 1px solid v-bind("theme.dividerColor");
+}
+
+.label {
+  width: 92px;
+  flex-shrink: 0;
+  line-height: 30px;
+  font-size: var(--oj-fs-body);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.label .sub {
+  font-size: var(--oj-fs-meta);
+  color: v-bind("theme.textColor3");
+}
+
+.label.warn {
+  color: #b86e00;
+  font-weight: 600;
+  font-size: var(--oj-fs-sec);
+}
+
+.chips {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.count {
+  width: 56px;
+  flex-shrink: 0;
+  text-align: right;
+  line-height: 30px;
+  font-size: var(--oj-fs-meta);
+  color: v-bind("theme.textColor3");
+  font-variant-numeric: tabular-nums;
+}
+
+.chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  max-width: 300px;
+  height: 30px;
+  box-sizing: border-box;
+  padding: 0 10px;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  font-size: var(--oj-fs-sec);
+  color: v-bind("theme.textColor1");
+  text-decoration: none;
+  white-space: nowrap;
+}
+
+.chip:hover {
+  filter: brightness(0.97);
+}
+
+.chip .id {
+  flex-shrink: 0;
+  font-size: var(--oj-fs-meta);
+  color: v-bind("theme.textColor3");
+}
+
+.chip .t {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.chip .s {
+  flex-shrink: 0;
+  font-size: var(--oj-fs-meta);
+  font-weight: 700;
+  color: #b86e00;
+}
+
+.ok {
+  background: rgba(24, 160, 88, 0.12);
+}
+
+.stuck {
+  background: rgba(240, 160, 32, 0.15);
+}
+
+.more {
+  border-color: v-bind("theme.borderColor");
+  background: none;
+  color: v-bind("theme.textColor2");
+  font: inherit;
+  font-size: var(--oj-fs-sec);
+  cursor: pointer;
+}
+
+.foot {
+  padding: 12px 0 2px;
+  text-align: center;
+  border-top: 1px solid v-bind("theme.dividerColor");
+}
+
+.more-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  border: 0;
+  background: none;
+  color: #18a058;
+  font: inherit;
+  font-size: var(--oj-fs-sec);
+  cursor: pointer;
+}
+
+.empty {
+  padding: 24px 0 18px;
+  text-align: center;
+  font-size: var(--oj-fs-sec);
+  color: v-bind("theme.textColor3");
+}
+
+/* 手机：按日期、按知识点都改成一行一道（块在窄屏上一行只放得下一两个） */
+.compact {
+  padding: 4px 0 0;
+  border: 0;
+  border-radius: 0;
+  background: none;
+}
+
+.compact .head h3,
+.compact .head .grow {
+  display: none;
+}
+
+.compact .search {
+  width: auto;
+  flex: 1 0 100%;
+}
+
+.compact .seg {
+  flex: 1;
+}
+
+.compact .seg button {
+  flex: 1;
+}
+
+.compact .row {
+  flex-direction: column;
+  gap: 6px;
+}
+
+.compact .label {
+  width: auto;
+  line-height: 22px;
+}
+
+.compact .count {
+  display: none;
+}
+
+.compact .chips {
+  flex-direction: column;
+  gap: 0;
+}
+
+.compact .chip {
+  max-width: none;
+  height: 44px;
+  padding: 0;
+  border-radius: 0;
+  background: none;
+  border-top: 1px solid v-bind("theme.dividerColor");
+  font-size: var(--oj-fs-body);
+}
+
+.compact .chip .id {
+  width: 52px;
+}
+
+.compact .chip .t {
+  flex: 1;
+}
+
+.compact .more {
+  color: #18a058;
+  border-left: 0;
+  border-right: 0;
+  border-bottom: 0;
+}
+</style>
diff --git a/apps/web/src/oj/user/components/VersusCard.vue b/apps/web/src/oj/user/components/VersusCard.vue
new file mode 100644
index 0000000..d7acd8c
--- /dev/null
+++ b/apps/web/src/oj/user/components/VersusCard.vue
@@ -0,0 +1,108 @@
+<script setup lang="ts">
+import type { ProfileOverview } from "@oj2/contract"
+import { useThemeVars } from "naive-ui"
+
+/** 同学看他的主页时的「你和他」：两根条比做对几道，下面一句你们重合多少、你在本班第几 */
+const props = defineProps<{
+  versus: NonNullable<ProfileOverview["versus"]>
+  /** 他做对几道 */
+  theirs: number
+}>()
+
+const theme = useThemeVars()
+
+const top = computed(() => Math.max(props.theirs, props.versus.solved, 1))
+
+const line = computed(() => {
+  const { solved, both, classRank } = props.versus
+  const parts = []
+  if (solved)
+    parts.push(
+      both === solved
+        ? `你做对的 ${solved} 道他都做对了`
+        : `你做对的 ${solved} 道里他做对了 ${both} 道`,
+    )
+  if (classRank) parts.push(`你在本班第 ${classRank.rank} 名`)
+  return parts.join(" · ")
+})
+</script>
+
+<template>
+  <section class="card">
+    <h3>你和他</h3>
+    <div class="bar-row">
+      <span class="who">他</span>
+      <span class="lane"
+        ><span class="bar his" :style="{ width: `${(theirs / top) * 100}%` }"></span
+      ></span>
+      <b>{{ theirs }}</b>
+    </div>
+    <div class="bar-row">
+      <span class="who">你</span>
+      <span class="lane">
+        <span class="bar mine" :style="{ width: `${(versus.solved / top) * 100}%` }"></span>
+      </span>
+      <b>{{ versus.solved }}</b>
+    </div>
+    <div v-if="line" class="meta">{{ line }}</div>
+  </section>
+</template>
+
+<style scoped>
+.card {
+  padding: 14px 18px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  border: 1px solid v-bind("theme.borderColor");
+  border-radius: var(--oj-radius);
+  background: v-bind("theme.cardColor");
+}
+
+h3 {
+  margin: 0;
+  font-size: var(--oj-fs-h2);
+}
+
+.bar-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: var(--oj-fs-sec);
+}
+
+.who {
+  width: 28px;
+  color: v-bind("theme.textColor3");
+}
+
+.lane {
+  flex: 1;
+  display: flex;
+}
+
+.bar {
+  height: 10px;
+  min-width: 2px;
+  border-radius: 2px 5px 5px 2px;
+}
+
+.his {
+  background: #2f6fd0;
+}
+
+.mine {
+  background: #18a058;
+}
+
+b {
+  width: 44px;
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
+
+.meta {
+  font-size: var(--oj-fs-meta);
+  color: v-bind("theme.textColor3");
+}
+</style>
diff --git a/apps/web/src/oj/user/index.vue b/apps/web/src/oj/user/index.vue
index a646e38..6bd3079 100644
--- a/apps/web/src/oj/user/index.vue
+++ b/apps/web/src/oj/user/index.vue
@@ -1,327 +1,157 @@
 <script setup lang="ts">
-import KnowledgeMap from "./components/KnowledgeMap.vue"
-import { Icon } from "@iconify/vue"
+import type { ProfileOverview } from "@oj2/contract"
+import { getProfileOverview } from "oj/api"
 import { getProfile } from "shared/api"
-import { durationToDays, parseTime } from "utils/functions"
-import type { AchievementSummary, Profile } from "utils/types"
-import { getAchievementSummary } from "oj/achievement/api"
-import { getMetrics } from "../api"
-import AchievementIcon from "shared/components/AchievementIcon.vue"
+import { useBreakpoints } from "shared/composables/breakpoints"
 import { useUserStore } from "shared/store/user"
-
-const route = useRoute()
-const router = useRouter()
-const userStore = useUserStore()
+import type { Profile } from "utils/types"
+import AchievementCard from "./components/AchievementCard.vue"
+import KnowledgeMap from "./components/KnowledgeMap.vue"
+import ProfileCard from "./components/ProfileCard.vue"
+import SolvedCard from "./components/SolvedCard.vue"
+import VersusCard from "./components/VersusCard.vue"
 
 /**
- * 在看自己的主页。知识点地图只在这时候挂：它不给别人看（见 KnowledgeMap.vue），
- * 后端 /me/knowledge 也只认当前登录的人。带 ?name= 看的是别人，除非名字就是自己。
+ * 个人主页（设计稿「我的主页与设置」定稿）。排名、提交列表点名字也是到这里（?name=），
+ * 所以同一页有三种人看：本人、同学、老师。看的人不同，后端给的东西不同（见
+ * /profiles/:username/overview），这里只管摆。原来的「我的设置」并进了名片。
  */
-const isSelf = computed(() => {
-  const name = route.query.name as string | undefined
-  return !name || name === userStore.user?.username
-})
-const profile = ref<Profile | null>(null)
-const problems = ref<string[]>([])
-const firstSubmissionAt = ref("")
-const latestSubmissionAt = ref("")
-const toLatestAt = ref("")
-const learnDuration = ref("")
-const achievementSummary = ref<AchievementSummary | null>(null)
-const [loading, toggle] = useToggle()
-const [show, toggleShow] = useToggle(false)
+const route = useRoute()
+const userStore = useUserStore()
+const { isDesktop } = useBreakpoints()
 
-const isDefaultAvatar = computed(() => profile.value?.avatar.endsWith("default.png") ?? true)
-
-const problemsFlexRef = useTemplateRef<HTMLElement>("problemsFlexRef")
-const itemsPerRow = ref(8)
-
-function updateItemsPerRow() {
-  if (!problemsFlexRef.value) return
-  const buttons = problemsFlexRef.value.querySelectorAll("button")
-  if (!buttons.length) return
-  const firstTop = buttons[0].offsetTop
-  let count = 0
-  for (const btn of buttons) {
-    if (btn.offsetTop === firstTop) count++
-    else break
-  }
-  if (count > 0) itemsPerRow.value = count
-}
-
-useResizeObserver(problemsFlexRef, updateItemsPerRow)
-watch(problems, async () => {
-  await nextTick()
-  updateItemsPerRow()
-})
-
-const visibleProblems = computed(() =>
-  show.value ? problems.value : problems.value.slice(0, itemsPerRow.value * 3),
+const username = computed(
+  () => (route.query.name as string | undefined) || userStore.user?.username || "",
 )
+const isSelf = computed(() => username.value === userStore.user?.username)
+const teacherView = computed(() => !isSelf.value && userStore.isTeacherOrAbove)
 
-const hasMoreProblems = computed(() => problems.value.length > itemsPerRow.value * 3)
+const profile = ref<Profile | null>(null)
+const overview = ref<ProfileOverview | null>(null)
+const loading = ref(true)
+const notFound = ref(false)
+const tab = ref("solved")
 
-async function init() {
-  toggle(true)
+async function load() {
+  const name = username.value
+  if (!name) return
   try {
-    const res = await getProfile(route.query.name as string)
-    profile.value = res
-    // 用户不存在时后端返回 null，后面的统计全都无从算起
-    if (!res) return
-    const acm = res.acmProblemsStatus.problems || {}
-    const ac: string[] = []
-    Object.keys(acm).forEach((id) => {
-      if (acm[id]["status"] === 0) {
-        ac.push(acm[id]["_id"])
-      }
-    })
-    ac.sort()
-    problems.value = ac
-
-    if (res.submissionNumber > 0) {
-      const metricsRes = await getMetrics(res.user.id)
-      firstSubmissionAt.value = parseTime(metricsRes.first)
-      latestSubmissionAt.value = parseTime(metricsRes.latest)
-      toLatestAt.value = durationToDays(metricsRes.latest, metricsRes.now)
-      learnDuration.value = `${metricsRes.activeDays} 天`
-    }
-  } finally {
-    toggle(false)
-  }
-}
-
-// 单独取，不塞进上面的 promises 数组：那里是按位置取 results[0]/[1] 的，
-// 插一项进去会打乱既有索引。成就摘要取不到也不该影响整个个人主页
-async function loadAchievementSummary() {
-  try {
-    const res = await getAchievementSummary((route.query.name as string) || undefined)
-    achievementSummary.value = res
+    const [p, o] = await Promise.all([getProfile(name), getProfileOverview(name)])
+    if (name !== username.value) return
+    profile.value = p
+    overview.value = o
+    notFound.value = !p
   } catch {
-    achievementSummary.value = null
+    notFound.value = true
+  } finally {
+    loading.value = false
   }
 }
 
-// 六项一格一项、三列两行。日期比数字长得多，字号单独压小一档（.stat-value.date），
-// 不然「2026年9月14日」会把格子撑破
-const metrics = computed(() => {
-  if (loading.value) return []
-  return [
-    {
-      icon: "fluent-emoji:candy",
-      title: profile.value?.acceptedNumber ?? 0,
-      content: "已解决",
-      animate: true,
-    },
-    {
-      icon: "fluent-emoji:thinking-face",
-      title: profile.value?.submissionNumber ?? 0,
-      content: "总提交",
-      animate: true,
-    },
-    {
-      icon: "fluent-emoji:face-with-peeking-eye",
-      title: learnDuration.value,
-      content: "学习天数",
-    },
-    {
-      icon: "fluent-emoji:cheese-wedge",
-      title: toLatestAt.value,
-      content: "距上次提交",
-    },
-    {
-      icon: "fluent-emoji:dog-face",
-      title: latestSubmissionAt.value,
-      content: "最新一次提交时间",
-      date: true,
-    },
-    {
-      icon: "fluent-emoji:cat-with-wry-smile",
-      title: firstSubmissionAt.value,
-      content: "第一次提交时间",
-      date: true,
-    },
-  ]
-})
+watch(username, load, { immediate: true })
 
-onMounted(() => {
-  init()
-  loadAchievementSummary()
-})
+const solvedTitle = computed(() => (isSelf.value || teacherView.value ? "做对的题" : "他做对的题"))
 </script>
+
 <template>
-  <n-flex class="wrapper" vertical justify="center" align="center" v-if="!loading && profile">
-    <n-image
-      :width="112"
-      :height="112"
-      :src="profile.avatar"
-      :preview-disabled="isDefaultAvatar"
-      object-fit="cover"
-      :style="{
-        borderRadius: '50%',
-        overflow: 'hidden',
-        cursor: isDefaultAvatar ? 'default' : 'pointer',
-      }"
-    />
-    <h2>{{ profile.user.username }}</h2>
-    <p class="desc">{{ profile.mood }}</p>
-    <n-button
-      v-if="userStore.isTeacherOrAbove"
-      type="info"
-      secondary
-      @click="
-        router.push({
-          name: 'ai',
-          query: { username: profile.user.username },
-        })
-      "
-    >
-      智能分析
-    </n-button>
-  </n-flex>
-
-  <div v-if="profile && profile.submissionNumber > 0" class="wrapper">
-    <div class="stats">
-      <div v-for="item in metrics" :key="item.content" class="stat">
-        <Icon :icon="item.icon" :width="28" />
-        <div class="stat-value" :class="{ date: item.date }">
-          <n-number-animation v-if="item.animate" :to="Number(item.title)" />
-          <template v-else>{{ item.title }}</template>
-        </div>
-        <n-text depth="3" class="stat-label">{{ item.content }}</n-text>
-      </div>
-    </div>
-  </div>
-
-  <!-- 成就摘要 -->
-  <n-card v-if="!loading && profile && achievementSummary" class="wrapper" hoverable>
-    <n-flex align="center" justify="space-between">
-      <n-flex align="center" :size="12">
-        <span class="achievement-title">
-          成就 {{ achievementSummary.unlocked }} /
-          {{ achievementSummary.total }}
-        </span>
-        <n-tag size="small" type="info"> {{ achievementSummary.percent }}% </n-tag>
-      </n-flex>
-      <n-button
-        text
-        type="primary"
-        @click="
-          router.push({
-            path: '/achievement',
-            query: route.query.name ? { name: route.query.name } : {},
-          })
-        "
-      >
-        查看全部
-      </n-button>
-    </n-flex>
-    <n-flex align="center" :size="10" class="achievement-recent">
-      <n-text v-if="achievementSummary.recent.length" depth="3"> 最近获得 </n-text>
-      <n-tooltip v-for="a in achievementSummary.recent" :key="a.id">
-        <template #trigger>
-          <span class="achievement-icon">
-            <AchievementIcon :icon="a.icon" :size="24" />
-          </span>
+  <div class="oj-page profile-page">
+    <n-spin :show="loading" :delay="150">
+      <n-empty v-if="notFound" description="没有这个用户" class="blank">
+        <template #extra>
+          <n-button @click="$router.push('/')">回首页</n-button>
         </template>
-        {{ a.name }}
-      </n-tooltip>
-      <n-text v-if="!achievementSummary.recent.length" depth="3"> 还没有获得成就 </n-text>
-    </n-flex>
-  </n-card>
+      </n-empty>
 
-  <KnowledgeMap v-if="!loading && profile && isSelf" />
-  <n-descriptions v-if="!loading && profile" class="wrapper" bordered>
-    <n-descriptions-item v-if="!!problems.length">
-      <template #label>
-        <n-flex justify="space-between" align="center">
-          <span>已解决的题目</span>
-          <n-button text type="primary" v-if="hasMoreProblems" @click="toggleShow(!show)">
-            {{ show ? "隐藏全部" : "显示全部" }}
-          </n-button>
-        </n-flex>
-      </template>
-      <div ref="problemsFlexRef">
-        <n-flex>
-          <n-button v-for="id in visibleProblems" :key="id" @click="router.push('/problem/' + id)">
-            {{ id }}
-          </n-button>
-        </n-flex>
+      <div v-else-if="profile && overview" class="body">
+        <ProfileCard
+          :profile="profile"
+          :overview="overview"
+          :is-self="isSelf"
+          :teacher-view="teacherView"
+          :compact="!isDesktop"
+          @changed="load"
+        />
+
+        <div v-if="isDesktop" class="main">
+          <SolvedCard
+            :solved="overview.solved"
+            :unsolved="overview.unsolved"
+            :title="solvedTitle"
+            :username="teacherView ? profile.user.username : undefined"
+          />
+          <div class="column">
+            <KnowledgeMap
+              v-if="overview.knowledge"
+              :map="overview.knowledge"
+              :teacher="teacherView"
+            />
+            <AchievementCard
+              :achievements="overview.achievements"
+              :username="profile.user.username"
+              :other="!isSelf"
+            />
+            <VersusCard
+              v-if="overview.versus"
+              :versus="overview.versus"
+              :theirs="overview.solved.length"
+            />
+          </div>
+        </div>
+
+        <template v-else>
+          <VersusCard
+            v-if="overview.versus"
+            :versus="overview.versus"
+            :theirs="overview.solved.length"
+          />
+          <n-tabs v-model:value="tab" type="line" animated>
+            <n-tab-pane name="solved" :tab="`做对的题 ${overview.solved.length}`">
+              <SolvedCard
+                :solved="overview.solved"
+                :unsolved="overview.unsolved"
+                :title="solvedTitle"
+                :username="teacherView ? profile.user.username : undefined"
+                compact
+              />
+            </n-tab-pane>
+            <n-tab-pane v-if="overview.knowledge" name="knowledge" tab="知识点">
+              <KnowledgeMap :map="overview.knowledge" :teacher="teacherView" compact />
+            </n-tab-pane>
+            <n-tab-pane name="achievements" :tab="`成就 ${overview.achievements.unlocked.length}`">
+              <AchievementCard
+                :achievements="overview.achievements"
+                :username="profile.user.username"
+                :other="!isSelf"
+                compact
+              />
+            </n-tab-pane>
+          </n-tabs>
+        </template>
       </div>
-    </n-descriptions-item>
-  </n-descriptions>
-  <n-empty v-if="!loading && !profile" description="该用户不存在">
-    <template #extra>
-      <n-button @click="router.push('/')">返回主页</n-button>
-    </template>
-  </n-empty>
+    </n-spin>
+  </div>
 </template>
+
 <style scoped>
-.wrapper {
-  max-width: 760px;
-  margin: var(--oj-gap) auto 0;
+.profile-page {
+  padding-bottom: 40px;
 }
 
-.stats {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
+.body,
+.column {
+  display: flex;
+  flex-direction: column;
   gap: 16px;
 }
 
-@media (max-width: 600px) {
-  .stats {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
+.main {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 380px;
+  gap: 16px;
+  align-items: start;
 }
 
-.stat {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 6px;
-  padding: 20px 12px;
-  border-radius: var(--oj-radius);
-  border: 1px solid rgba(128, 128, 128, 0.2);
-}
-
-.stat-value {
-  font-size: 26px;
-  font-weight: 700;
-  line-height: 1.2;
-}
-
-.stat-label {
-  font-size: var(--oj-fs-sec);
-}
-
-.stat-value.date {
-  font-size: 18px;
-  padding: 3px 0;
-  white-space: nowrap;
-}
-
-h2 {
-  margin: 4px 0 0;
-  font-weight: 600;
-  font-size: var(--oj-fs-title);
-}
-
-.desc {
-  margin: 0 auto;
-  word-wrap: break-word;
-  max-width: 100%;
-  font-size: var(--oj-fs-body);
-}
-.achievement-title {
-  font-weight: 600;
-  font-size: var(--oj-fs-h2);
-}
-.achievement-recent {
-  margin-top: 14px;
-}
-.achievement-icon {
-  display: inline-flex;
-  align-items: center;
-  font-size: 24px;
-  cursor: default;
+.blank {
+  padding: 80px 0;
 }
 </style>
diff --git a/apps/web/src/routes.ts b/apps/web/src/routes.ts
index c743cbb..c246e69 100644
--- a/apps/web/src/routes.ts
+++ b/apps/web/src/routes.ts
@@ -111,11 +111,6 @@ export const ojs: RouteRecordRaw = {
       component: () => import("oj/achievement/index.vue"),
       meta: { requiresAuth: true },
     },
-    {
-      path: "setting",
-      component: () => import("oj/user/setting.vue"),
-      meta: { requiresAuth: true },
-    },
     {
       path: "message",
       component: () => import("oj/user/message.vue"),
diff --git a/apps/web/src/shared/components/Header.vue b/apps/web/src/shared/components/Header.vue
index 9db328f..197a666 100644
--- a/apps/web/src/shared/components/Header.vue
+++ b/apps/web/src/shared/components/Header.vue
@@ -191,12 +191,6 @@ const options = computed<Array<DropdownOption | DropdownDividerOption>>(() => {
       icon: renderIcon("ph:sparkle"),
       props: { onClick: () => router.push("/ai-analysis") },
     },
-    {
-      label: "我的设置",
-      key: "setting",
-      icon: renderIcon("ph:gear-six"),
-      props: { onClick: () => router.push("/setting") },
-    },
     { type: "divider", key: "theme-divider" },
     { type: "render", key: "theme", render: renderThemeRow },
     { type: "divider", key: "logout-divider" },