当前位置：首页 > news >正文

BuildingAI 用户信息弹出页面PRD

news 2025/11/5 7:20:20

1. 产品概述

用户信息弹出页面是BuildingAI平台的用户中心入口组件，通过点击用户头像触发弹出层，展示用户基本信息、算力值状态、快捷操作入口等核心功能。该组件作为全局导航的重要组成部分，为用户提供快速访问个人相关功能的统一入口。

2. 功能详情

2.1 用户信息展示模块

功能模块	字段内容	数据来源	展示规则
用户头像	头像图片	`userInfo.avatar`	圆形显示，支持默认头像
用户昵称	昵称文本	`userInfo.nickname`	优先显示昵称，无昵称时显示邮箱/手机号
联系方式	邮箱/手机号	`userInfo.email` / `userInfo.phone`	自动识别并显示可用联系方式
算力值	当前算力值	`userInfo.balance`	数值型展示，支持千位分隔符

2.2 快捷操作模块

功能按钮	跳转目标	权限要求	展示规则
充值按钮	`/recharge`	登录用户	始终显示，突出展示
个人中心	`/profile`	登录用户	基础功能入口
算力订单	`/power-orders`	登录用户	算力相关订单查询
Coze订单	`/coze-orders`	登录用户	Coze套餐订单管理
退出登录	登出操作	登录用户	底部展示，红色警告样式

2.3 系统功能模块

功能模块	实现方式	交互说明
主题切换	`ThemeToggle`组件	支持明暗主题切换
语言切换	内置语言切换	支持中英文切换

3. 交互设计

3.1 触发方式

点击触发：用户点击页面右上角头像区域
悬停效果：鼠标悬停时显示手型光标
弹出位置：相对于头像位置向下弹出，自动适配屏幕边界

3.2 弹出层交互

用户点击头像 → 弹出用户信息卡片 → 显示用户信息 → 用户选择操作 → 跳转或执行 → 关闭弹出层

3.3 关闭方式

点击页面其他区域自动关闭
点击弹出层外部遮罩层关闭
执行跳转操作后自动关闭
ESC键支持（可选）

4. 数据来源

4.1 用户信息数据

interface UserInfo {id: string;email?: string;phone?: string;nickname?: string;avatar?: string;balance: number;
}

4.2 数据获取方式

获取时机：用户登录后自动获取，存储在全局状态中
更新机制：页面刷新时重新获取，充值成功后实时更新
缓存策略：本地缓存5分钟，减少API调用频次

4.3 API接口

用户信息：GET /api/user/profile
算力值更新：GET /api/user/balance（实时获取）

5. 路由导航

操作类型	目标路由	导航方式	参数传递
充值按钮	`/recharge`	`router.push()`	无
个人中心	`/profile`	`router.push()`	无
算力订单	`/power-orders`	`router.push()`	无
Coze订单	`/coze-orders`	`router.push()`	无
退出登录	清除登录状态	`auth.logout()`	重定向到首页

6. 国际化

6.1 支持语言

中文（zh-CN）：默认语言
英文（en-US）：国际化支持

6.2 文案配置

{"user": {"profile": "个人中心","recharge": "充值","balance": "算力值","powerOrders": "算力订单","cozeOrders": "Coze订单","logout": "退出登录","theme": "主题","language": "语言"}
}

7. 权限与安全

7.1 权限控制

登录状态：仅登录用户可查看完整信息
未登录状态：显示默认头像，点击跳转登录页
权限验证：每次弹出时验证用户登录状态

7.2 安全机制

数据脱敏：手机号中间4位显示为****
XSS防护：所有用户输入内容进行转义处理
CSRF防护：API调用包含CSRF Token验证

8. 性能与兼容

8.1 性能要求

加载时间：用户信息展示 ≤ 200ms
动画性能：弹出动画流畅，60fps
内存占用：组件卸载时清理所有监听器

8.2 浏览器兼容

现代浏览器：Chrome 80+, Firefox 75+, Safari 13+, Edge 80+
移动端：iOS Safari 12+, Android Chrome 80+
响应式：支持最小宽度320px的移动端设备

9. 埋点与监控

9.1 用户行为埋点

事件类型	事件ID	触发时机	自定义参数
弹出层展示	`user_profile_show`	弹出层显示时	userId, timestamp
充值点击	`recharge_click`	点击充值按钮时	userId, balance
菜单点击	`menu_item_click`	点击菜单项时	userId, itemName
退出登录	`logout_click`	点击退出登录时	userId, timestamp