# Profile.vue

**路径**：`src/views/Profile.vue`  
**路由**：`/profile`，name: `profile`

## 功能用途

个人中心页面，按照 Pencil 设计稿（`design/pencil-new.pen` 的 `UNTdC` 节点）还原移动端 Profile Screen，并接入用户态与国际化：

- 从 `useUserStore` 读取昵称、UID、头像、余额、钱包地址等数据
- 页面加载后自动触发 `fetchUserInfo()` 与 `fetchUsdcBalance()`，刷新展示数据
- 支持语言切换、复制钱包地址、登出等交互逻辑
- 全量文案改为 `vue-i18n`（`profile.*` 与 `common.logout` 等）

## 使用方式

- 访问路由 `/profile`
- 页面会读取 `userStore.user` 作为展示数据源（昵称、UID、头像、VIP 标签、钱包地址）
- 点击设置项中的 `钱包管理` 会弹出钱包地址框，显示当前钱包地址（无地址时显示 i18n 兜底文案）
- 点击设置项中的 `API KEY 管理` 会跳转到 `/api-key`
- 点击设置项中的 `语言` 会弹出语言选择框，点选后即时切换并关闭弹窗，右侧显示当前语言名称
- 点击钱包卡片的 `钱包详情` 会跳转到 `/wallet`
- 页面展示的用户名与编辑初始值统一取 `userName`（调用 `PUT /user/setSelfUsername` 后刷新）；输入会提示允许格式与校验错误（至少 2 位，且仅允许 `a-z / 0-9 / _`）
- 点击 `复制地址` 会写入剪贴板，并通过 toast 提示成功/失败
- 点击底部 `退出登录` 会执行异步登出（带 loading 防重复）并跳转到 `/login`

主要结构：

- Profile 卡片：头像、昵称、UID、VIP 标签、编辑按钮
- Wallet 卡片：总览标题、余额、明细文案、充币/提币按钮
- 设置卡片：钱包管理、API KEY 管理、语言
- 退出按钮：底部高亮按钮

## 扩展方式

1. **更新用户名错误分层**：当前错误优先展示输入校验与接口返回的 `msg`；后续可按错误码映射到更细粒度的 i18n 文案与字段提示。
2. **余额细分字段接入**：目前可用/冻结余额已支持多字段兜底，后续可统一对接后端标准字段。
3. **头像兜底增强**：当前无头像时展示昵称首字母，可扩展为默认头像资源或主题色方案。
4. **多语言持续补齐**：新增字段时同步更新 `src/locales/*.json` 下 `profile` 命名空间。
5. **长昵称适配**：`.name-text` 已启用 `ellipsis` 截断，避免与右侧 `编辑` 按钮发生重叠。
6. **底部留白优化**：通过调整 `.profile-page` 的 flex 对齐方式，避免容器被拉伸导致底部空白过多。
7. **高度收缩优化**：移除了 `.profile-screen` 过高的 `min-height`（由固定值改为可收缩），减少页面因内容过少而产生滚动。