Skip to content

feat: 为全局 Header 增加账号区域与认证入口(Refs #157) #164

Description

@huyanxius

问题

Issue #159 已提供查询参数驱动的账号面板,但当前全局 Header 没有为账号状态预留位置,也没有用户可发现的登录与注册触发点。

因此账号面板虽然能通过 ?account=login 打开,普通访问者仍无法从产品界面发现并进入认证流程。这条链路在技术上存在,在产品上尚未闭合。

目标

在全局 Header 中增加稳定的账号区域,让访客能够进入登录与注册面板,让已登录用户能够辨认当前账号并执行登出。

范围

包含:

  • 调整全局 Header 布局,为账号区域提供稳定位置。
  • 访客状态显示明确的“登录 / 注册”入口。
  • 点击入口后打开现有 ?account=login 面板,不新增登录页面路由。
  • 打开面板时保留当前站内地址作为安全 returnTo
  • 已登录状态显示昵称;没有昵称时显示邮箱。
  • 已登录状态提供登出操作,登出后回到首页。
  • 桌面与窄屏均不能遮挡产品导航或产生横向滚动。
  • 保持可见焦点、至少 44px 的触控区域和 reduced-motion 兼容。

不包含:

#160 的边界

#160 原文已经包含全局顶栏的登录态、账号展示与登出。本 Issue 将其中“全局 Header 账号区域”抽成独立纵向切片。

本 Issue 创建后,#160 的实现与验收不再重复修改全局 Header,只处理路由守卫、会话过期提示和项目工作区账号入口。当前不顺带修改 #160 的线上正文,后续实现与 PR 草稿需明确记录这项范围拆分。

验收标准

  • 访客可以从首页 Header 直接打开登录与注册面板。
  • 从带路径、查询参数或 hash 的站内页面打开面板,登录成功后回到原地址。
  • 站外或协议相对 returnTo 仍被拒绝。
  • 已登录用户在 Header 中看到昵称或邮箱,并能直接登出。
  • 登出后 Header 立即恢复访客状态并回到首页。
  • 375px 宽度下品牌、产品导航和账号入口均可操作,没有横向滚动或相互遮挡。
  • 项目工作区外壳不被全局 Header 改动影响。

Related

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions