[Bug][iOS 登录页] Apple 登录按钮覆盖登录卡片标题
- Dominant language
- TypeScript
- Stars
- 2.7k
- Forks
- 395
- Avg merge
- 21h 48m
- Merged PRs (30d)
- 776
Description
## 现象
iOS 中文登录页中,“通过 Apple 登录”按钮横跨白色登录卡片顶部,覆盖卡片边框和“登录 Cindy”标题,导致标题仅部分可见,首屏控件层级明显错乱。
- 严重级别:P2
- 环境:iOS 真机、中文界面
- 证据:2026-07-24 用户现场截图
- 复现率:从当前截图及确定性布局实现判断为稳定复现;具体机型与客户端版本待补充
## 复现步骤
1. 在未登录的 iOS 设备上启动 Cindy。
2. 等待登录页加载完成,确保当前登录方式列表包含 Apple 登录。
3. 观察白色登录卡片顶部、“登录 Cindy”标题和“通过 Apple 登录”按钮的位置关系。
4. 点击“通过 Apple 登录”,随后取消系统 Apple 登录。
5. 返回 Cindy 登录页,继续观察卡片标题、Apple 登录按钮及“已取消登录。”提示的位置。
## 期望行为
Apple 登录按钮应位于明确、独立且可点击的布局区域,不覆盖登录卡片边框、标题、手机号输入框、继续按钮、错误提示或 SSO 入口;取消 Apple 登录后,错误提示应在预留区域正常展示,页面布局保持稳定。
## 实际行为
Apple 登录按钮从登录区域顶部开始绘制,覆盖白色登录卡片顶部和“登录 Cindy”标题。取消 Apple 登录后,页面仍保持重叠状态,“已取消登录。”提示显示在卡片底部附近。
## 源码分析
`apps/mobile/app/(auth)/login.tsx` 的 identifier 首屏先渲染 `LoginPanel`,随后把 `AppleAuthenticationButton` 作为同一父容器下的兄弟节点渲染。`LoginPanel` 在 `LoginSkinControls.tsx` 中使用 `position: 'absolute'`、`top: 0`,不占据普通布局流;Apple 按钮的 `appleButton` 样式仅定义 `height: 48` 和 `width: '100%'`,未提供与 750 设计坐标层匹配的定位。结果是 Apple 按钮从父容器普通流起点绘制,与面板顶部及位于 `y=31` 的标题发生覆盖,和截图现象一致。
## 验收标准
- [ ] iOS 登录首屏包含 Apple 登录方式时,Apple 按钮与卡片边框、“登录 Cindy”标题、输入框、继续按钮、错误提示和 SSO 入口均无重叠。
- [ ] 点击 Apple 登录并在系统界面取消后,“已取消登录。”提示完整可见,卡片和其他控件不位移、不重叠。
- [ ] 在短屏与长屏 iPhone 竖屏尺寸下验证布局,Apple 按钮均处于可视、可点击区域。
- [ ] 浅色与深色模式下均使用符合 Apple 规范的官方按钮样式,且布局一致。
- [ ] Android 不渲染 Apple 登录按钮,现有手机号/邮箱登录与 SSO 布局无回归。
- [ ] 增加布局或渲染回归测试,覆盖 Apple provider 存在及取消登录错误提示两种状态。
Contributor guide
Research direction
Start with apps/mobile/app/(auth)/login.tsx and LoginSkinControls.tsx, tracing how LoginPanel and AppleAuthenticationButton are rendered and how the absolute positioning interacts with the login card. Verify the layout on short and tall iPhone screens in light and dark modes, then add a regression test covering an available Apple provider and the cancelled-login error state, including Android behavior.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react-native, typescript
- Domain
- authentication, mobile, testing
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Quiet
- Clarity
- Clearly specified
- Newbie friendliness
- 62/100