docs/v1.0/client/rfcs/101-fix-dialog-footer.md

CreateFolderModal DialogFooter 结构优化

问题描述

在 CreateFolderModal.tsx 中，DialogFooter 被嵌套在 Form 组件内部，导致：

• 取消按钮不应该在表单内部，语义不正确
• Form 组件渲染 <form> 标签时，DialogFooter 中的所有按钮都在表单内部

修复方案

将 DialogFooter 从 Form 组件内部移出，作为 DialogContent 的直接子元素。

具体修改

修改前结构：

<Form onSubmit={submitHandler}>
  {/* 表单字段 */}
  <DialogFooter>
    <Button type="button" onClick={handleClose}>
      取消
    </Button>
    <Button type="submit">创建文件夹</Button>
  </DialogFooter>
</Form>

修改后结构：

<Form onSubmit={submitHandler}>
  {/* 表单字段 */}
</Form>

<DialogFooter>
  <Button type="button" onClick={handleClose}>取消</Button>
  <Button type="button" onClick={form.handleSubmit(submitHandler)}>创建文件夹</Button>
</DialogFooter>

关键变更

1. DialogFooter 位置：从 Form 内部移到外部
2. 提交按钮：从 type="submit" 改为 onClick={form.handleSubmit(submitHandler)}
3. 语义优化：取消按钮不再是表单的一部分

修复结果

• ✅ HTML 结构更加语义化
• ✅ 取消按钮独立于表单
• ✅ 保持所有现有功能（验证、提交、错误处理）
• ✅ 通过语法检查，无错误

文件位置

client/src/components/features/project/CreateFolderModal.tsx