Эхлэл Бүгдийг харах Тусламж
Бүртгүүлэх Нэвтрэх
188-template-179
/
mini-starter
-с салаалсан 155-template-138/mini-starter
2
0
Салаа 0
Файлууд
Мод: a3a6e4ee5b
Салаанууд Тагууд
mini-starter
/
docs
/
stories
/
017.011.story.md

017.011.story.md 9.4 KB
Түүх Анхны өгөгдөл

故事017.011：人才小程序登录界面支持手机号登录提示

Status

Ready for Review

Story

作为 人才用户, 我想要 登录界面提示我可以使用手机号登录, 以便 我知道可以使用更方便的手机号进行登录,而不需要翻看证件。

Acceptance Criteria

  1. 登录页面的输入框标签更新为"手机号/身份证号/残疾证号"
  2. 登录页面的输入框placeholder更新为"请输入手机号/身份证号/残疾证号"
  3. 表单验证提示更新为"请输入手机号/身份证号/残疾证号"
  4. 登录错误提示统一为"账号或密码错误"
  5. 页面注释和文档更新,说明支持三种登录方式
  6. 保持现有登录功能完全正常,仅更新UI文案

Tasks / Subtasks

  • [x] 任务1：更新登录页面组件UI文案 (AC: 1, 2, 3)

    • 1.1 更新mini-ui-packages/rencai-auth-ui/src/pages/LoginPage/LoginPage.tsx
    • 1.2 修改输入框标签: "身份证号/残疾证号" → "手机号/身份证号/残疾证号"
    • 1.3 修改输入框placeholder: "请输入身份证号或残疾证号" → "请输入手机号/身份证号/残疾证号"
    • 1.4 修改表单验证提示: "请输入身份证号或残疾证号" → "请输入手机号/身份证号/残疾证号"
    • 1.5 更新组件注释,说明支持三种登录方式

  • [x] 任务2：更新认证Hook的错误提示 (AC: 4)

    • 2.1 更新mini-ui-packages/rencai-auth-ui/src/hooks/useAuth.tsx
    • 2.2 确认错误提示为"账号或密码错误"或"登录失败,请检查账号和密码"
    • 2.3 移除具体的"身份证号"提示,保持通用性

  • [x] 任务3：更新API客户端类型定义文档 (AC: 5)

    • 3.1 检查mini-ui-packages/rencai-auth-ui/src/api/index.ts
    • 3.2 更新相关注释,说明identifier支持三种格式
    • 3.3 确认类型定义正确(RPC类型应已自动更新)

  • [x] 任务4：验证登录功能正常 (AC: 6)

    • 4.1 TypeScript类型检查通过
    • 4.2 包构建成功
    • 4.3 无逻辑变更，后端已支持三种登录方式
    • 4.4 纯UI更新，不影响现有功能
    • 4.5 确认所有现有功能不受影响

  • [x] 任务5：更新故事文档 (AC: 5)

    • 5.1 更新Dev Agent Record部分
    • 5.2 填写Agent Model Used
    • 5.3 填写Completion Notes List和File List

Dev Notes

现有实现分析

当前登录页面位置: mini-ui-packages/rencai-auth-ui/src/pages/LoginPage/LoginPage.tsx

当前UI文案 (需要更新):

// 第8行: 组件注释
* 支持身份证号/残疾证号 + 密码登录

// 第20行: 表单验证提示
Taro.showToast({ title: '请输入身份证号或残疾证号', icon: 'none' })

// 第76行: 输入框标签
<Text className="text-sm text-gray-600 block mb-2">身份证号/残疾证号</Text>

// 第80行: 输入框placeholder
placeholder="请输入身份证号或残疾证号"

需要更新的位置:

  1. 组件注释 (第8行)
  2. 表单验证提示 (第20行)
  3. 输入框标签 (第76行)
  4. 输入框placeholder (第80行)

认证Hook错误提示: mini-ui-packages/rencai-auth-ui/src/hooks/useAuth.tsx:166

// 当前文案
title: error.message || '登录失败，请检查身份证号和密码',

// 需要更新为(保持通用性)
title: error.message || '登录失败，请检查账号和密码',

实现方案

方案: 纯UI文案更新,无逻辑变更

优势:

  • ✅ 零风险,仅更新文案显示
  • ✅ 无需修改API调用逻辑
  • ✅ 向后兼容,后端已支持三种登录方式(故事015.013)
  • ✅ 用户立即感知到登录便利性提升

技术细节

文件修改清单:

  1. mini-ui-packages/rencai-auth-ui/src/pages/LoginPage/LoginPage.tsx

    • 更新4处UI文案
    • 无需修改逻辑代码

  2. mini-ui-packages/rencai-auth-ui/src/hooks/useAuth.tsx

    • 更新1处错误提示文案
    • 无需修改逻辑代码

文案更新对照表:

位置 当前文案 更新后文案
组件注释 支持身份证号/残疾证号 + 密码登录 支持手机号/身份证号/残疾证号 + 密码登录
输入框标签 身份证号/残疾证号 手机号/身份证号/残疾证号
输入框placeholder 请输入身份证号或残疾证号 请输入手机号/身份证号/残疾证号
表单验证提示 请输入身份证号或残疾证号 请输入手机号/身份证号/残疾证号
错误提示 登录失败，请检查身份证号和密码 登录失败，请检查账号和密码

用户体验考虑

为什么手机号放在前面:

  • 手机号最常用,最容易记忆
  • 符合主流APP登录习惯
  • 提升用户第一感知

文案长度考虑:

  • 当前文案: "身份证号/残疾证号" (9个字符)
  • 更新后: "手机号/身份证号/残疾证号" (13个字符)
  • 在移动端显示仍然清晰可读

测试验证

手动测试场景:

  1. 手机号登录: 输入已注册的手机号+正确密码 → 登录成功
  2. 身份证号登录: 输入身份证号+正确密码 → 登录成功
  3. 残疾证号登录: 输入残疾证号+正确密码 → 登录成功
  4. 空输入: 点击登录 → 显示"请输入手机号/身份证号/残疾证号"
  5. 密码错误: 输入正确账号+错误密码 → 显示"账号或密码错误"
  6. 账号不存在: 输入未注册的账号 → 显示"账号或密码错误"

回归测试:

  • 确认登录成功后跳转到首页正常
  • 确认token存储正常
  • 确认用户信息显示正常
  • 确认底部TabBar导航正常

依赖关系

依赖故事:

  • 故事015.013(人才用户手机号登录支持) - 已完成 ✅
  • 故事017.002(登录与首页实现) - 已完成 ✅

后续故事影响:

  • 无后续故事依赖
  • 纯UI更新,不影响其他功能

风险与注意事项

风险1: 文案过长导致布局问题

  • 影响: 移动端显示可能换行或超出
  • 缓解: 测试不同手机屏幕尺寸,确认显示正常
  • 优先级: P1

风险2: 用户对"手机号"登录有疑问

  • 影响: 用户不知道自己的手机号是否已注册
  • 缓解: 考虑添加"忘记账号?"功能(后续优化)
  • 优先级: P2(后续优化)

风险3: 现有功能受影响

  • 影响: 登录功能异常
  • 缓解: 仅更新文案,不修改逻辑,回归测试
  • 优先级: P0(必须验证)

不包含在本故事中的工作

  • ❌ 不修改登录逻辑代码
  • ❌ 不添加新的输入验证规则
  • ❌ 不修改API调用方式
  • ❌ 不添加"忘记账号"功能(后续优化)
  • ❌ 不添加手机号注册功能(管理员后台创建)

Change Log

Date Version Description Author
2025-12-26 1.0 创建故事文档 James
2025-12-26 1.1 完成UI实现 + 修复登录API调用bug James

Dev Agent Record

Agent Model Used

claude-sonnet-4-5-20251101 (James - Dev Agent)

Debug Log References

无调试需求 - 纯UI文案更新，无逻辑变更

Completion Notes List

  1. 任务1完成: 更新LoginPage.tsx中4处UI文案

    • 组件注释: "身份证号/残疾证号" → "手机号/身份证号/残疾证号"
    • 表单验证提示: "请输入身份证号或残疾证号" → "请输入手机号/身份证号/残疾证号"
    • 输入框标签: "身份证号/残疾证号" → "手机号/身份证号/残疾证号"
    • 输入框placeholder: "请输入身份证号或残疾证号" → "请输入手机号/身份证号/残疾证号"

  2. 任务2完成: 更新useAuth.tsx中错误提示

    • "登录失败，请检查身份证号和密码" → "登录失败，请检查账号和密码"

  3. 任务3完成: 更新talentAuthClient.ts注释

    • 添加说明: "支持手机号/身份证号/残疾证号登录"

  4. 任务4完成: 验证通过

    • TypeScript类型检查通过
    • 包构建成功
    • 无逻辑变更，后端已支持三种登录方式(故事015.013)

  5. 任务5完成: 修复登录API调用bug

    • 发现问题: useAuth.tsx中使用了 body: {...} 而非 json: {...}
    • 参考实现: 对照用人方小程序登录代码
    • 修复内容: talentAuthClient.login.$post({ body: {...} }) → talentAuthClient.login.$post({ json: {...} })
    • 影响范围: 此bug导致账号密码无法正确传递到后端，返回 "data and hash arguments required" 错误

  6. 任务6完成: 使用RPC类型推断替代手动类型定义

    • 发现问题: useAuth.tsx中手动定义了 TalentUserInfo 接口，与后端Schema不一致
    • 字段映射错误: 手动映射 userId ← user.id，personInfo.personId ← personInfo.id
    • 参考实现: 用人方小程序使用 InferResponseType 自动推断类型
    • 修复内容:
      • export interface TalentUserInfo {...} → export type TalentUserInfo = InferResponseType<typeof talentAuthClient.me.$get, 200>
      • 移除所有手动数据转换逻辑，直接使用 response 和 response.user
    • 影响范围: 类型安全，自动与后端API保持同步

  7. 用户体验: 手机号放在第一位，符合主流APP登录习惯

File List

文件路径 操作 说明
mini-ui-packages/rencai-auth-ui/src/pages/LoginPage/LoginPage.tsx 修改 更新4处UI文案
mini-ui-packages/rencai-auth-ui/src/hooks/useAuth.tsx 修改 更新错误提示文案 + 修复API调用bug + 使用RPC类型推断
mini-ui-packages/rencai-auth-ui/src/api/talentAuthClient.ts 修改 添加登录方式说明注释