xtraderClient/docs/views/Profile.md

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