# CreateFolderModal DialogFooter 结构优化 ## 问题描述 在 `CreateFolderModal.tsx` 中,`DialogFooter` 被嵌套在 `Form` 组件内部,导致: - 取消按钮不应该在表单内部,语义不正确 - Form 组件渲染 `
` 标签时,DialogFooter 中的所有按钮都在表单内部 ## 修复方案 将 `DialogFooter` 从 `Form` 组件内部移出,作为 `DialogContent` 的直接子元素。 ## 具体修改 ### 修改前结构: ```tsx {/* 表单字段 */}
``` ### 修改后结构: ```tsx
{/* 表单字段 */}
``` ## 关键变更 1. **DialogFooter 位置**:从 Form 内部移到外部 2. **提交按钮**:从 `type="submit"` 改为 `onClick={form.handleSubmit(submitHandler)}` 3. **语义优化**:取消按钮不再是表单的一部分 ## 修复结果 - ✅ HTML 结构更加语义化 - ✅ 取消按钮独立于表单 - ✅ 保持所有现有功能(验证、提交、错误处理) - ✅ 通过语法检查,无错误 ## 文件位置 `client/src/components/features/project/CreateFolderModal.tsx`