# CreateFolderModal DialogFooter 结构优化

## 问题描述

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

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

## 修复方案

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

## 具体修改

### 修改前结构：

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

### 修改后结构：

```tsx
<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`