feat: 添加工作空间侧边栏和文件树功能
- 新增工作空间侧边栏组件,支持展开/关闭和拖动调整宽度 - 实现文件树组件,支持文件夹展开/折叠,显示文件大小和修改时间 - 添加文件预览弹窗,支持文本、Office、图片、视频、音频等多种文件类型 - 实现文件右键菜单,提供下载、重命名、删除操作入口 - 使用 react-icons 图标库替代 emoji,提升视觉一致性 - 优化拖动性能,使用 requestAnimationFrame 确保流畅跟手 - 新增工作空间相关规范文档(workspace-sidebar、file-tree、file-preview)
This commit is contained in:
116
openspec/specs/file-preview/spec.md
Normal file
116
openspec/specs/file-preview/spec.md
Normal file
@@ -0,0 +1,116 @@
|
||||
## ADDED Requirements
|
||||
|
||||
### Requirement: 文件预览弹窗显示文件信息
|
||||
文件预览弹窗应显示文件的基本信息。
|
||||
|
||||
#### Scenario: 显示文件基本信息
|
||||
- **WHEN** 文件预览弹窗打开
|
||||
- **THEN** 弹窗显示文件名、文件类型、文件大小、修改时间
|
||||
|
||||
#### Scenario: 弹窗标题显示文件名
|
||||
- **WHEN** 文件预览弹窗打开
|
||||
- **THEN** 弹窗 header 显示文件名和关闭按钮(×)
|
||||
|
||||
### Requirement: 文本文件预览
|
||||
文本文件预览应显示文件内容。
|
||||
|
||||
#### Scenario: 文本文件显示内容
|
||||
- **WHEN** 用户预览文本文件(.txt、.md、.json、.js、.css 等)
|
||||
- **THEN** 预览区域显示文件内容(使用模拟数据)
|
||||
|
||||
#### Scenario: 代码文件语法高亮
|
||||
- **WHEN** 用户预览代码文件(.js、.jsx、.py 等)
|
||||
- **THEN** 预览区域显示代码内容,可考虑简单的语法高亮(非必须)
|
||||
|
||||
### Requirement: Office 文件预览
|
||||
Office 文件预览应显示文件信息和提示。
|
||||
|
||||
#### Scenario: Word 文件预览
|
||||
- **WHEN** 用户预览 Word 文档(.doc、.docx)
|
||||
- **THEN** 预览区域显示文件类型图标和提示"点击下载查看完整内容"
|
||||
|
||||
#### Scenario: Excel 文件预览
|
||||
- **WHEN** 用户预览 Excel 文档(.xls、.xlsx)
|
||||
- **THEN** 预览区域显示文件类型图标和提示"点击下载查看完整内容"
|
||||
|
||||
#### Scenario: PowerPoint 文件预览
|
||||
- **WHEN** 用户预览 PowerPoint 文档(.ppt、.pptx)
|
||||
- **THEN** 预览区域显示文件类型图标和提示"点击下载查看完整内容"
|
||||
|
||||
### Requirement: 图片文件预览
|
||||
图片文件预览应显示图片预览区域。
|
||||
|
||||
#### Scenario: 图片文件预览区域
|
||||
- **WHEN** 用户预览图片文件(.jpg、.png、.gif 等)
|
||||
- **THEN** 预览区域显示图片预览区域(占位符或实际图片)
|
||||
|
||||
#### Scenario: 图片文件显示尺寸信息
|
||||
- **WHEN** 用户预览图片文件
|
||||
- **THEN** 文件信息显示图片尺寸(如 "1920 × 1080")
|
||||
|
||||
### Requirement: 视频文件预览
|
||||
视频文件预览应显示文件信息和提示。
|
||||
|
||||
#### Scenario: 视频文件预览
|
||||
- **WHEN** 用户预览视频文件(.mp4、.avi、.mov 等)
|
||||
- **THEN** 预览区域显示视频图标和提示"点击下载播放视频"
|
||||
|
||||
#### Scenario: 视频文件显示时长
|
||||
- **WHEN** 用户预览视频文件
|
||||
- **THEN** 文件信息显示视频时长(如 "02:35")
|
||||
|
||||
### Requirement: 音频文件预览
|
||||
音频文件预览应显示文件信息和提示。
|
||||
|
||||
#### Scenario: 音频文件预览
|
||||
- **WHEN** 用户预览音频文件(.mp3、.wav、.ogg 等)
|
||||
- **THEN** 预览区域显示音频图标和提示"点击下载播放音频"
|
||||
|
||||
#### Scenario: 音频文件显示时长
|
||||
- **WHEN** 用户预览音频文件
|
||||
- **THEN** 文件信息显示音频时长(如 "03:45")
|
||||
|
||||
### Requirement: 文件预览弹窗操作
|
||||
文件预览弹窗应提供下载和关闭操作。
|
||||
|
||||
#### Scenario: 点击下载按钮
|
||||
- **WHEN** 用户点击预览弹窗的"下载"按钮
|
||||
- **THEN** 显示 Toast 提示"文件下载中..."
|
||||
|
||||
#### Scenario: 点击关闭按钮
|
||||
- **WHEN** 用户点击预览弹窗的"关闭"按钮
|
||||
- **THEN** 预览弹窗关闭
|
||||
|
||||
### Requirement: 文件右键菜单
|
||||
文件项应支持右键菜单操作。
|
||||
|
||||
#### Scenario: 点击操作按钮显示菜单
|
||||
- **WHEN** 用户点击文件项的操作按钮(⋮)
|
||||
- **THEN** 显示右键菜单,包含"下载"、"重命名"、"删除"选项
|
||||
|
||||
#### Scenario: 点击下载菜单项
|
||||
- **WHEN** 用户点击右键菜单的"下载"项
|
||||
- **THEN** 显示 Toast 提示"文件下载中...",菜单关闭
|
||||
|
||||
#### Scenario: 点击重命名菜单项
|
||||
- **WHEN** 用户点击右键菜单的"重命名"项
|
||||
- **THEN** 显示 Toast 提示"文件已重命名",菜单关闭
|
||||
|
||||
#### Scenario: 点击删除菜单项
|
||||
- **WHEN** 用户点击右键菜单的"删除"项
|
||||
- **THEN** 显示删除确认弹窗
|
||||
|
||||
### Requirement: 删除确认弹窗
|
||||
删除操作应显示二次确认弹窗。
|
||||
|
||||
#### Scenario: 删除确认弹窗显示
|
||||
- **WHEN** 用户点击右键菜单的"删除"项
|
||||
- **THEN** 显示确认弹窗,提示"确定要删除文件 [文件名] 吗?"
|
||||
|
||||
#### Scenario: 确认删除
|
||||
- **WHEN** 用户点击确认弹窗的"确认"按钮
|
||||
- **THEN** 显示 Toast 提示"文件已删除",弹窗关闭
|
||||
|
||||
#### Scenario: 取消删除
|
||||
- **WHEN** 用户点击确认弹窗的"取消"按钮
|
||||
- **THEN** 弹窗关闭,不执行删除操作
|
||||
Reference in New Issue
Block a user