feat: 完善工作空间文件操作功能
新增功能: - 重命名弹框(替换 alert) - 新建文件/文件夹弹框 - 上传文件功能 - 移动文件功能(树状选择+确认) - 查看文件详情弹框 - 刷新文件列表按钮 交互优化: - 修复操作按钮 toggle 行为 - 右键菜单分组显示(基础操作/详细信息/危险操作) - 预览弹框宽度调整为 600px - 不支持预览的文件类型 Toast 提示 - 文件树子项缩进 16px - 空文件夹展开后直接为空 数据增强: - 中文文件名示例 - 无法预览类型示例(压缩包、数据库、二进制) - 多级文件夹嵌套示例 - 空文件夹示例 样式新增: - 标题栏操作按钮样式 - 刷新按钮旋转动画 - 新建按钮下拉菜单 - 右键菜单分组分隔线 - 空状态样式
This commit is contained in:
189
openspec/specs/file-operations/spec.md
Normal file
189
openspec/specs/file-operations/spec.md
Normal file
@@ -0,0 +1,189 @@
|
||||
# Purpose
|
||||
|
||||
定义工作空间文件操作功能,包括重命名、新建、上传、移动、查看详情、刷新等操作。(TBD - 待补充详细目的)
|
||||
|
||||
# Requirements
|
||||
|
||||
## ADDED Requirements
|
||||
|
||||
### Requirement: 文件重命名弹框
|
||||
系统应提供重命名弹框,允许用户输入新文件名。
|
||||
|
||||
#### Scenario: 点击重命名显示弹框
|
||||
- **WHEN** 用户点击右键菜单的"重命名"项
|
||||
- **THEN** 显示重命名弹框,输入框预填充当前文件名
|
||||
|
||||
#### Scenario: 重命名弹框确认
|
||||
- **WHEN** 用户在重命名弹框中输入新名称并点击"确认"
|
||||
- **THEN** 显示 Toast 提示"重命名成功",弹框关闭
|
||||
|
||||
#### Scenario: 重命名弹框取消
|
||||
- **WHEN** 用户点击重命名弹框的"取消"按钮
|
||||
- **THEN** 弹框关闭,不执行重命名操作
|
||||
|
||||
#### Scenario: 重命名弹框标题
|
||||
- **WHEN** 重命名弹框显示
|
||||
- **THEN** 弹框标题为"重命名"
|
||||
|
||||
### Requirement: 新建文件功能
|
||||
系统应允许用户新建文件。
|
||||
|
||||
#### Scenario: 点击新建文件显示弹框
|
||||
- **WHEN** 用户点击标题栏 [+] 按钮并选择"新建文件"
|
||||
- **THEN** 显示新建弹框,类型默认为"文件",输入框为空
|
||||
|
||||
#### Scenario: 新建文件确认
|
||||
- **WHEN** 用户在新建弹框中输入文件名并点击"确认"
|
||||
- **THEN** 显示 Toast 提示"文件创建成功",弹框关闭
|
||||
|
||||
#### Scenario: 新建文件弹框标题
|
||||
- **WHEN** 新建文件弹框显示
|
||||
- **THEN** 弹框标题为"新建文件"
|
||||
|
||||
### Requirement: 新建文件夹功能
|
||||
系统应允许用户新建文件夹。
|
||||
|
||||
#### Scenario: 点击新建文件夹显示弹框
|
||||
- **WHEN** 用户点击标题栏 [+] 按钮并选择"新建文件夹"
|
||||
- **THEN** 显示新建弹框,类型默认为"文件夹",输入框为空
|
||||
|
||||
#### Scenario: 新建文件夹确认
|
||||
- **WHEN** 用户在新建弹框中输入文件夹名并点击"确认"
|
||||
- **THEN** 显示 Toast 提示"文件夹创建成功",弹框关闭
|
||||
|
||||
#### Scenario: 新建文件夹弹框标题
|
||||
- **WHEN** 新建文件夹弹框显示
|
||||
- **THEN** 弹框标题为"新建文件夹"
|
||||
|
||||
### Requirement: 上传文件功能
|
||||
系统应允许用户上传文件。
|
||||
|
||||
#### Scenario: 点击上传文件显示文件选择器
|
||||
- **WHEN** 用户点击标题栏 [+] 按钮并选择"上传文件"
|
||||
- **THEN** 打开原生文件选择对话框
|
||||
|
||||
#### Scenario: 选择文件后模拟上传
|
||||
- **WHEN** 用户在文件选择器中选择文件并确认
|
||||
- **THEN** 显示 Toast 提示"文件上传成功"
|
||||
|
||||
#### Scenario: 取消文件选择
|
||||
- **WHEN** 用户在文件选择器中点击取消
|
||||
- **THEN** 不执行任何操作
|
||||
|
||||
### Requirement: 移动文件功能
|
||||
系统应允许用户移动文件到其他文件夹。
|
||||
|
||||
#### Scenario: 点击移动显示目标选择弹框
|
||||
- **WHEN** 用户点击右键菜单的"移动到"项
|
||||
- **THEN** 显示移动弹框,以树状结构列出所有可选的目标文件夹
|
||||
|
||||
#### Scenario: 文件夹树状展示
|
||||
- **WHEN** 移动弹框显示
|
||||
- **THEN** 文件夹以树状结构展示,子文件夹带缩进(每级 20px)和文件夹图标,层级清晰可辨
|
||||
|
||||
#### Scenario: 选中目标文件夹
|
||||
- **WHEN** 用户点击某个文件夹
|
||||
- **THEN** 该文件夹高亮选中,可切换选择其他文件夹
|
||||
|
||||
#### Scenario: 确认移动
|
||||
- **WHEN** 用户选中目标文件夹后点击"确认"按钮
|
||||
- **THEN** 显示 Toast 提示"文件已移动到 [文件夹名]",弹框关闭
|
||||
|
||||
#### Scenario: 取消移动
|
||||
- **WHEN** 用户点击"取消"按钮或遮罩层
|
||||
- **THEN** 弹框关闭,不执行移动操作
|
||||
|
||||
#### Scenario: 未选择时确认按钮禁用
|
||||
- **WHEN** 移动弹框显示但未选中任何目标文件夹
|
||||
- **THEN** "确认"按钮处于 disabled 状态
|
||||
|
||||
#### Scenario: 移动弹框仅显示文件夹
|
||||
- **WHEN** 移动弹框显示
|
||||
- **THEN** 仅列出文件夹项,不包含文件项
|
||||
|
||||
### Requirement: 查看文件详情功能
|
||||
系统应允许用户查看文件详细信息。
|
||||
|
||||
#### Scenario: 点击查看详情显示弹框
|
||||
- **WHEN** 用户点击右键菜单的"查看详情"项
|
||||
- **THEN** 显示详情弹框,展示文件完整信息
|
||||
|
||||
#### Scenario: 详情弹框显示完整信息
|
||||
- **WHEN** 文件详情弹框显示
|
||||
- **THEN** 弹框显示文件名、类型、大小、创建时间、修改时间、路径等信息
|
||||
|
||||
#### Scenario: 详情弹框标题
|
||||
- **WHEN** 文件详情弹框显示
|
||||
- **THEN** 弹框标题为"文件详情"
|
||||
|
||||
#### Scenario: 详情弹框关闭
|
||||
- **WHEN** 用户点击详情弹框的"关闭"按钮
|
||||
- **THEN** 弹框关闭
|
||||
|
||||
### Requirement: 刷新文件列表功能
|
||||
系统应允许用户刷新文件列表。
|
||||
|
||||
#### Scenario: 点击刷新按钮
|
||||
- **WHEN** 用户点击标题栏的刷新按钮(↻)
|
||||
- **THEN** 刷新按钮显示旋转动画,文件列表淡出淡入
|
||||
|
||||
#### Scenario: 刷新完成提示
|
||||
- **WHEN** 刷新操作完成
|
||||
- **THEN** 显示 Toast 提示"文件列表已刷新",旋转动画停止
|
||||
|
||||
#### Scenario: 刷新按钮位置
|
||||
- **WHEN** 工作空间侧边栏打开
|
||||
- **THEN** 刷新按钮显示在标题"工作空间"右侧
|
||||
|
||||
### Requirement: 右键菜单分组
|
||||
右键菜单应按功能分组显示。
|
||||
|
||||
#### Scenario: 基础操作组
|
||||
- **WHEN** 右键菜单显示
|
||||
- **THEN** 第一组包含"下载"、"重命名"、"移动到"操作
|
||||
|
||||
#### Scenario: 详细信息组
|
||||
- **WHEN** 右键菜单显示
|
||||
- **THEN** 第二组包含"查看详情"操作,与第一组用分隔线分开
|
||||
|
||||
#### Scenario: 危险操作组
|
||||
- **WHEN** 右键菜单显示
|
||||
- **THEN** 第三组包含"删除"操作,与第二组用分隔线分开,使用红色文字
|
||||
|
||||
#### Scenario: 菜单项显示图标
|
||||
- **WHEN** 右键菜单显示
|
||||
- **THEN** 每个菜单项左侧显示对应图标
|
||||
|
||||
### Requirement: 操作按钮 toggle 行为
|
||||
文件项的操作按钮应支持 toggle 行为。
|
||||
|
||||
#### Scenario: 点击按钮显示菜单
|
||||
- **WHEN** 用户点击文件项的操作按钮(⋯)且菜单未显示
|
||||
- **THEN** 显示该文件的右键菜单
|
||||
|
||||
#### Scenario: 再次点击按钮关闭菜单
|
||||
- **WHEN** 用户点击文件项的操作按钮(⋯)且菜单已显示
|
||||
- **THEN** 关闭右键菜单
|
||||
|
||||
#### Scenario: 点击其他文件按钮切换菜单
|
||||
- **WHEN** 右键菜单显示文件 A 的菜单
|
||||
- **THEN** 用户点击文件 B 的操作按钮
|
||||
- **AND** 关闭文件 A 的菜单,显示文件 B 的菜单
|
||||
|
||||
### Requirement: 文件夹右键菜单
|
||||
文件夹项应支持特定的右键菜单操作。
|
||||
|
||||
#### Scenario: 文件夹右键菜单项
|
||||
- **WHEN** 用户点击文件夹的操作按钮
|
||||
- **THEN** 显示包含"新建文件"、"新建文件夹"、"上传文件"、"重命名"、"删除"等操作的菜单
|
||||
|
||||
#### Scenario: 文件夹菜单不显示下载项
|
||||
- **WHEN** 文件夹右键菜单显示
|
||||
- **THEN** 菜单不包含"下载"操作项
|
||||
|
||||
### Requirement: 不支持预览的文件类型提示
|
||||
点击不支持预览的文件类型时,应显示 Toast 提示而非打开预览弹框。
|
||||
|
||||
#### Scenario: 点击不可预览文件类型
|
||||
- **WHEN** 用户点击压缩包(archive)或未知类型(unknown)的文件
|
||||
- **THEN** 显示 Toast 提示"该文件类型不支持预览",不打开预览弹框
|
||||
@@ -11,6 +11,10 @@
|
||||
- **WHEN** 文件预览弹窗打开
|
||||
- **THEN** 弹窗 header 显示文件名和关闭按钮(×)
|
||||
|
||||
#### Scenario: 弹窗宽度适中
|
||||
- **WHEN** 文件预览弹窗打开
|
||||
- **THEN** 弹窗宽度为 600px,最大宽度为 90vw
|
||||
|
||||
### Requirement: 文本文件预览
|
||||
文本文件预览应显示文件内容。
|
||||
|
||||
|
||||
@@ -121,3 +121,40 @@
|
||||
#### Scenario: 文件信息紧凑显示
|
||||
- **WHEN** 文件树显示文件项
|
||||
- **THEN** 文件大小宽度为 50px,修改时间宽度为 40px,字号为 11px
|
||||
|
||||
### Requirement: 文件树支持空状态显示
|
||||
文件树应支持空状态显示。
|
||||
|
||||
#### Scenario: 工作空间为空显示空状态
|
||||
- **WHEN** 工作空间没有任何文件或文件夹
|
||||
- **THEN** 文件树显示空状态界面,提示"工作空间为空"
|
||||
|
||||
#### Scenario: 空文件夹展开后为空
|
||||
- **WHEN** 文件夹展开且文件夹为空
|
||||
- **THEN** 文件夹下方不显示任何内容
|
||||
|
||||
### Requirement: 文件树子项缩进
|
||||
文件树子项应通过缩进体现层级关系。
|
||||
|
||||
#### Scenario: 子项缩进显示
|
||||
- **WHEN** 文件夹展开显示子项
|
||||
- **THEN** 子项左侧有 16px 缩进,与父级区分层级
|
||||
|
||||
### Requirement: 文件树包含丰富的示例数据
|
||||
文件树应包含多种类型的文件示例。
|
||||
|
||||
#### Scenario: 包含中文文件名
|
||||
- **WHEN** 文件树加载
|
||||
- **THEN** 显示包含中文文件名的文件(如"产品需求文档.docx"、"用户反馈汇总.xlsx")
|
||||
|
||||
#### Scenario: 包含无法预览的文件类型
|
||||
- **WHEN** 文件树加载
|
||||
- **THEN** 显示压缩包、数据库、二进制文件等无法预览的文件类型
|
||||
|
||||
#### Scenario: 包含多级文件夹嵌套
|
||||
- **WHEN** 文件树加载
|
||||
- **THEN** 显示至少 3 级文件夹嵌套(如 project/src/components/Button/)
|
||||
|
||||
#### Scenario: 包含空文件夹示例
|
||||
- **WHEN** 文件树加载
|
||||
- **THEN** 显示至少一个空文件夹
|
||||
|
||||
@@ -84,3 +84,41 @@
|
||||
#### Scenario: 拖动性能流畅
|
||||
- **WHEN** 用户拖动调整宽度
|
||||
- **THEN** 使用 requestAnimationFrame 优化,拖动流畅跟手,无卡顿
|
||||
|
||||
### Requirement: 标题栏显示操作按钮
|
||||
工作空间侧边栏标题栏应显示操作按钮。
|
||||
|
||||
#### Scenario: 标题栏布局
|
||||
- **WHEN** 工作空间侧边栏打开
|
||||
- **THEN** 标题栏显示"工作空间"标题,右侧依次显示刷新按钮、新建按钮、关闭按钮
|
||||
|
||||
#### Scenario: 刷新按钮位置
|
||||
- **WHEN** 标题栏显示
|
||||
- **THEN** 刷新按钮(↻)显示在标题右侧,使用 FiRefresh 图标
|
||||
|
||||
#### Scenario: 新建按钮位置
|
||||
- **WHEN** 标题栏显示
|
||||
- **THEN** 新建按钮(+)显示在刷新按钮右侧,使用 FiPlus 图标
|
||||
|
||||
#### Scenario: 新建按钮下拉菜单
|
||||
- **WHEN** 用户点击新建按钮
|
||||
- **THEN** 显示下拉菜单,包含"新建文件"、"新建文件夹"、"上传文件"选项
|
||||
|
||||
#### Scenario: 关闭按钮位置
|
||||
- **WHEN** 标题栏显示
|
||||
- **THEN** 关闭按钮(×)显示在最右侧
|
||||
|
||||
### Requirement: 标题栏按钮样式一致
|
||||
标题栏按钮应使用统一的样式。
|
||||
|
||||
#### Scenario: 按钮尺寸一致
|
||||
- **WHEN** 标题栏按钮显示
|
||||
- **THEN** 刷新按钮、新建按钮、关闭按钮的尺寸一致(28px × 28px)
|
||||
|
||||
#### Scenario: 按钮交互效果
|
||||
- **WHEN** 用户 hover 标题栏按钮
|
||||
- **THEN** 按钮背景变为 var(--color-bg-1),图标颜色变为 var(--color-text-1)
|
||||
|
||||
#### Scenario: 按钮间距
|
||||
- **WHEN** 标题栏按钮显示
|
||||
- **THEN** 按钮之间有 4px 间距
|
||||
|
||||
Reference in New Issue
Block a user