Tanplate Docs
网站配置

头像按钮

配置 Admin 用户入口、会话信息和登出动作。

当前用户入口位于 Admin Sidebar 底部,由通用用户图标触发 Dropdown:

apps/admin/src/pages/_app/-components/app-shell-sidebar.tsx

Web Header 在 Authentication 开启时显示登录动作,并通过全局 Authentication Dialog 完成登录;它目前不渲染独立头像菜单。

当前菜单

Admin Dropdown 显示:

  • auth.user.displayName
  • auth.user.email
  • 登出动作

显示字段来自服务端解析的 AuthSnapshot,不从 localStorage 或 URL 读取身份。会话缺少显示名时使用严格消息目录中的安全 fallback。

登出行为

登出会尽力调用同源 logoutApi,随后清理客户端 auth snapshot 并跳转登录页。远端 API 暂时不可用时,也不能让已点击登出的用户继续停留在受保护 UI。

添加菜单项

账户设置、个人资料等入口应使用现有 DropdownMenu 组件,并遵循以下规则:

  1. route 必须真实存在且受正确的登录/权限保护。
  2. label 进入 Admin 严格 i18n 消息目录。
  3. 图标使用 Solar/Carbon Iconify class。
  4. destructive 动作使用明确的 destructive variant。
  5. 更新 app-shell-sidebar.tsx Header 与所属 .folder.md

使用真实头像图片

当前共享 Auth snapshot 没有把用户头像 URL 作为这个入口的稳定 UI 合同,因此默认显示 i-solar-user-bold。若未来接入头像图片,需要先在共享 Auth/User Assets 边界定义受信任 URL、fallback、删除语义和跨 owner 访问规则,再修改表现层;不要直接渲染未经校验的任意远程 URL。

验证

运行 Admin typecheck 和 E2E,确认菜单在折叠/展开 Sidebar 中都可访问,显示内容不会溢出,并且登出后受保护页面不可继续访问。

On this page