feat: 添加工作空间侧边栏和文件树功能

- 新增工作空间侧边栏组件,支持展开/关闭和拖动调整宽度
- 实现文件树组件,支持文件夹展开/折叠,显示文件大小和修改时间
- 添加文件预览弹窗,支持文本、Office、图片、视频、音频等多种文件类型
- 实现文件右键菜单,提供下载、重命名、删除操作入口
- 使用 react-icons 图标库替代 emoji,提升视觉一致性
- 优化拖动性能,使用 requestAnimationFrame 确保流畅跟手
- 新增工作空间相关规范文档(workspace-sidebar、file-tree、file-preview)
This commit is contained in:
2026-04-17 15:15:57 +08:00
parent def2b6bf61
commit e382a60e0a
15 changed files with 1632 additions and 28 deletions

View 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** 弹窗关闭,不执行删除操作