Skip to content
This repository was archived by the owner on Nov 4, 2026. It is now read-only.
This repository was archived by the owner on Nov 4, 2026. It is now read-only.

全平台弹窗表单统一使用 ModalForm,彻底消除 columns/max-width/auto-layout 分裂 #620

Closed

Description

@hotlong

背景

当前各业务入口(Console、ObjectGrid、业务模块弹窗等)表单多为手动 <Dialog><ObjectForm columns=1 /></Dialog> 实现。这导致:

  • 表单布局/宽度策略/兜底能力割裂,auto-layout/enhance 逻辑难以全局生效
  • 后续新增平台表单增强、分栏、移动适配、样式统一等能力推广非常困难
  • 维护和体验分散

根因分析

以 Console apps/console/src/App.tsx 第 344-388 行为例:

<Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
  <DialogContent className="sm:max-w-xl">  ← 手动限制宽度
    <ObjectForm schema={{ columns: 1, ... }} />  ← 硬编码 columns:1
  </DialogContent>
</Dialog>
  • 硬编码 columns: 1 导致 applyAutoLayout 被完全跳过(尊重用户配置优先)
  • 直接使用 <Dialog> 绕过了 ModalForm,所有平台增强完全失效
  • 弹窗宽度 sm:max-w-xl (576px) 与 auto-layout 推断的 2 列布局不匹配
Create Contact 弹窗截图

最优长期方案

1. ModalForm 成为唯一弹窗表单入口

  • 入口代码只需 <ModalForm schema={...} />,schema 仅传对象名、模式、字段列表、事件回调等
  • 由 ModalForm 内部统一控制:
    • auto-layout 智能推断 columns 和 colSpan
    • 自动根据表单复杂度设置 modalSize 宽度(columns=2 → lg, columns≥3 → xl)
    • 统一移动端全屏/桌面弹窗自适应策略
    • 所有表单"兜底能力"都能平台可控扩展

2. Console/App 及所有业务弹窗迁移

  • Console App.tsx 里的 <Dialog>+<ObjectForm columns=1> 组合替换为 <ModalForm />
  • 移除所有与布局相关的手动 schema 配置(columns/max-width)
  • 确保 onSuccess/onCancel/onOpenChange 回调保持兼容

3. ModalForm 暴露扩展机制

  • 通过 schema slot/hook/component 注入满足高级业务定制
  • 鼓励业务通过标准扩展点定制,而非"自己造弹窗"

TODO

  • apps/console/src/App.tsx: 将 Dialog+ObjectForm 组合替换为 ModalForm
  • 移除 columns: 1 硬编码,交由 auto-layout 推断
  • ModalForm 内部:当 auto-layout 推断 columns>1 且未手动设 modalSize 时,自动升级弹窗宽度
  • 确认行为一致覆盖移动端(全屏)/桌面(弹窗)场景
  • 补充集成测试覆盖 Console 创建/编辑弹窗场景
  • 文档更新、平台级迁移指南

受益

  • 彻底统一平台体验,auto-layout/宽度/表单增强一处生效全局收益
  • 降低维护成本,后续每次平台增强自动惠及所有业务
  • 建立"弹窗表单唯一入口"标准

关联

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Labels

bugSomething isn't working

Type

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions