You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
2.6 KiB
2.6 KiB
创建文件夹弹窗优化
修复日期：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>
);
}
用户体验改进
- 直观的颜色选择：用户可以直接看到颜色效果，无需通过下拉菜单
- 清晰的层级关系：显示父文件夹名称，用户明确知道在哪里创建子文件夹
- 一致的交互体验：根文件夹和普通文件夹都能创建子文件夹
- 视觉反馈优化：选中的颜色有明显的视觉标识
测试要点
- 根文件夹创建子文件夹功能
- 普通文件夹右键菜单创建子文件夹功能
- 颜色选择交互效果
- 父文件夹名称正确显示
- 表单验证功能正常
- 弹窗关闭时状态重置
修复总结： 成功优化了创建文件夹弹窗的用户体验，增加了父文件夹信息显示，改进了颜色选择方式，完善了文件夹菜单功能。用户现在可以更直观地创建和管理文件夹层级结构。