docs/v1.0/client/rfcs/108-fix-folder-modal.md

创建文件夹弹窗优化

修复日期：2025-01-12
修复类型：功能优化
影响范围：项目面板、文件夹管理

---

修复内容

1. 新增父文件夹名称显示

• 在创建子文件夹时显示父文件夹名称（只读）
• 根据是否有父文件夹调整弹窗标题和描述
• 父文件夹信息通过UI Store管理

2. 颜色选择方式优化

• 将下拉选择改为色块点击方式
• 提供6种预设颜色选项
• 选中状态有明显的视觉反馈（边框加粗、缩放效果）
• 支持hover效果和tooltip显示颜色名称

3. 文件夹菜单功能完善

• 修复"新建子文件夹"功能，正确调用创建文件夹弹窗
• 区分"新建子文件夹"和"新建项目"功能
• 传递正确的父文件夹信息

---

技术实现

UI Store 更新

interface UIState {
  createFolderParentInfo: { id: number; name: string } | null;
  setCreateFolderModalOpen: (
    open: boolean,
    parentInfo?: { id: number; name: string } | null
  ) => void;
}

色块选择组件

<div className="flex flex-wrap gap-2">
  {colorOptions.map((option) => (
    <button
      className={cn(
        "w-8 h-8 rounded-full border-2 transition-all",
        option.bgClass,
        formData.color === option.value
          ? "border-foreground scale-110"
          : "border-border hover:border-foreground/50"
      )}
      onClick={() => handleColorSelect(option.value)}
    />
  ))}
</div>

父文件夹信息显示

{
  isSubfolder && (
    <div className="space-y-2">
      <Label>父文件夹</Label>
      <div className="px-3 py-2 bg-muted rounded-md text-sm text-muted-foreground">
        {createFolderParentInfo?.name}
      </div>
    </div>
  );
}

---

用户体验改进

1. 直观的颜色选择：用户可以直接看到颜色效果，无需通过下拉菜单
2. 清晰的层级关系：显示父文件夹名称，用户明确知道在哪里创建子文件夹
3. 一致的交互体验：根文件夹和普通文件夹都能创建子文件夹
4. 视觉反馈优化：选中的颜色有明显的视觉标识

---

测试要点

• 根文件夹创建子文件夹功能
• 普通文件夹右键菜单创建子文件夹功能
• 颜色选择交互效果
• 父文件夹名称正确显示
• 表单验证功能正常
• 弹窗关闭时状态重置

---

修复总结： 成功优化了创建文件夹弹窗的用户体验，增加了父文件夹信息显示，改进了颜色选择方式，完善了文件夹菜单功能。用户现在可以更直观地创建和管理文件夹层级结构。