feat: 完善工作空间文件操作功能

新增功能:
- 重命名弹框(替换 alert)
- 新建文件/文件夹弹框
- 上传文件功能
- 移动文件功能(树状选择+确认)
- 查看文件详情弹框
- 刷新文件列表按钮

交互优化:
- 修复操作按钮 toggle 行为
- 右键菜单分组显示(基础操作/详细信息/危险操作)
- 预览弹框宽度调整为 600px
- 不支持预览的文件类型 Toast 提示
- 文件树子项缩进 16px
- 空文件夹展开后直接为空

数据增强:
- 中文文件名示例
- 无法预览类型示例(压缩包、数据库、二进制)
- 多级文件夹嵌套示例
- 空文件夹示例

样式新增:
- 标题栏操作按钮样式
- 刷新按钮旋转动画
- 新建按钮下拉菜单
- 右键菜单分组分隔线
- 空状态样式
This commit is contained in:
2026-04-17 17:10:46 +08:00
parent e382a60e0a
commit 5f333b116a
15 changed files with 1171 additions and 33 deletions

View 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 提示"该文件类型不支持预览",不打开预览弹框

View File

@@ -11,6 +11,10 @@
- **WHEN** 文件预览弹窗打开
- **THEN** 弹窗 header 显示文件名和关闭按钮(×)
#### Scenario: 弹窗宽度适中
- **WHEN** 文件预览弹窗打开
- **THEN** 弹窗宽度为 600px最大宽度为 90vw
### Requirement: 文本文件预览
文本文件预览应显示文件内容。

View File

@@ -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** 显示至少一个空文件夹

View File

@@ -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 间距