feat(plan): 优化计划提交模态框 UX - 消除关闭延迟
优化计划书提交成功后的用户体验,消除模态框关闭与页面跳转之间的延迟。
## 核心改动
### PlanFormContainer 组件优化
- 添加 isClosingFromChild 状态,避免弹窗关闭时重复重置表单
- 优化 visible watch 逻辑,在弹窗关闭时正确清理状态
- 移除提交成功后的 toast 提示,改为立即触发 close 事件
### 父组件优化(index, search, product-center, product-detail)
- handlePlanSubmit 改为 async 函数
- 移除 500ms 延迟跳转,改为立即导航
- 使用双 nextTick 确保 DOM 更新后再重置状态
- 添加 handlePlanClose 函数统一处理弹窗关闭逻辑
## 技术细节
**问题根源**:
- 原流程:提交成功 → API 返回 → 500ms 延迟 → 关闭弹窗 → 导航
- 用户感知:点击提交后模态框停留 1-2 秒才关闭,体验不佳
**解决方案**:
- PlanFormContainer:API 成功后立即 emit('close'),不等待 toast
- 父组件:close 事件触发后,使用双 nextTick 确保:
1. 第一次 nextTick:DOM 更新,模态框关闭动画开始
2. 第二次 nextTick:动画完成,表单重置
3. 立即导航到结果页
## 影响范围
- src/components/plan/PlanFormContainer.vue
- src/pages/index/index.vue
- src/pages/search/index.vue
- src/pages/product-center/index.vue
- src/pages/product-detail/index.vue
## 测试建议
1. 测试计划书提交流程是否正常工作
2. 验证模态框关闭是否立即响应
3. 确认表单数据在导航后正确清理
4. 检查返回上一页时不会显示残留数据
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Showing
7 changed files
with
89 additions
and
32 deletions
-
Please register or login to post a comment