feat: 添加工作空间侧边栏和文件树功能
- 新增工作空间侧边栏组件，支持展开/关闭和拖动调整宽度 - 实现文件树组件，支持文件夹展开/折叠，显示文件大小和修改时间 - 添加文件预览弹窗，支持文本、Office、图片、视频、音频等多种文件类型 - 实现文件右键菜单，提供下载、重命名、删除操作入口 - 使用 react-icons 图标库替代 emoji，提升视觉一致性 - 优化拖动性能，使用 requestAnimationFrame 确保流畅跟手 - 新增工作空间相关规范文档（workspace-sidebar、file-tree、file-preview）
This commit is contained in:
123
openspec/specs/file-tree/spec.md
Normal file
123
openspec/specs/file-tree/spec.md
Normal file
@@ -0,0 +1,123 @@
|
||||
## ADDED Requirements
|
||||
|
||||
### Requirement: 文件树显示文件和文件夹
|
||||
文件树应展示工作空间中的文件和文件夹结构。
|
||||
|
||||
#### Scenario: 文件树显示文件项
|
||||
- **WHEN** 工作空间包含文件
|
||||
- **THEN** 文件树显示文件项，包含文件图标、文件名、文件大小、修改时间
|
||||
|
||||
#### Scenario: 文件树显示文件夹项
|
||||
- **WHEN** 工作空间包含文件夹
|
||||
- **THEN** 文件树显示文件夹项，包含文件夹图标、文件夹名称、展开/折叠箭头
|
||||
|
||||
### Requirement: 文件夹默认折叠
|
||||
文件夹应默认处于折叠状态。
|
||||
|
||||
#### Scenario: 文件夹初始状态为折叠
|
||||
- **WHEN** 文件树加载完成
|
||||
- **THEN** 所有文件夹处于折叠状态，不显示子文件
|
||||
|
||||
#### Scenario: 打开侧边栏文件夹重置为折叠
|
||||
- **WHEN** 用户关闭侧边栏后再次打开
|
||||
- **THEN** 所有文件夹恢复为折叠状态
|
||||
|
||||
### Requirement: 文件夹可展开
|
||||
系统应允许用户点击文件夹展开查看子文件。
|
||||
|
||||
#### Scenario: 点击文件夹展开
|
||||
- **WHEN** 用户点击折叠状态的文件夹
|
||||
- **THEN** 文件夹展开，显示所有子文件和子文件夹
|
||||
|
||||
#### Scenario: 展开文件夹箭头旋转
|
||||
- **WHEN** 文件夹从折叠变为展开
|
||||
- **THEN** 箭头图标从向右（▶）旋转为向下（▼）
|
||||
|
||||
### Requirement: 文件夹可折叠
|
||||
系统应允许用户点击已展开的文件夹将其折叠。
|
||||
|
||||
#### Scenario: 点击已展开文件夹折叠
|
||||
- **WHEN** 用户点击已展开的文件夹
|
||||
- **THEN** 文件夹折叠，隐藏所有子文件和子文件夹
|
||||
|
||||
#### Scenario: 折叠文件夹箭头旋转
|
||||
- **WHEN** 文件夹从展开变为折叠
|
||||
- **THEN** 箭头图标从向下（▼）旋转为向右（▶）
|
||||
|
||||
### Requirement: 文件树显示文件大小
|
||||
文件项应显示文件大小。
|
||||
|
||||
#### Scenario: 文件大小显示格式
|
||||
- **WHEN** 文件树显示文件项
|
||||
- **THEN** 文件大小以 KB 或 MB 为单位显示（如 "156 KB"、"2.5 MB"）
|
||||
|
||||
#### Scenario: 文件夹不显示大小
|
||||
- **WHEN** 文件树显示文件夹项
|
||||
- **THEN** 文件夹不显示大小信息
|
||||
|
||||
### Requirement: 文件树显示修改时间
|
||||
文件项应显示修改时间。
|
||||
|
||||
#### Scenario: 修改时间显示格式
|
||||
- **WHEN** 文件树显示文件项
|
||||
- **THEN** 修改时间以 "MM-DD" 格式显示（如 "04-09"）
|
||||
|
||||
#### Scenario: 文件夹不显示修改时间
|
||||
- **WHEN** 文件树显示文件夹项
|
||||
- **THEN** 文件夹不显示修改时间
|
||||
|
||||
### Requirement: 文件树支持交互
|
||||
文件项和文件夹项应支持点击预览和右键菜单操作。
|
||||
|
||||
#### Scenario: 点击文件打开预览
|
||||
- **WHEN** 用户点击文件项
|
||||
- **THEN** 打开文件预览弹窗，显示文件详情
|
||||
|
||||
#### Scenario: 操作按钮始终显示
|
||||
- **WHEN** 文件树渲染文件项或文件夹项
|
||||
- **THEN** 操作按钮（⋯）始终显示在右侧，不依赖鼠标悬停
|
||||
|
||||
#### Scenario: 文件夹也有操作按钮
|
||||
- **WHEN** 文件树显示文件夹项
|
||||
- **THEN** 文件夹项右侧也显示操作按钮（⋯）
|
||||
|
||||
### Requirement: 文件树使用图标库图标
|
||||
文件树应使用 react-icons 图标库显示文件类型图标。
|
||||
|
||||
#### Scenario: 文件夹显示文件夹图标
|
||||
- **WHEN** 文件树显示文件夹项
|
||||
- **THEN** 使用 FiFolder 图标
|
||||
|
||||
#### Scenario: 代码文件显示代码图标
|
||||
- **WHEN** 文件树显示代码文件（.js、.py 等）
|
||||
- **THEN** 使用 FiCode 图标
|
||||
|
||||
#### Scenario: Office 文件显示对应图标
|
||||
- **WHEN** 文件树显示 Office 文件
|
||||
- **THEN** Word 使用 FaFileWord、Excel 使用 FaFileExcel、PowerPoint 使用 FaFilePowerpoint
|
||||
|
||||
#### Scenario: 媒体文件显示对应图标
|
||||
- **WHEN** 文件树显示媒体文件
|
||||
- **THEN** 图片使用 FiImage、视频使用 FiVideo、音频使用 FiMusic
|
||||
|
||||
### Requirement: 文件树样式遵循 BEM 规范
|
||||
文件树样式应使用 BEM 命名规范。
|
||||
|
||||
#### Scenario: 文件树类名使用 BEM
|
||||
- **WHEN** 文件树渲染
|
||||
- **THEN** 使用 .file-tree 作为 block，.file-tree__item、.file-tree__icon 等作为 element
|
||||
|
||||
#### Scenario: 文件树使用设计令牌
|
||||
- **WHEN** 文件树样式定义
|
||||
- **THEN** 使用现有设计令牌（颜色、间距、字号等），不硬编码样式值
|
||||
|
||||
### Requirement: 文件树布局紧凑统一
|
||||
文件树应采用紧凑统一的布局。
|
||||
|
||||
#### Scenario: 文件和文件夹高度一致
|
||||
- **WHEN** 文件树显示文件项和文件夹项
|
||||
- **THEN** 文件项和文件夹项的高度相同（padding: 4px 8px）
|
||||
|
||||
#### Scenario: 文件信息紧凑显示
|
||||
- **WHEN** 文件树显示文件项
|
||||
- **THEN** 文件大小宽度为 50px，修改时间宽度为 40px，字号为 11px
|
||||
Reference in New Issue
Block a user