# 个人主页 / Profile Page

> 页面 · `id: profile`

以身份为中心展示"这是谁、有什么、在做什么"的页面：封面与头像建立视觉身份， 下方是姓名、简介与统计数字，再用页签切换动态、作品或文章等内容流。 他人视角配关注/私信按钮，本人视角配编辑入口，页面结构相同而操作不同。

**别名:** 个人主页 · 个人资料页 · 用户主页 · 个人介绍页 · 头像主页 · 空间主页 · 介绍一下自己的页面

**分类:** Page / Social

## 适用场景

- 社区、创作者平台展示用户身份与内容
- 团队成员/作者等人物介绍页
- 用户需要查看或管理自己的公开形象

## 不适用场景

- 纯功能性的账号信息修改（并入设置页）
- 无内容流、只留联系方式的极简名片（静态区块即可）
- 需要强营销转化的官方品牌页

## 常见形式

- **卡片式** (Card Profile) — 信息收在一张圆角卡片内，克制通用
- **封面头图式** (Cover Profile) — 大封面 + 叠放头像，社交平台标准
- **极简列表式** (Minimal Profile) — 只留头像、一句话与链接，名片风
- **作品集式** (Portfolio Profile) — 内容以作品网格为主视觉

## 页面结构

1. **封面与头像** — 身份的第一眼，头像与封面比例固定避免跳动。
2. **身份信息** — 姓名、角色、简介、地点与联系方式。
3. **统计** — 关注数 / 作品数等关键数字，横向排列。
4. **内容页签** — 作品 / 收藏 / 关于等分区，切换不跳页。
5. **操作按钮** — 关注 / 编辑 / 分享等主操作，按权限显隐。

## 实现要点

**CSS:** `flex` `grid` `transform: translateY(50%)` `object-fit: cover`

封面变体：头像用负 margin（translateY 或 -mt）叠在封面下缘，圆环描边避免与封面糊在一起。 统计数字用 flex 分列；页签切换内容流且保留滚动位置。关注按钮三态（未关注/已关注/互关） 与 hover 状态区分；本人视角用 avatar 菜单替换操作区。

## 交给 Agent 的任务 Prompt

```text
在当前项目中实现个人主页。

先检查用户数据结构与现有 avatar/tabs 组件，保持一致。
要求：
- 封面 + 叠放头像 + 身份信息 + 统计
- 页签切换内容流（支持空态）
- 关注按钮三态；本人/访客视角区分
- 深浅色一致，响应式
- 不新增依赖
完成后运行现有检查，说明修改文件。
```

### 其余层级 Prompt

**Basic:** 创建一个个人主页，包含头像、简介、统计数字和内容页签。

**Design:** 创建社交平台个人主页：顶部渐变封面图，圆形头像带白色描边叠在封面下缘；右侧关注/私信按钮（本人视角则显示编辑资料）；姓名 + 认证徽标 + 一句话简介；关注者/关注/作品数三列统计；下方"动态 / 作品 / 关于"页签切换内容列表。

**Implementation:** 用 React + Tailwind 实现个人主页：受控 tab 状态切换内容流；关注按钮三态受控； 头像叠放用 -mt-8 + ring-2 ring-paper；内容流列表数据驱动并支持空态； 移动端统计与按钮换行。深浅色一致；不新增依赖。

## 相关概念

- [avatar](/interface-atlas-web/components/avatar) — 包含组件
- [tabs](/interface-atlas-web/components/tabs) — 包含组件
- [card](/interface-atlas-web/components/card) — 包含组件
- [button](/interface-atlas-web/components/button) — 包含组件
- [badge](/interface-atlas-web/components/badge) — 包含组件

## Sources

- [Nielsen Norman Group — Profile Pages](https://www.nngroup.com/articles/about-us/)
- [Material Design — Cards](https://m3.material.io/components/cards)

---

JSON: `/interface-atlas-web/api/concept/pages/profile.json` · 站点: /interface-atlas-web/pages/profile