refactor(BindContactModal): 绑定联系方式弹窗目录化拆分（180→119行, -34%） #1183

Merged

xiaoxia merged 17 commits from refactor/bind-contact-modal-split into develop 2026-07-30 19:58:49 +08:00

Conversation 3 Commits 17 Files Changed 5

+194 -83

xiaoxia commented 2026-07-30 07:43:28 +08:00

Owner

Copy Link

Copy Source

变更内容

将 BindContactModal.tsx（180行）目录化拆分，降低单文件复杂度：

拆分结构

• index.tsx - 主组件（119行，-34%），只保留渲染逻辑
• types.ts - 类型定义（BindContactModalProps、ContactType）
• hooks/useCountdown.ts - 通用倒计时Hook（可复用）
• hooks/useBindContactForm.ts - 绑定表单业务Hook

改动说明

1. 提取 useCountdown Hook，封装倒计时逻辑，可复用于其他验证码场景
2. 提取 useBindContactForm Hook，封装表单状态、验证码发送、提交绑定业务逻辑
3. 主组件只保留 JSX 渲染，逻辑与视图分离
4. 路径向后兼容：@/components/auth/BindContactModal 仍可直接 import 默认导出
5. 新增 src/test/components/auth/BindContactModal.test.tsx smoke 测试

## 变更内容 将 `BindContactModal.tsx`（180行）目录化拆分，降低单文件复杂度： ### 拆分结构 - **index.tsx** - 主组件（119行，-34%），只保留渲染逻辑 - **types.ts** - 类型定义（BindContactModalProps、ContactType） - **hooks/useCountdown.ts** - 通用倒计时Hook（可复用） - **hooks/useBindContactForm.ts** - 绑定表单业务Hook ### 改动说明 1. 提取 `useCountdown` Hook，封装倒计时逻辑，可复用于其他验证码场景 2. 提取 `useBindContactForm` Hook，封装表单状态、验证码发送、提交绑定业务逻辑 3. 主组件只保留 JSX 渲染，逻辑与视图分离 4. 路径向后兼容：`@/components/auth/BindContactModal` 仍可直接 import 默认导出 5. 新增 `src/test/components/auth/BindContactModal.test.tsx` smoke 测试

xiaoxia added 6 commits 2026-07-30 07:43:29 +08:00

refactor(BindContactModal): 抽取 useCountdown hook f83c96bb77

refactor(BindContactModal): 抽取 useBindContactForm hook ad902105f5

refactor(BindContactModal): 目录化拆分 - 提取类型定义 61117e50bc

refactor(BindContactModal): 目录化拆分 - 主组件使用useBindContactForm Hook 0fc133798b

refactor(BindContactModal): 删除旧的单文件组件（已目录化） f021ff2a74

test(BindContactModal): 添加模块导入smoke测试 af38a296c5

xiaoxia added 1 commit 2026-07-30 07:58:53 +08:00

fix(BindContactModal): 修复表单验证异常被静默吞掉的问题 4a848247fa

xiaoxia added 1 commit 2026-07-30 08:15:24 +08:00

fix(BindContactModal): 移除未使用的onCancel参数修复Lint错误 21a66be8a6

gitea-actions bot commented 2026-07-30 08:18:12 +08:00

Copy Link

Copy Source

🚀 预览环境已部署

项目	详情
PR号	#1183
预览链接	https://pr-1183.preview.xiaoxiajianji.com
API环境	staging

💡 预览环境使用 staging API 数据，请勿在预览环境中操作重要数据。

🔄 每次提交新代码后预览环境会自动更新。

🗑️ PR 关闭或合并后，预览环境会自动清理。

🚀 **预览环境已部署** | 项目 | 详情 | |------|------| | PR号 | #1183 | | 预览链接 | [https://pr-1183.preview.xiaoxiajianji.com](https://pr-1183.preview.xiaoxiajianji.com) | | API环境 | staging | > 💡 预览环境使用 staging API 数据，请勿在预览环境中操作重要数据。 > > 🔄 每次提交新代码后预览环境会自动更新。 > > 🗑️ PR 关闭或合并后，预览环境会自动清理。

xiaoxia added 1 commit 2026-07-30 08:23:56 +08:00

fix: remove hook re-exports to avoid react-refresh warning b1e85b68df

xiaoxia added 1 commit 2026-07-30 08:52:29 +08:00

fix(BindContactModal): prettier format 6c5e76d32e

xiaoxia added 1 commit 2026-07-30 09:27:41 +08:00

fix: prettier format useCountdown 550b6cb73c

xiaoxia added 1 commit 2026-07-30 09:51:11 +08:00

fix: rename code field to email_code/phone_code to avoid conflict 5e0c2f2654

xiaoxia added 1 commit 2026-07-30 09:51:12 +08:00

fix: update code field names in submit logic 2b883b5468

xiaoxia added 1 commit 2026-07-30 10:20:48 +08:00

fix: prettier formatting 3be0bc68a0

xiaoxia added 1 commit 2026-07-30 10:20:49 +08:00

fix: prettier formatting ab6a2ffb08

xiaoxia added 1 commit 2026-07-30 10:34:46 +08:00

fix: Prettier格式化 eba067088e

auto-approve-bot commented 2026-07-30 10:44:57 +08:00

Collaborator

Copy Link

Copy Source

代码审查结果 - PR #1183

⚠️ 问题（1个需要修改）

1. apps/web/src/components/auth/BindContactModal/hooks/useBindContactForm.ts 第46行：表单验证逻辑存在缺陷，导致无法提交。
   • 原因：form.validateFields() 在未指定字段名时，会校验表单内所有字段。由于表单中同时存在 email_code 和 phone_code，且这两个字段都设置了 required: true 规则，当用户在“手机号”标签页提交时，校验会失败，因为隐藏的“邮箱验证码”字段为空，反之亦然。
   • 后果：用户无法完成绑定流程，提交操作总是报错。
   • 修改建议：仅校验当前激活标签页对应的字段。修改为 await form.validateFields([activeTab, activeTab + '_code'])。

💡 建议（1个可选）

1. apps/web/src/components/auth/BindContactModal/hooks/useCountdown.ts 第10-24行：倒计时 Hook 的 useEffect 依赖项包含 countdown，导致每次倒计时数值变化（每秒）都会清除并重新创建 setInterval。
   • 具体内容：虽然功能上能正常工作，但频繁创建和销毁定时器不符合最佳实践，且可能带来微小的性能开销。建议使用 useRef 存储剩余时间或调整依赖逻辑，确保定时器仅在开始和结束时创建/销毁。

---

✅ 格式检查通过 | ❌ 逻辑审查需修改 | ⚠️ 建议关注性能

---

_{🤖 由 AI 代码审查机器人自动生成 | 2026-07-30 02:44:56 | 模型:}

## 代码审查结果 - PR #1183 ### ⚠️ 问题（1个需要修改） 1. **apps/web/src/components/auth/BindContactModal/hooks/useBindContactForm.ts 第46行**：表单验证逻辑存在缺陷，导致无法提交。 - **原因**：`form.validateFields()` 在未指定字段名时，会校验表单内所有字段。由于表单中同时存在 `email_code` 和 `phone_code`，且这两个字段都设置了 `required: true` 规则，当用户在“手机号”标签页提交时，校验会失败，因为隐藏的“邮箱验证码”字段为空，反之亦然。 - **后果**：用户无法完成绑定流程，提交操作总是报错。 - **修改建议**：仅校验当前激活标签页对应的字段。修改为 `await form.validateFields([activeTab, activeTab + '_code'])`。 ### 💡 建议（1个可选） 1. **apps/web/src/components/auth/BindContactModal/hooks/useCountdown.ts 第10-24行**：倒计时 Hook 的 `useEffect` 依赖项包含 `countdown`，导致每次倒计时数值变化（每秒）都会清除并重新创建 `setInterval`。 - **具体内容**：虽然功能上能正常工作，但频繁创建和销毁定时器不符合最佳实践，且可能带来微小的性能开销。建议使用 `useRef` 存储剩余时间或调整依赖逻辑，确保定时器仅在开始和结束时创建/销毁。 --- ✅ 格式检查通过 | ❌ 逻辑审查需修改 | ⚠️ 建议关注性能 --- _{🤖 由 AI 代码审查机器人自动生成 | 2026-07-30 02:44:56 | 模型:} <!-- AI_CODE_REVIEW_AUTO_COMMENT -->

xiaoxia merged commit dc38c3fa8b into develop 2026-07-30 19:58:49 +08:00

gitea-actions bot commented 2026-07-30 19:59:41 +08:00

Copy Link

Copy Source

🗑️ 预览环境已清理

PR #1183 已关闭或合并，对应的预览环境已被清理。

如有需要，可以重新打开 PR 来重新生成预览环境。

🗑️ **预览环境已清理** PR #1183 已关闭或合并，对应的预览环境已被清理。 > 如有需要，可以重新打开 PR 来重新生成预览环境。

Sign in to join this conversation.

Reviewers

No Reviewers

Labels

Clear labels

P0

阻塞性，必须立即处理

P1

高优先级

P2

中优先级

P3

低优先级/后考虑

architecture

架构设计

backend

后端相关

blocked

阻塞中

bug

Bug修复

ci-bug

CI本身的bug

ci-optimization

CI优化类任务

ci-pipeline

CI流水线/workflow相关

cleanup

代码清理

devops

运维/部署/CI

documentation

文档相关

feature

新功能

frontend

前端相关

question

需要讨论确认

ready

PR CI通过，可合并

refactor

代码重构

No Label

Milestone

No items

No Milestone

Projects

Clear projects

No project

Assignees

Clear assignees

auto-approve-bot xiaoxia

No Assignees

3 Participants

Notifications

Subscribe

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: xiaoxia/xiaoxia-saas#1183