优化 ModalForm 弹窗在平板与移动端的响应式体验

[hotlong]

优化 ModalForm 弹窗在各种屏幕尺寸下的响应式表现

问题概述

• 当前 Project Task 的 ModalForm 在平板/桌面端过窄，字段全部单列，长表单需要大量滚动，UX 不佳；
• 没有利用已定义的 sections 分组进行布局；
• 操作按钮有时被遮挡，底部 sticky footer 在移动端易被忽略；
• Progress 字段未增加滑块控件。

优化建议

1. 保证表单渲染时应用 sections 配置（CRM ProjectView 已定义），并用 2 列布局；
2. Modal 默认宽度在平板端自动升级到 lg/max-w-2xl 触发容器查询，启用多列布局；
3. 移动端（<640px）长表单可自动切换 wizard 分步模式，提升可用性；
4. Progress 字段使用滑块控件增强交互；
5. 增加响应式测试验证 modal 在 tablet/mobile 场景的表现。

相关代码建议

• ModalForm.tsx: ��查 modalSize/sections 配置以及 container query grid-cols
• autoLayout.ts: 优化自动推断列数，建议平板端 ModalForm 为 2 列
• project.view.ts: 确认 sections 配置被正确传递

检查动作

• 优化并合并上述建议
• 运行相关 test (MobileUX.test.tsx、responsive-layout.test.tsx)
• 更新 ROADMAP.md "Console Advanced Polish" 下添加此优化项

参考

• ModalForm.tsx
• autoLayout.ts
• project.view.ts

---

上述优化全部完成后，记得运行测试，并更新 roadmap。