43 lines
2.7 KiB
Markdown
43 lines
2.7 KiB
Markdown
# 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`（由固定值改为可收缩），减少页面因内容过少而产生滚动。
|